1

我写了一个 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>
4

2 回答 2

2

在 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”元素，这导致页面顶部出现一个白条（由于默认情况下 p 元素顶部的 10px 边距）。

这是代码：

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

希望有帮助:)

于 2012-05-08T07:04:50.790 回答
0

尝试这样做，更改：

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

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

你想要总高度= 100%

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

于 2012-05-08T06:33:15.280 回答