如何在html页面中使div自动填充空白答案

【问题标题】：How to make a div autofill empty space in html page如何在html页面中使div自动填充空白
【发布时间】：2012-05-08 06:10:25
【问题描述】：

我写了一个 html 页面，我想要一个页眉、内容、页脚。所有这三个部分都包含在 div 中，如下所示

但我观察到标题 div 没有占据提供的全部空间（即，高度：CSS 中的 50%）

尽管在 CSS 中指定了 100% 的高度，但内容 div（包含表格）不会占用页眉和页脚 div 之间的可用空间

写的html如下。是不是漏了什么。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Html with divs</title>
<style type="text/css">

h1,h2,h3,h4,h5,h6{
    font-size:100%;
    font-weight:normal;
}
q:before,q:after{
    content:'';
}
abbr,acronym{
    border:0;
}

html{
    height:100%;

}
body{
    font-family:Arial,Verdana,sans-serif;
    font-size:0.75em;
    color:#333;
    width:100%;
    margin:0 auto;
    padding:0px;
}


#header1
{
    background-color: steelblue;
    height: 50%;
}


h1{
    font-family:Calibri, Arial, Verdana, sans-serif;
    font-size:2em;
    width:520px;
}


#content
{
    background-color: orange;
    padding: 5px;
height:100%;

}

#content table
{
width:100%;
}



#footer {
        position:absolute;
        bottom: 0px;
    width: 100%;
        height:70px;
        }
#footer div#navigation {
    background: steelblue;
        height: 70px;
    width: 100%;
}

#footer div#navigation div {
    margin: 0 auto;
    width: 100%;
}

#footer div#navigation div p {
    color: #995870;

        color:white;
        width:100%;
        align:center;
        font-size: 11px;
    margin: 0;
    text-align: center;

}

</style>
</head>
<body>


    <div id="header1">
        <p align="center">Header1</p>
        <p align="center">Header2</p>
        <p align="center">Header3</p>

    </div>

    <div id="content">

                <table bgcolor="#fadd09" align="center" style="color:white">
                    <tr><td>Text1 here</td><td>  <input type="text" name="value1"/></td></tr>
                    <tr><td>Text2 here</td><td>  <input type="text" name="value2"/></td></tr>
                    <tr><td>Text3 here</td><td>  <input type="text" name="value3"/></td></tr>
                    <tr><td>Text4 here</td><td>  <input type="text" name="value4"/></td></tr>
                    <tr><td>Text5 here</td><td>  <input type="text" name="value5"/></td></tr>
                    <tr><td>Text6 here</td><td>  <input type="text" name="value6"/></td></tr>
                    <tr><td>Text7 here</td><td>  <input type="text" name="value7"/></td></tr>
                    <tr><td>Text8 here</td><td>  <input type="text" name="value8"/></td></tr>
                    <tr><td>Text9 here</td><td>  <input type="text" name="value9"/></td></tr>
                    <tr><td>Text10 here</td><td>  <input type="text" name="value10"/></td></tr>

                </table>


    </div>

            <!--Footer-->
        <div id="footer">
            <div id="navigation">
                <p style="color: ivory;font-size: 15px;">footer-head</p>
                <div style="float: inherit">
                    <p>The footer</p>
                    </div>
            </div>
        </div>

</body>
</html>

【问题讨论】：

也许你应该给 Body 标签 100% 的高度

标签： html css

【解决方案1】：

在 html 和 body 上将高度设置为 100% 将允许您在 div 上指定百分比高度，但您的页面仍然存在许多问题。我根据您的代码创建了一个更简单的示例。

解释：

我在页面顶部添加了一个 doctype，以便您在浏览器之间获得更一致的结果。我添加了过渡文档类型。
每个区域都被一个“容器”div 包围，这是指定高度的地方。 headercontainer 设置为 50%，contentcontainer 设置为 40%，页脚设置为 10%。在您的代码中，页脚绝对位于页面底部。这似乎工作正常，但它实际上是在内容 div 的底部切割/重叠。
容器 div 都有 overflow: auto;设置，这样如果页面被调整大小，如果内容太长，每个部分都会出现滚动条（测试一下）。
内部 div、'header'、'content' 和 'footer' 应该包含任何页面内容，这样在 p、h1 或其他任何相关元素上出现的边距/填充不会导致您的页面变得大于 100% - 在您的页面中，您在 header1 div 中直接有一个“p”元素，这导致页面顶部出现一个白条（由于顶部的 10px 边距默认为 p 元素）。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Html with divs</title>
    <style type="text/css">
        * 
        {
            margin: 0px;
            padding: 0px;
        }

        html
        {
            height: 100%;
        }

        body
        {
            font-family: Arial,Verdana,sans-serif;
            font-size: 1.3em;
            color: #333;
            width: 100%;
            margin: 0 auto;
            padding: 0px;
            height: 100%;
        }

        #headercontainer
        {
            background-color: steelblue;
            overflow: auto;
            height: 50%;
        }

        #header
        {
            padding: 10px;
        }

        #contentcontainer
        {
            background-color: orange;
            overflow: auto;
            height: 40%;
        }

        #content
        {
            padding: 10px;
        }

        #footercontainer
        {
            width: 100%;
            height: 10%;
            background: steelblue;
            overflow: auto;
        }

        #footer
        {
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="headercontainer">
        <div id="header">
            <h1>
                Header</h1>
        </div>
    </div>
    <div id="contentcontainer">
        <div id="header">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
            euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
            minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
            ex ea commodo consequat.<br />
            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
            vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
            dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
            nulla facilisi.
            <br />
            Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming
            id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est
            usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt
            lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus,
            qui sequitur mutationem consuetudium lectorum.<br />
            Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit
            litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem
            modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
        </div>
    </div>
    <div id="footercontainer">
        <div id="footer">
            <h1>
                Footer</h1>
        </div>
    </div>
</body>
</html>

希望有帮助:)

【讨论】：

【解决方案2】：

尝试这样做，改变：

#content{
background-color: orange;
padding: 5px;
height:50%;
}

通过使用超过 100% 的总比例，您会使页面变得超大。让我知道这是否是您的想法。如果您对其余 div 使用 %，我也建议将页脚更改为基于百分比的高度。

您希望总高度= 100%

所以header+content+footer的高度=100%，比如40%+50%+10%=100%

【讨论】：