알 수없는 높이의 tvo div를 세로로 배치하여 사용 가능한 페이지 높이를 채우는 방법은 무엇입니까?

Question

두 컨테이너를 세로로 배치하려고합니다. 페이지의 사용 가능한 세로 공간을 채워야합니다. 맨 아래 컨테이너가 나머지 세로 공간을 차지하고 스크롤바가 오버 플로우되는 방식으로 맨 위 컨테이너가 내용과 수직으로 확장됩니다. I의 속성의 제 2 용기 (특히, 높이)를 형성 붙어

: 여기

스케치이다. 내 최고의 기회입니다

.container { 
    margin-top: 50px; 
    margin-left: 25px; 
    margin-bottom: 50px; 
    position: absolute; 
    height: auto; 
    top:0; 
    bottom:0; 
    background:#ff8; 
} 

.first { 
    position: relative; 
    left: 0; 
    top: 0; 
    border: 1px solid red; 
} 

.second { 
    position: relative; 
    left: 0; 
    bottom: 0; 
    margin-top: 10px; 
    overflow-y: scroll; 
    border: 1px solid green; 
} 

태그 :

<div class="container"> 
    <div class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim mi, semper id lectus nec, tincidunt congue odio. Aliquam erat volutpat. Curabitur tellus eros, mollis malesuada imperdiet eget, congue in nisi. Donec vel nunc id libero elementum dignissim. Nulla facilisi. Mauris laoreet bibendum vestibulum. Integer odio magna, tempus eu orci quis, dignissim blandit enim. </div> 
    <div class="second">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
</div> 

그러나, 두 번째 DIV 대신에서만 사용 가능한 컨테이너 공간 스트레칭의 용기를지나 아래 흐른다.

참고 : 문제를 드러내지 않는 이유는 두 div의 높이 값을 미리 알지 못하고 내용에 따라 다릅니다. (그렇지 않으면 나는 수동으로 높이를 설정할 수있을거야 너희들을 귀찮게하지 않을거야 :))

진행 방법에 대한 힌트가 있습니까?

Answer 1

그리고 여기 내 솔루션입니다 :

http://jsfiddle.net/VRT6U/2/

HTML

div id="main"> 
<div id="top"> 
    fdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa 

    </div> 
<div id="bot"> 
    bot 
    fdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsafdsafdsafdafd as fsa s asa fas fsa fsa 
    </div> 
</div> 


<div id="addMoreText" title="click here to add more text to top element">click me!</div> 

CSS

#main {width: 200px; height: 400px; background: #EEE; border: 1px solid #CCC;} 
#top {width: 190px; margin: 5px; background: #CCC; border: 1px solid #AAA; color: #888;} 
#bot {width: 190px; margin: 5px; background: #CC5; border: 1px solid #AAA; color: #888; overflow: 
     -moz-scrollbars-vertical; overflow-y: scroll;} 

#addMoreText { width: 100px; height: 20px; background: #06A; border: 1px solid #036; text-align:center; color:white; font-size:11px; font-weight:bold; line-height:20px; margin:20px 50px; cursor:pointer;} 

jQuery를

calculateBotDivHeight();

$('#addMoreText').click(function(){ 
    $('#top').html($('#top').html()+ " some text "); 
    //if you load text not only on page load, you have to recalculate the height. 
    calculateBotDivHeight(); 
}); 

function calculateBotDivHeight(){ 
    $newHeight = $('#main').height() - $('#top').outerHeight(true) - 6; 
    $('#bot').height($newHeight); 
} 

Answer 2

텍스트에 응답하려면 자바 스크립트 또는 jquery를 사용해야합니다. 다음은 jQuery를 솔루션 인이 된 div가 변경하는 방법을 볼 수 삽입하거나 텍스트를 제거하기 위해 바이올린을 사용

바이올린 1 : http://jsfiddle.net/5p77w/3/은
바이올린 2 (오버 플로우와 더 많은 콘텐츠) : http://jsfiddle.net/5p77w/4/

var $parentH = $('.container').outerHeight(); 
var $firstH = $('.first').outerHeight(); 
var $applyH = $parentH - $firstH; 

$('.second').css("height", $applyH); 

당신이 필요 .outerHeight()을 사용하여 여백과 패딩을 포함하십시오. .first의 높이를 계산하고 빼는 것은 부모의 전체 높이에서입니다.당신은 변수에이 번호를 저장하고 사이트가 나는 기능이 퍼팅이 높이 조절

을 수행하는 함수를 호출 할 페이지를 설정하는 것이 좋습니다 반응 인 경우 JQuery와에게 .css()

를 사용하여 .second 요소에 적용

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

$(window).resize(function() { 
changeHeights(); 
}); 

function changeHeights() { 
var $parentH = $('.container').outerHeight(); 
var $firstH = $('.first').outerHeight(); 
var $applyH = $parentH - $firstH; 

$('.second').css("height", $applyH); 
} 

당신은 또한 내용이 이렇게 만드는 부모의 높이를 초과하는 경우 오버 플로우와 함께 최초의 사업부로 최대 높이 적용을 고려해야합니다

사업부 번째있는 쓸모