填充导致重叠，流体设计？

Question

填充导致重叠，流体设计？

use*_*307 2 html css layout margin padding

我开始着手创建网站，但有些事情我不明白。例如：

我创建了一个wrapperdiv。里面有三个主要部分：页眉、内容和页脚。我给了wrapperdiv一个固定的大小（1280px x 1024px）并将内容div设置为该大小的2/3。剩下的就是1/3。现在，每当我想在我的子 div 中填充某些内容时，它就会与包装 div 重叠，我不知道如何修复它。

我决定在wrapperdiv 中使用百分比，以便当有人查找网站时缩放等工作流畅。

对此有什么想法吗？我怎样才能做得更好？

谢谢！

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div id="pagewrapper">
    <div id="header">

    </div>
    <div id="content">

    </div>
    <div id="footer">

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

Run Code Online (Sandbox Code Playgroud)

CSS：

@font-face {
    font-family: "Bickley";
    src: url(fonts/Bickley%20Script.ttf);
}

@font-face {
    font-family: "American";
    src: url(fonts/American%20Classic%20Bold.ttf);
}

body {
    font-size: 1em;
    font-family: sans-serif;
    color: #c6c6c6;
    background-image: url("images/bodybackground.jpg");
}

a:link {
    text-decoration: none;
    color: #c6c6c6;
}

a:visited {
    color: #c6c6c6;
}

a:hover {
    color: #c6c6c6;
}

a:active {
    color: #c6c6c6;
}

#pagewrapper {
    width: 1280px;
    height: 1024px;
    margin: 0 auto;
    padding: 1%;
    background-color: red;
}

#header {
    width: 100%;
    height: 16.75%;
    background-color: blue;
}

#content {
    width: 100%;
    height: 66.5%;
    background-color: yellow;
}

#footer {
    width: 100%;
    height: 16.75%;
    background-color: green;
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Wij*_*d M 5

您应该将以下内容添加到添加填充的 div 中：

-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;
box-sizing: border-box;

Run Code Online (Sandbox Code Playgroud)

祝你好运！

归档时间：	11 年，1 月前
查看次数：	1772 次
最近记录：	11 年，1 月前