填充导致重叠，流体设计？ [英] padding causes overlap, fluid design?
问题描述
我开始创建网站，但有一些东西我不明白。例如：
I am starting to get in creating websites, but There are some things i don't understand. For example:
我创建了一个wrapperdiv。里面有三个maindivs：header，content和footer。我给wrapperdiv一个固定的大小（1280像素×1024像素），并将内容div设置为该大小的2/3。其余的是1/3。
现在每当我想要垫在我的subs div，它覆盖了封装的div，我不知道如何解决它。
I created a wrapperdiv. Inside it are three maindivs: header, content and footer. I gave the wrapperdiv a fixed size (1280px x 1024px) and set the content div to 2/3 of that size. The rest is 1/3. Now whenever i want to pad something inside my subs divs, it overlaps the wrapper div and i don't know how to fix it.
我决定在wrapperdiv中使用百分比，所以当有人查看网站时，缩放和工作流畅。
I decided to use percentages inside the wrapperdiv so that zooming and such works fluid when somebody looks up the website.
有什么想法吗？我可以做得更好吗？
Any ideas on this? how i can do it better?
谢谢！
代码：
<!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>
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;
}
推荐答案
使用此解决方案，因为它将：
一个重要事项我需要提到的是我添加了一个包装器ID来覆盖你的所有内容，以便它的大小相应。
我希望这可以帮助你：D
I think you will be happier using this solution because it will:
One Important Thing I needed to mention was I added a "wrapper ID" to cover all your content so that it would size accordingly.
I hope this helps you :D
/* ADDED CSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
/* YOUR 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;
}
/* ADDED CSS */
/* This will contain all of your content */
#wrapper {
width: 100%;
}
#pagewrapper {
width: 1280px;
margin-left: auto;
margin-right: auto;
padding:0px;
}
#header {
width: 1280px;
min-height: 16.75%;
background-color:#00F;
}
/* CALL THE CLASS YOU WANT TO CHANGE IN THE ID */
/* EXAMPLE BELOW */
#header p {
padding: 10px;
}
#header a {
padding: 10px;
}
#header h1 {
padding: 10px;
}
/* So if you want to add padding to your content do the same as above */
#content {
width: 1280px;
min-height: 66.5%;
background-color: yellow;
}
#content p {
padding: 5px;
}
/* And the same for your footer */
#footer {
width: 1280px;
min-height: 16.75%;
background-color: green;
}
#footer p {
padding: 10px;
}
<html>
<head>
</head>
<body>
<div id="wrapper">
<div id="pagewrapper">
<div id="header"> </div>
<div id="content"> </div>
<div id="footer"> </div>
</div>
</div>
</body>
</html>
您可以在这里 http://sectorvi.com/stackoverflow-test1.html
这篇关于填充导致重叠，流体设计？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
