Question

我有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

这是滚动到底部后的情况：link 2

我希望标题（红色），页脚（蓝色）和内容（绿色）达到100％高度，这样我就不必滚动

Answer 1

这就是你想要的。

Demo

在我编辑的代码中

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

Answer 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>

Answer 3

使页眉和页脚高度为10％，内容为80％。

Answer 4

尝试按如下方式更改内容div：

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

如果不起作用，请尝试身高：700px;

Answer 5

说height:100%表示父高度的100％。要将总高度设置为页面高度，请使用以下javascript代码动态设置它：

document.getElementById("content").style.height = (document.height - 130) + "px";

Answer 6

   <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.Only页脚高度必须修复。这是我遇到的最佳代码。

使用div的html 3行布局

6 个答案: