0

ヘッダー、フッター、コンテンツの 3 行がありますが、コンテンツ div が大きすぎてウィンドウをスクロールできません。ヘッダーとフッターの間にコンテンツを固定する方法と、ウィンドウをスクロールする必要がないように高さを変更する方法

私のindex.php

<body> 
<div id="container">
    <div id="header">

    </div>
    <div id="content">

    </div>
    <div id="footer">

    </div>
</div>
</body>

私のCSS

 body {
margin:0;
padding:0;
}
div#header{
width:100%;
height:65px;
position:relative;
top:0;
background-color:#F00;
 } 

div#footer{
width:100%;
height:65px;
position:relative;
bottom:0;
background-color:#06F;
}
div#content{
background-color:#9F0;
width:100%;
height:100%;
    }

これは、トップでどのように見えるかです:リンク

これは、一番下をスクロールした後の様子です：リンク2

ヘッダー (赤)、フッター (青)、およびコンテンツ (緑) を 100% の高さにして、スクロールする必要がないようにしたい

4

5 に答える 5

3

これはあなたが望むものです。

デモ

私が編集したあなたのコードで-

body {
margin:0;
padding:0;
}
div#header{
width:100%;
height:65px;
position:fixed;
z-index:100;
background-color:#F00;
 } 

div#footer{
width:100%;
height:65px;
position:fixed;
bottom:0;
background-color:#06F;
}
div#content{
background-color:#111;
width:100%;
height:100%;
position:absolute;
    }
于 2013-02-22T04:49:43.190 に答える
2

本体の高さも 100% になるように指定して、テーブルをウィンドウ サイズに合わせて拡大し、本体をテーブルとして定義し、各 div を行として定義する必要があります。

CSS:

html,
body {
    display: table;
    height: 100%;
    margin: 0;
    width: 100%;
}

#header,
#footer {
    background: #ff0000;
    display: table-row;
    height: 65px;
}

#content {
    background: #000;
    display: table-row;
    height: 100%;
}

html:

<body> 
    <div id="header">&nbsp;</div>
    <div id="content">&nbsp;</div>
    <div id="footer">&nbsp;</div>
</body>
于 2013-02-22T04:47:07.780 に答える
0 
   <html>
    <head>
    <style>
    html,
    body {
       margin:0;
       padding:0;
       height:100%;
    }
    #container {
       min-height:100%;
       position:relative;
    }
    #header {
       background:#ff0;
       padding:10px;
       height:150px;    
    }
    #body {
       padding:10px;
       padding-bottom:260px;   /* Height of the footer */
    }
    #footer {
       position:absolute;
       bottom:0;
       width:100%;
       height:260px;   /* Height of the footer */
       background:#6cf;
    }


    </style>
    <script>

    </script>
    </head>
    <body>
    <div id="container">
       <div id="header"></div>
       <div id="body">
    </div>
       <div id="footer"></div>
    </div>

    </body>
    </html>

このコードは、固定されていないコンテンツ div をサポートしています。フッターの高さのみを固定する必要があります。これは、これまでに見つけた最高のコードです。

于 2014-04-01T18:01:36.140 に答える
0

ヘッダーとフッターの高さを 10%、コンテンツを 80% にします。

于 2013-02-22T04:35:37.170 に答える
0

次のようにコンテンツ div を変更してみてください。

div#content{
background-color:#9F0;
width:100%;
height:80%;
overflow:auto;
}

うまくいかない場合は、height:700px; を試してください。

于 2013-02-22T04:36:34.220 に答える