Question

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

但我观察到标题div不占用提供的完整空间（即，CSS中的高度：50％）

并且内容div（包含表）不占用页眉和页脚div之间的可用空间，尽管在CSS中生成了100％的高度

写的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>

Answer 1

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

说明：

我在页面顶部添加了一个doctype，以便您在浏览器之间获得更一致的结果。我添加了过渡文档类型。
每个区域都被一个'container'div包围，这是指定高度的位置。 headercontainer设置为50％，contentcontainer设置为40％，页脚设置为10％。在您的代码中，页脚绝对位于页面底部。这似乎工作正常，但它实际上是切碎/重叠内容div的底部。
容器divs都有溢出：auto;如果页面调整大小，如果内容太长（测试出来），滚动条将出现在每个部分中。
内部div，“标题”，“内容”和“页脚”应包含任何页面内容，以便在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>

希望有所帮助：）

Answer 2

尝试这样做，改变：

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

通过使用超过100％，您正在使页面格外大。如果这就是您的想法，请告诉我。此外，如果您对剩余的div使用％，我建议将页脚更改为基于百分比的高度。

您希望总高度= 100％

所以标题+内容+页脚的高度= 100％，例如，40％+ 50％+ 10％= 100％

如何在html页面中创建div自动填充空白区域

2 个答案: