0

我一直在努力让我的网站有一个边距均匀的包装器，但是底部边距总是太大。为了隔离问题，我注释掉了 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>
4

1 回答 1

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;
}​
于 2012-09-19T20:06:28.077 回答