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%;
    }

这是它在顶部的样子：链接

这是滚动到底部后的样子：link 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

您需要告诉 body 也为 100% 高，以便表格可以拉伸到窗口大小，然后将 body 定义为 table，每个 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

使页眉和页脚高度为 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 回答
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 回答