html 100 % 너비의 머리글 및 바닥 글

웹 사이트를 디자인 할 때 머리글 및 바닥 글 div가 페이지의 너비가 100 %가되고 페이지의 절대 상단 및 하단에서 공백없이 시작되기를 원합니다.html 100 % 너비의 머리글 및 바닥 글

나는 이것을 가지고있다.

<title>Untitled Document</title> 
<style type="text/css"> 
@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow); 

#header { 
    background: #636769; 
} 

#navigation { 
} 

body { 
    font-family: 'PT Sans Narrow', sans-serif; 
    font-size: 16pt; 
    background: url(../images/texture.png); 
} 

#wrapper { 
    width: 938px; 
    margin: 0 auto; 
    padding: 20px 20px; 
    background: white; 
} 

#footer { 
    background: #636769; 
} 
</style> 
</head> 



<body> 
<!-- begin header --> 
    <div id="header"> 
    <p>Content</p> 
    </div> 

<!-- begin wrapper --> 
<div id="wrapper"> 

<!-- begin navigation --> 
    <div id="navigation"> 
    <ol> 
    <li>link1</li> 
    <li>link2</li> 
    <li>link3</li> 
    <li>link4</li> 
    </ol> 
    </div> 

<!-- begin content --> 
    <div id="content"> 
    <h1>Heading</h1> 
    <p>Content</p> 
    </div> 

</div> 

<!-- begin footer --> 
    <div id="footer"> 
    <p>Content</p> 
    </div> 

</body> 
</html>

머리글과 바닥 글은 다음과 같습니다. http://rocketbug.com/2.0/

감사합니다.

출처

2013-04-13 Sqoh

당신은 아마 (예를 들어 body 요소의 margin를 오버라이드 (override) 할 필요가 크롬이 8px로 설정됩니다

출처

2013-04-13 15:40:10

를 상단에 CSS에 추가합니다.

* { 
margin:0px; 
padding:0px; 
}

헤더 :

#header { 
    background: #636769; 
    position:relative; 
    width:100%; 
}

바닥 글 :

#footer { 
    background: #636769; 
    width:100%; 
    position:relative; 
    bottom:0px; 
}

출처

2013-04-13 15:40:29

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, font, 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 { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    vertical-align: baseline; 
    background: transparent; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 

/* Don't kill focus outline for keyboard users: http://24ways.org/2009/dont-lose-your-focus */ 
a:hover, a:active { 
    outline: none; 
} 

/* remember to highlight inserts somehow! */ 
ins { 
    text-decoration: none; 
} 
del { 
    text-decoration: line-through; 
} 

/* tables still need 'cellspacing="0"' in the markup */ 
table { 
    border-collapse: collapse;`enter code here` 
    border-spacing: 0; 
} 
#header { 
    background: #636769; 
} 

#navigation { 
} 

body { 
    font-family: 'PT Sans Narrow', sans-serif; 
    font-size: 16pt; 
    background: url(../images/texture.png); 
    position: relative; 
} 

#wrapper { 
    width: 938px; 
    margin: 0 auto; 
    padding: 20px 20px; 
    background: white; 
} 

#footer { 
    background: #636769; 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
}

출처

2013-04-13 16:12:33 hafid2com

이 예를 보면, 모든 요소의 HTML의 모든 CSS를 초기화하기 위해 CSS를 추가 항상 CSS를이 추가 : http://jsfiddle.net/ARuvu/ – hafid2com

html 100 % 너비의 머리글 및 바닥 글

답변

관련 문제