페이지 하단에 바닥 글 위치 지정

Question

저는 건물에 상당히 복잡한 레이아웃을 가지고 있습니다. 높이에 영향을받으며 바닥 높이에 따라 바닥 글을 배치하는 일반적인 트릭이 작동하지 않습니다 .

내 JSFiddle 주어진 내용이 많거나 최소 일 때 바닥 글의 바닥에 어떻게 배치 할 수 있습니까? 난 당신이 바닥 글 내용 상자의 바닥에 앉아하려면, 제대로 요구 사항을 이해한다면

body, html, #wrapper { 
    height: 100%; 
    min-height: 100%; 
} 
.header { 
    height: 30%; 
    background-color: aliceblue; 
} 
.main { 
    background-color: antiquewhite; 
} 
.main .content { 
    height: 2000px; 
    background-color: aquamarine;  
    padding-bottom:80px; 
} 
.footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 80px; 
    background-color: beige; 
} 

Answer 1

당신이 끈적 끈적한 바닥 글 트릭을 사용할 수 있습니다. 바닥 글을 제외한 래퍼에 모든 콘텐츠를 랩에 margin: -(footer height)을 min-height:100% 설정하고이 래퍼 바닥에 그것을 유지했다 :

당신은 header 섹션을 취할 수

FIDDLE

UPDATE 및 어쩌면

NEW FIDDLE

Answer 2

:

는 여기에 내가 현재 사용하고있는 CSS의 일부입니다.

한가지 해결책은 position:absolute 콘텐츠 박스에 결합되도록, 콘텐츠 상자를 확인 position:relative하고 내부 풋터를 이동, 그리고 bottom:0는 상기 콘텐츠의 저부에 대해 앉아 갖는 원하는 효과를 달성 상자.

http://jsfiddle.net/wn6uvske/5/을 참조하십시오.

HTML :

<div id="wrapper"> 
    <div id="sidebar"></div> 
    <div id="body-content"> 
     <div class="header"> 
      <div class="navbar navbar-default" role="navigation"> 
       <div class="container"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li><a href="#" class="menu-toggle">Toggle Menu</a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
     <div class="main"> 
      <div class="content container"> 
       <p>Content</p> 
       <div class="footer"> <!-- moved up into content container --> 
        <p>Footer</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

(관련) CSS :

.main .content { 
    height: 2000px; 
    background-color: aquamarine;  
    padding-bottom:80px; 
    position:relative; 
} 
.footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 80px; 
    background-color: beige; 
}