2010-08-08 9 views
2
내가 여유를 보여 끈적 끈적한 바닥 글 ( http://www.cssstickyfooter.com/)를 수정하려고

... 그것은 권리를 쉽고 폭 왼쪽입니다CSS는 부동 바닥 글 여백

| ____ | 
| | | | 
| |____| | 
|  | 

감사

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input, 
textarea,p,blockquote,th,td { 
    margin:0; 
    padding:0; 
} 
#header { 
    height: 33px; 
    line-height: 33px; 
    text-align: center; 
    background-color: green; 
} 
html { height: 100%; } 
body { height: 100%; width: 90%; margin: auto; } 
#wrap { min-height: 100%; background-color:gray; } 
#main { 
    overflow: auto; 
    padding-bottom: 33px; /* must be same height as the footer */ 
    background-color: red; 
    height: 100%; 
} 
#footer { 
    position: relative; 
    margin-top: -33px; /* negative value of footer height */ 
    height: 33px; 
    line-height: 33px; 
    text-align: center; 
    background-color:blue; 
} 
​ 
을 90 % 높이를 얻을 수 (또는 상단 & 하단 여백의 어떤 종류를 표시) 부동 바닥 글을 엉망으로하지 않고합니다

http://jsfiddle.net/56REF/

+0

html {높이 : 90 %; margin-top : 5 %; margin-bottom : 5 %; } 작동하지 않습니다!? 상단은 괜찮지 만 밑바닥이 틀어져 있습니다. –

+0

http://jsfiddle.net/F9HBc/ _stretching_ div를 세로로 가운데 정렬하는 것이 왜 그렇게 어렵습니까? 그것은 horozontal resize 벌금 처리 (바보, 주어진 ... 또는 CSS) –

+0

http://www.jsfiddle.net/CrdEy/ http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm을 기반으로 여전히 작동하지 않습니다 –

답변

2

이 것이 귀하의 필요에 맞습니까? http://jsfiddle.net/CZayc/

+0

그게 전부 ... 고마워. 둥근 모서리 (http://jsfiddle.net/Lce3m/)를 사용할 때 패딩으로 테두리를 사용하는 데 몇 가지 문제가 있습니다. 테두리 나 패딩을 사용하여 html이나 헤더 여백 또는 패딩을 밀어 넣을 방법이 없습니다. 시체 반대? 내가 몸에 흰색 테두리를 움직이려고 노력했지만 작동하지 않습니다 ... (http://jsfiddle.net/CZayc/4/) 도움을 주셔서 감사합니다 –

+0

글쎄, 나는 테두리의 첫 번째 요소의 상단에 여백 문제를 제거하는 데 사용 . bottem에서 여백을 쉽게 사용할 수 있지만 아무런 문제가 없습니다. 추가 요소를 추가하여 다음과 같이 헤더를 아래로 이동해볼 수 있습니다. http://jsfiddle.net/4gKhr/ –