2012-11-27 3 views
0

센터링 된 랩 div와 가운데 맞춤 스티치 바닥 글을 사용하여 HTML5 페이지를 만들려고합니다. 여기 내 HTML입니다 :divs를 가운데 맞추고 꼬리말을 붙이는 문제가 있습니다.

<body> 
    <div id="wrapper"> 
    wrapper 
    </div> 
    <footer> 
    this is footer 
    </footer> 
</body> 

그리고 이것은 내 CSS입니다 :

#wrapper { 
width:800px; 
height:100%; 
padding:5px; 
margin:0 auto; 
background-color:#fff; 
border-radius:10px 10px 0 0; 
box-shadow:0 1px 10px 3px #666; 
} 

footer { 
background-color:#060318; 
color:#3cc9e7; 
width:800px; 
padding:5px; 
position:fixed; 
bottom:0; 
} 

그리고 이것은 내가 얻을 결과 : enter image description here

가 어떻게 그들을 모두 중앙에 할 수 있고, 바닥 글 끈적 끈적한가? 당신은 당신의 footer 내부 div을 만들 수 있고 중심이 div에 :

+0

내가 중심 #wrapper에 문제가 표시되지 않습니다. – Blazemonger

답변

1

나는 그것이 최선의 해결책,하지만 확실하지 오전

<footer> 
    <div>this is footer</div> 
</footer> 

을 그리고 여기에 CSS의 : 다음은

footer { 
    position:fixed; 
    bottom:0; 
    left: 0; 
    right: 0 
} 

footer div { 
    background-color:#060318; 
    color:#3cc9e7; 
    width:800px; 
    padding:5px; 
    margin:0 auto; 
} 

결과를 보여주는 jsfiddle : http://jsfiddle.net/xRzQy/

+0

고맙습니다. 효과가있었습니다! :) – Igal

1

position: fixedposition: absolute과 매우 흡사합니다. 를 중앙에, 당신은 자바 스크립트를 사용하거나 래퍼 요소를 추가해야 하나 :

<div id="footerwrapper"> 
    <footer> 
    this is footer 
    </footer> 
</div>​ 

CSS :

#footerwrapper { 
    width: 100%; 
    position: fixed; 
    bottom: 0; 
} 
footer { 
    background-color:#060318; 
    color:#3cc9e7; 
    width:800px; 
    padding:5px; 
    margin: 0 auto; 
}​ 

http://jsfiddle.net/mblase75/JYYX7/

+0

대단히 고마워요! :) – Igal

관련 문제