Question

我一直试图让我的网站有一个包含均匀边距的包装，但是底部边距总是太大了。为了隔离这个问题，我在html中注释掉了所有div内容，并注释掉了与基本div无关的所有css选择器，而且窗口div仍然会超过页脚。

这是css，你会注意到一些css属性以s开头拼写错误。不要担心这些，这只是我评论出css属性的一种快捷方式。

.window {
    width: 88%;
    height: 99%;
    smargin-top: 3%;
    smin-height: 800px;
    margin-left: 7%;
    sbox-shadow: 0px 0px 10px 1px #000000;
    min-width: 1110px;
    background-color: #FF0000;
}
.header {
    height: 15%;
    width: 100%;
    background-color: #DDDDDD;
    padding-top: 1%;
    smin-height: 100px;
}
.nav {
    font-size: 20px;
    spadding-top: 1%;
    height: 5%;
    width: 100%;
    background-color: #999999;
    font-family: Tahoma, Geneva, sans-serif;
    smin-height: 35px;
    max-height: 40px;
}
.content {
    height: 60%;
    width: 100%;
    smin-height: 350px;
    : ;
    spadding-top: 3%;
    background-color: #FFFFFF;
}
.footer {
    font-family: Arial, Helvetica, sans-serif;
    height: 5%;
    width: 100%;
    background-color: #DDDDDD;
    smin-height: 30px;
}

这是html，我排除了所有注释掉的内容，所以问题将与它的基本基础结构隔离开来。

<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Excercise 2 CSS</title>
</head>

<body>
    <div class="window">
             <div class="header">

             </div>
             <div class="nav">

             </div>
             <div class="content">

             </div>
             <div class="footer">

             </div>
        </div>
</body>
</html>

Answer 1

您的添加不正确。在你的CSS中，你的高度为：标题15％，导航5％，内容60％和页脚5％，加在一起时仅相当于85％。我并不认为填充会如何影响这样的布局，但如果你应用box-sizing：border-box;对于你的div，填充不会影响整体大小（将减少而不是相加）

更正后的代码如下（虽然我删除了你的大部分其他CSS）

html, body
{
    height: 100%;
}

.window {
    height: 100%;
    width: 100%;
    background-color: #FF0000;
}
.header {
    height: 15%;
    background-color: #DDDDDD;
}
.nav {
    height: 5%;
    background-color: #999999;
}
.content {
    height: 75%;
    background-color: #FFFFFF;
}
.footer {
    height: 5%;
    background-color: #DDDDDD;
}

窗口div延伸到页脚之外

1 个答案: