填充导致重叠，流体设计？ [复制]
Posted
技术标签:
【中文标题】填充导致重叠，流体设计？ [复制]【英文标题】：padding causes overlap, fluid design? [duplicate] 【发布时间】：2014-11-17 08:58:18 【问题描述】：我开始着手创建网站，但有些事情我不明白。例如：
我创建了一个 wrapperdiv。里面是三个maindiv：页眉、内容和页脚。我给了 wrapperdiv 一个固定大小（1280px x 1024px）并将内容 div 设置为该大小的 2/3。其余为 1/3。 现在，每当我想在我的 subs 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>
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;
【问题讨论】：
【参考方案1】：您应该将以下内容添加到您添加填充的 div 中：
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
祝你好运！
【讨论】：
默认填充添加到 div 的宽度。添加此代码使其不会那样做。这样，带有填充的 div 将保持所需的大小。 这是一种干净的方式吗？或者它是一种很少使用的补救措施？ 我不确定，但我经常使用它并没有看到任何缺点......【参考方案2】：我认为您会更乐意使用此解决方案，因为它会：
给你一个流畅的设计 在所有屏幕尺寸上看起来都一样 允许您在子 div 中填充 允许您使用 CSS 进行更多自定义内部样式 我需要提到的一件重要的事情是我添加了一个“包装器 ID”来覆盖您的所有内容，以便相应地调整大小。我希望这对您有所帮助：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>【讨论】：
请问第一部分是做什么的？和所有的标签？？ 这是一个标准的重置我从这个网站学到的：meyerweb.com/eric/tools/css/reset 哇，它看起来是低谷的：P 所以我制作的包装器（pagewrapper）可以删除吗？ “pagewrapper”定义了你的页眉、内容和页脚的宽度。 “包装器”包含整个网站并保留您所有的内容中心，并允许您的内容根据屏幕大小改变大小。 您可以通过调整宽度来调整“pagewrapper”的大小。 （顺便说一句）以上是关于填充导致重叠，流体设计？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章