Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Francisco Jr

[Resolvido] Div com width 100% some com zoom do navegador

Por , em Desenvolvimento frontend

Recommended Posts

Francisco Jr    0

Francisco Jr
Postado

Olá, peço desculpas se estou no lugar errado, sou novo no fórum. Meu problema é o seguinte, eu tenho uma div em formato de barra na parte superior do site, como a do facebook, mas quando eu dou zoom em um navegador e puxo a rolagem para o lado ela fica faltando um pedaço.

 

Div sem zoom

http://i49.tinypic.com/ioknph.png

 

Aplicado zoom

http://i45.tinypic.com/w17o6g.png

 

Aqui está meu problema, ao puxar a rolagem para o lado a barra não continua até o fim da página

http://i50.tinypic.com/24dr5h5.png

 

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Título da Página</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/design.css" />
</head>
<body>
<div id="bar">
<div id="bar-content">
</div>
</div>
</body>
</html>

 

design.html

@charset "utf-8";
#bar {
width: 100%;
height: 40px;
background: #333;
top: 0;
border-bottom: 1px solid #000;

}
#bar-content {
margin: 0 auto;
width: 1000px;
height: 40px;
}

 

Acho que o reset.css não vou precisar colocar.

 

Queria a ajuda de vocês para saber como eu posso resolver isso. Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Peperaio    20

Lucas Peperaio
Postado

Apague o width:100%, pois quando não declaramos a largura de uma DIV, o navegador entende que ela deverá ser automática.

Compartilhar este post

Link para o post
Compartilhar em outros sites

douglasdeodato    2

douglasdeodato
Postado

testei essas classes abaixo e deu certo envia o css completo pra debugar o erro deve ta dentro do css

 

#bar {

width: 100%;

height: 40px;

background: #333;

top: 0;

border-bottom: 1px solid #000;

 

}

#bar-content {

margin: 0 auto;

width: 1000px;

height: 40px;

}

 

Olá Lucas Peperaio, tentei seguir sua dica mas não tive sucesso, também tentei colocar width:auto; mas o problema persiste.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito