Question

这是我的页面计划：

体宽x高度为600 x 800像素;没有填充物，如果它们没有边缘，它内部的元素可以紧贴墙壁。
正文中的3个元素：标题，主要内容和页脚，被视为类（因为我将在我的网站的多个页面上使用相同的布局）。
3个元素的宽度各为598像素，边距为0像素，边框为1像素，因此它们完全贴合在体内。边框将以虚线添加以添加视觉上下文。
3个元素＆＃39;将通过150,500和150的相应像素分割身体的高度。它们的1像素底部/顶部边框将重叠。因此页面的垂直空间将是顶部的1像素边框，148像素的空间，1个像素的边框，499个像素的空间，1个像素的边框，149个像素的空间，最后是1个像素的边框。底部。

如果可以，请向我解释我在实施的HTML逻辑中出错的地方。我预览页面时标题的宽度不正确。（显然，当我完成它时，我的页面看起来会变得丰富多彩。现在我只是想让布局正确。）

<html>

<head>
    <title>div practice</title>
    <style type="text/css">
        body
        {
            padding: 0px;
            height: 800px;
            width: 600px;
        }
        .header
        {
            margin: 0px;
            border: 1px dashed;
            width: 598 px;
            height: 148px;
            position: absolute;
            top: 0px;
            left: 0px;
        } 
        .mainContent
        {
            margin: 0px;
            border: 1px dashed;
            width: 598px;
            height: 500px;
            position: absolute;
            top: 148px;
            left: 0px;  
        }
        .footer
        {
            margin: 0px;
            border: 1px dashed;
            width: 598px;
            height: 148px;
            position: absolute; 
            top: 648px;
            left: 0px;
        }
    </style>
</head>

<body>
     <div class="header">
        <p>This is where the header goes</p>
     </div>
     <div class="mainContent">
        <p>This where the main content goes</p>  
     </div>
     <div class="footer">
        <p>This is where the footer goes</p>     
     </div>
</body>

</html>

Answer 1

在.header样式中，将width: 598 px;更改为width: 598px;

598 px不是有效的属性值，因此会被忽略。删除空格，它应该按预期工作。

另外，如果你添加这行代码：

*, *:before, *:after { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

这将更改框模型，以便从指定的宽度中减去填充和边框，而不是添加到它。它现在是一种流行的技术，因为它使数学不那么令人头疼，有利于响应式设计。使用此样式，您可以使用width: 600px;定义标题，并在不影响宽度的情况下添加所需的border和padding。

Answer 2

作为一项计划，我更喜欢以下内容：

1）使你的body宽度为100％

body{
 width: 100%;
}

2）添加outterWrapper div以包含所有页面元素。

.outterWrapper{
    width: 600px; // your page width;
    margin: 0 auto; // to center in page
    border: 1px solid #000; // if you need a border
}

3）开始标题，内容，页脚div

.header, .footer, .content{
 width: 100%;
 padding: 5px;
 margin-bottom: 10px;
}

.header, .footer{
 background-color: #cfe09b;
}
.footer{
    margin-bottom: 0;
}
.content{
 background-color: #89ccca;
}

你可以在这里看到我的意思＆gt;＆gt; http://jsfiddle.net/salota8550/EPsk2/

HTML标头没有以正确的宽度出现

2 个答案: