고정 된 위치 html 요소를 브라우저가 아닌 부모 컨테이너에 상대적으로 센터링합니다.

Question

고정 된 div가 페이지 아래쪽에 항상 표시되도록하고 싶습니다. 이 div는 브라우저 창 너비의 75 % 인 사이트 내에서 중앙에 위치해야합니다. 내용도 중심에 두었다.

고정 요소는 브라우저 창을 사용하여 위치를 지정하지만 어떻게 포함 요소의 너비와 위치를 유지할 수 있습니까?

고정 요소는 브라우저 창에 상대적이어야하므로 기본적으로 왼쪽 여백에서 시작하지 않는 이유는 무엇입니까 (왼쪽을 알고 있습니다 : 0이 문제를 해결할 것입니다)? 여기

내 문제의 JS 바이올린입니다 : http://jsfiddle.net/ZN7g8/

HTML :

<div id="wrapper"> 
<div id="one"></div> 
<div id="two"></div> 
<div id="three"> 
    <p>Some text...........</p> 
</div> 

CSS :

#wrapper { width: 75%; max-width: 800px; height: 100%; margin: 0 auto;} 
#one {height: 100px; background-color: red } 
#two {height: 100px; background-color: blue } 
#three {height: 100px; width: 100%; max-width: 1200px; background-color: green; position: fixed; bottom: 0} 
#three p {text-align: center;} 

내가 본 몇 가지 다른 질문이 문제 암시하지만, 모든 것 고정 너비 사이트를 다루는 것.

Answer 1

두 가지 :

1. 당신은 당신의 바닥 글에 position: absolute을 사용해야합니다.

2. 배치하기 위해 래퍼에 위치 속성을 지정해야합니다.

http://jsfiddle.net/WzxGA/

#wrapper { width: 75%; max-width: 800px; height: 100%; min-height:500px; margin: 0 auto; position:relative;} 
#one {height: 100px; background-color: red } 
#two {height: 100px; background-color: blue } 
#three {height: 100px; width: 100%; max-width: 1200px; background-color: green; position: absolute; bottom: 0} 
#three p {text-align: center;}