2012-11-21 4 views
0

여기에 게시 된 몇 가지 질문을 살펴 보았습니다. 그러나 모든 것이 너무 단순한 작업에 지나치게 복잡해 보입니다. 화면이 얼마나 오랫동안 세로로 있더라도 화면 아래쪽에 고정되어있는 꼬리말을 원합니다. 꼬리말을 가운데에 맞출 수 없다는 것을 제외하면 모든 것이 작동합니다. 항상 왼쪽으로 정렬됩니다.? 감사! 당신의 HTML이 래퍼 사업부에서 포장하는 http://jsfiddle.net/n4xxj/고정/고정 바닥 글이 중앙에 배치 되었습니까?

<body> 
    <div id="content"></div> 
    <div id="footer"></div> 
</body> 




div { 
width: 960px; 
margin: auto; 
} 

#content { 
background-color: beige; 
border: 1px solid; 
height: 1200px; 
margin-top: 100px; 
margin-bottom: 150px; 
} 

#footer { 
background-color: lightgray; 
border: solid 1px; 
height: 100px; 
position: fixed; 
bottom: 0px; 
} 
+0

이와 비슷한 http://jsfiddle.net/j08691/n4xxj/2/? – j08691

+0

여백 : 자동; margin 여야합니다 : 0 auto; 바닥 글의 고정 위치는 좋지 않습니다. 콘텐츠가 넘칠 때 어떤 일이 발생합니까? – Jawad

+0

이 웹 사이트가 도움이 될 수 있습니다 : http://www.cssstickyfooter.com/ – DACrosby

답변

3

업데이트

<div> 
    <div id="content"></div> 
    <div id="footer"></div> 
</div> 
당신이 가서 여기

DEMO

+0

하하, 나를 때려 눕히고, 코멘트 알림을 너무 늦게 보았습니다. +1 당신이 처음이었고 당신의 솔루션이 제 것보다 더 간단하기 때문입니다. –

+0

@HazardinCode : 정말 "위험한 코드"라고 생각합니다 +1 – Jawad

+0

감사합니다! 그것은 매우 간단한 해결책이었습니다 :) 그래서 왜 div 내에서 내용과 꼬리말을 갑자기 넣는 것이 footer line을 중심에 두게합니까? – user1689272

1

, 당신은 큰 #container에 내부 div의를 캡슐화해야합니다 div 및 그것에 덧붙이려면 margin: 0 auto;을 붙이십시오.

당신은 또한 (이 간단한 IE 수정의)이 추가되어야 완전한 수정에 대한주의 사항 :

body { text-align: center; } 
#container { text-align: left; margin: 0 auto; } 

그리고 물론의 #footer이 width: 100%;

또한

바이올린가 필요합니다 : http://jsfiddle.net/n4xxj/3/

관련 문제