1

重複の可能性:
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 で空白を選択しようとすると、要素として表示されます。

4

3 に答える 3

0

パディングを考慮してスタイルを少し調整する必要があるかもしれませんが、これは Chrome である程度の可能性を示しています (私は現在 Windows マシンから離れています)。「position: relative」をコンテナーに、「min-height: 100%」を body に具体的に割り当てるトリック。そうしないと機能しません。

<html>
    <head>
        <style type="text/css">
           body {
              min-height: 100%;
              padding: 0;
              margin: 0;
           }

           #app {
              min-height: 100%;
              position: relative;
           }

           #footer {
              position: absolute;
              bottom: 0;
              background: red;
              height: 100px;
              width: 100%;
           }

        </style>
    </head>

    <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'>Content</div>
        </div>
    </body>
</html>
于 2012-11-20T16:55:02.917 に答える
-3

フッターを画面の下部にのみ配置する場合は、ページの高さを気にする必要はありません。

#footer {
    position:absolute;
    bottom: 0;
}
于 2012-11-20T16:05:24.090 に答える