重複の可能性:
Web ページの高さを画面の高さに合わせる方法
画面全体を占有しない HTML ページがあります。HTMLコンテンツのサイズを取得するだけで、フッターはページの最後にありません(そうあるべきです)
どうすれば修正できますか?
フッターをページの最後に配置するだけです。
私のHTML構造は次のとおりです。
<body>
<div id="app">
<!-- Header -->
<div id="header"></div>
<!-- Hero container -->
<div class="container">
<!-- Sub container -->
<div class="container"></div>
</div>
<!-- Footer -->
<div id='footer'></div>
</div>
</body>
私のCSSは次のとおりです。
html {
height: 100%;
}
body {
color: hsl(0, 0%, 33%);
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 1;
background: none repeat scroll 0 0 hsl(0, 0%, 98%);
margin: 0;
padding: 0;
height: 100%;
}
* {
outline: 0 none;
}
#app {
min-height: 100%;
margin:auto;
width: 100%;
}
div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,a,big,cite,code,del,dfn,em,img,small,strike,strong,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tr,th,td,embed,menu,nav
{
border: 0 none;
font: inherit;
margin: 0;
padding: 0;
vertical-align: baseline;
}
.container {
margin: 0 auto;
position: relative;
width: 990px;
}
#footer {
margin: 100px 0 0;
}
誰でも私を案内してください。私はCSSが初めてです。:( ひどい立ち往生! :(
編集
body 内の div 要素の一部に float があるためでしょうか?
編集2
奇妙なことは、ページが長くて下にスクロールしても、フッターの後にこの小さな空白のストリップがあり、それが決して行かないことです. Firebug で空白を選択しようとすると、要素として表示されます。