Rodapé não é furar para baixo apesar de eu tê-lo codificado
https://stackoverflow.com/questions/411228
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
I removido o rodapé por enquanto, o site teve que ir online. Assim, o link é ido tão bem.
Como você pode ver (em FF2, bem como no IE7) o rodapé é na parte inferior da tela, mas não na parte inferior da página (conteúdo).
Eu tenho isso no meu código:
<div id="wrap">
<div id="top"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
e isso no CSS:
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
margin: 0;
padding: 0;
padding-bottom: 30px; /* height of the footer */
}
#wrap {
margin-left: auto;
margin-right: auto;
width: 960px;
min-height: 100%;
position: relative;
}
*#wrap { /* IE hack */
height:100%;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
padding: 0;
margin: 0;
}
Ou, fazer uma longa história curta: Eu segui as instruções dadas aqui .
Solução
Certo, então com o #size dentro do 100%, assumir o preenchimento fora o envoltório e adicione a seguinte ao #content
overflow:auto;
padding-bottom:30px;
, em seguida, o link funciona para mim no FF
Outras dicas
Você não seguir suas instruções com cuidado suficiente. A chave para o layout de Mateus
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
é que recipiente tem posição: rodapé, enquanto parente tem position: absolute. Que coloca um dentro do outro. Note-se que recipiente tem um espaço reservado para rodapé reservando padding-bottom o tamanho de rodapé. Assim, o esquema só funciona quando altura do rodapé é fixa.
Absolutamente posicionado com botttom: 0 elemento irá colocar-se na parte inferior do mais próximo dos pais relativamente posicionado. Se nenhum estiver lá, viewport é usado em vez disso, e é isso que está acontecendo em seu layout.
Seu div rodapé não é uma criança de sua div envoltório.
Como sobre esta ?
Mover o preenchimento da parte inferior do corpo para o fundo do #wrap. Seu rodapé é sempre 30px a partir do fundo da "página" por causa disso estofamento. , Colocando-o na #wrap você vai impedir que o conteúdo de #wrap de ir atrás de seu rodapé.
<style type="text/css">
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#wrap {
margin-left: auto;
margin-right: auto;
width: 960px;
position: relative;
}
*#wrap { /* IE hack */
height:100%;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
padding: 0;
}
</style>
<div id="wrap">
<div id="top"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
Isso funcionou para mim.
IMO, o hack estrela IE causa o problema. Tente alterar os hacks IE com:
*html #wrap {
...
}
Há uma boa técnica com demonstração no site: http: //www.themaninblue. com / experiência / footerStickAlt /
Deve haver algo mais a este assunto, cada método descrito acima todo o trabalho em locais diferentes, mas não no meu.
Esta é a minha página de origem, as coisas não relevantes são removidos (conteúdo e material):
<body>
<div id="size"> javascript textsize modifier</div>
<div id="wrap">
<div id="top"> logoimage
<div id="menu">
<div id="menuwrapper">
<ul id="primary-nav">
<li> Homelink </li>
<li class="menuactive menuparent" class="over"> Link 2
<ul>
<li> Sublink 1 </li>
<!-- etcetera //-->
</ul>
</li>
<li class="menuparent" class="over"> Active Link 3
<ul>
<li> Sublink 1</li>
<!-- etcetera //-->
</ul>
</li>
</ul>
</div> <!-- end menuwrapper //-->
</div> <!-- end menu //-->
</div> <!-- end top //-->
<div id="content">
<div id="newssnippet"></div>
<div id="roundedright"> <!-- rounded corners //-->
<!-- 6 divs to create rounded corners //-->
<div id="right">Random main content</div>
<!-- 7 divs to create rounded corners //-->
</div> <!-- end rounded corners //-->
<div id="logo">Another logo</div>
<div id="roundedleft"> <!-- rounded corners again //-->
<!-- 6 divs to create rounded corners //-->
<div id="left">News content</div>
<!-- 7 divs to create rounded corners //-->
</div> <!-- end rounded corners //-->
</div> <!-- end content //-->
<div id="footer"></div>
</div><!-- end wrap //-->
</body>
Claramente, eu estou seguindo o esquema previsto a partir do link no post abertura .
Em seguida, no CSS, eu tenho:
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #e7e7e7 url(images/cms/background.jpg) repeat-x;
font-family: Verdana, Arial, sans-serif;
font-size: .8em;
height: 100%;
margin: 0;
padding: 0;
padding-bottom: 30px;
}
#wrap {
margin-left: auto;
margin-right: auto;
width: 960px;
position: relative;
min-height:100%;
}
*html #wrap { /* IE hack */
height:100%;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: transparent url(images/cms/footer.png) no-repeat bottom center;
padding: 0;
}
#footer p {
margin: 0;
padding: 0;
padding-top: .7em;
text-align: center;
}
#footer a {
text-decoration: none;
}
Isso deve ser cada bit relevante ...
O que eu estou ausente?
Para o registro: o rodapé está furando a parte inferior da oage na posição correta se o conteúdo for inferior a 100% de alta. Então, se não preencher a tela.
O rodapé está em algum lugar no meio do caminho o conteúdo se o conteúdo é mais do que 100% da página, por isso, quando eu tenho que rolar para ver everyting.
