고정 상단 높이 및 동적 너비 및 높이

상단에 고정 높이 div가 있고 그 아래에 나머지 페이지 높이 및 너비를 항상 차지하는 레이아웃을 만들려면 어떻게해야합니까? 따라서 창 크기를 조정하면 두 번째 div의 높이와 너비가 그에 따라 조정됩니다.고정 상단 높이 및 동적 너비 및 높이

<html> 
<head> 
<body style="width:100%;height:100%;position:absolute;background:#EEE;margin:0 auto"> 
<div style="border-bottom:1px solid #000;height:50px;background:#900">1st div</div> 
<div style="height:100%;width:100%;background:#090">2nd div</div> 
</body> 
</html>

이 나에게 상단에 고정 DIV 및 크기 조정 DIV에 있습니다 :

나는 비슷한이 http://omegle.com/

에서 찾을 수 있습니다 무엇을 달성하고자하는의 예는 지금까지 나는이 함께했다 하단하지만, 두 번째 div는 고정 된 div의 높이를 고려하지 않으므로 div는 내가 원하는 것보다 높이가 더 높아집니다. div 2의 높이 %를 80 %로 낮추면 위의 고정 된 높이 블록으로 인해 창의 크기를 조정할 때 일정하지 않습니다.

자바 스크립트 무료 솔루션을 찾고 있습니다.

출처

2011-09-17 John

본문에 콘텐츠 배경색을 지정하지 않으시겠습니까?

demo fiddle을 참조하십시오.

CSS

html, 
body { 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    background: #090; 
} 
#header { 
    border-bottom: 1px solid #000; 
    height: 50px; 
    background: #900; 
}

그리고 당신은 창 하단에 스트레칭 정말 컨텐츠를 필요로 할 때, 다음과 같은 절대적으로 배치 this fiddle에서 :

CSS :

#content { 
    position: absolute; 
    top: 51px; 
    bottom: 0; 
    background: #090; 
}

출처

2011-09-17 19:53:32 NGLN

이 의지 평범한 텍스트 콘텐츠에만 작동하지만 그 안에 또 다른 블록 요소를 추가하면 크기를 조정해야합니다 (예 : http://jsfiddle.net/MNNYf/7/ – John

ab 용적 포지셔닝, 편집 참조. – NGLN

고정 상단 높이 및 동적 너비 및 높이

답변

관련 문제