콘텐츠 컨테이너의 최소 높이 설정

Question

해결 방법이 표시되지 않는 경우가 있습니다. 여기에 내 문제가있다 :

3 개의 섹션 (머리글, 섹션 및 바닥 글) 바닥 글이 항상 맨 아래로 플러시되어야하는 페이지가 있습니다. 그리고 섹션 부분은 머리글과 바닥 글 사이의 모든 가능한 위치를 차지해야하지만, 페이지에 따라 다른 최소 높이가 있어야합니다 (CSS에서 수동으로 설정합니다).

최소 높이에 도달하면 전체 페이지에서 스크롤 할 수 있어야합니다.

다음은 사용 가능한 모든 장소를 사용하여 머리글, 구역 및 바닥 글을 설정하는 데 사용하는 코드 샘플입니다.

CSS

body { 
    margin: 0 
} 
header, section, footer { 
    left:0; 
    right:0; 
    overflow: hidden; 
    position: absolute; 
} 
header { 
    height: 70px; 
    top: 0; 
    background-color: green; 
} 
section { 
    top: 70px; 
    bottom: 195px; 
    background-color: gray; 
    min-height:300px; 
} 
article { 
    overflow: hidden; 
    background-color:lightyellow; 
} 
.news { 
    position: absolute; 
    bottom: -30px; 
    width: 100%; 
    background-color: lime; 
} 
footer { 
    height: 195px; 
    bottom: 0; 
    background-color: pink; 
} 

HTML

<header> 
    <div class="container"> 
     <h2>My header</h2> 
    </div> 
</header> 
<section> 
    <article> 
     <div class="news"> 
      <div class="row-fluid"> 
       <a href="#">UP</a> 
      </div> 
      <div class="row-fluid"> 
       <div class="container"> 
        <div class="span6">News 1</div> 
        <div class="span6">News 2</div> 
       </div> 
      </div> 
     </div> 
    </article> 
</section> 
<footer> 
    <div class="container"> 
    My footer 
</div> 
</footer>​ 

jsfiddle은 예를 들어 볼 수 있습니다 : http://jsfiddle.net/Nk6uY/

편집

,536,

내 섹션에 최소 높이를 추가하면 창에 스크롤 막대가 생깁니 까?

내 문제에 대해 더 많은 정보를 추가합니다 2

편집. 첫째, 섹션 태그 안에있는 대부분의 콘텐츠는 절대적으로 설정됩니다. 다소 숨기고 행동 (주로 자바 스크립트)에 나타납니다. 그 이유 때문에 누군가가 링크를 클릭하면 내 모든 콘텐츠를 볼 필요가있는 최소한의 높이 인 각 섹션을 알 수 있습니다.

예를 들어, div 뉴스는 숨겨져 있으며 클릭하면 360px 이상이 표시되어야합니다. 그러나 창문이 이보다 작 으면 창문에 두루마리가없고 내 모든 내용이 바닥 글에 덮여 있습니다.

Answer 1

당신은 자바 스크립트를 통해이를 달성 할 수 -이 같은 헤더 섹션과 바닥 글 ID를 제공 한 후 사용해야합니다 :

function ResizeBody() { 
    var header = document.getElementById("Header"); 
    var section = document.getElementById("Section"); 
    var footer = document.getElementById("Footer"); 

    var height = GetBodyHeight() - header.offsetHeight - footer.offsetHeight - anyPaddingToTopOrBottomOfThreeMainSections; 
    if (height > 0) { 
     body.style.height = height + "px"; 
    } 
} 

function GetBodyHeight() { 
    if (window.innerHeight > 0) { 
     return window.innerHeight; 
    } 
    else { 
     return document.documentElement.clientHeight; 
    } 
} 

window.onresize = function() { 
    ResizeBody(); 
}; 


$(document).ready(function() { 
    ResizeBody(); 
}); 

UPDATE

미안, 난 내가 생각 질문을 잘못 읽었습니다 - 섹션을 화면 크기로 늘리시겠습니까? 아니면 너무 많은 내용에 스크롤 막대가있는 경우 수동으로 설정 하시겠습니까?

이 경우 섹션의 높이 (최소 높이가 아닌)를 오버플로 대신에 설정해야합니다. hidden overflow : scroll;