padding causes overlap, fluid design? [duplicate]

问题

I am starting to get in creating websites, but There are some things i don't understand. For example:

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.

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?

thanks!

Code:

<!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:

I think you will be happier using this solution because it will:

Give You A Fluid Design

Look The Same On All Screen Sizes

Allow you to pad in your sub divs

Allow You To Do More Custom Inner Styling With CSS

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>

You can it in full here http://sectorvi.com/stackoverflow-test1.html

回答2:

You should add the following to the divs you add padding to:

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

Good luck!

来源：https://stackoverflow.com/questions/25990253/padding-causes-overlap-fluid-design

标签

html

css

layout

margin

padding