Question

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

我创建了一个wrapperdiv。里面有三个maindiv：标题，内容和页脚。我给了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>

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;
}

Answer 1

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

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

祝你好运！

Answer 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>

你可以在这里完整地http://sectorvi.com/stackoverflow-test1.html

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

2 个答案: