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 に答える