div에 높이를 지정하는 방법은 무엇입니까?

처음 두 div의 고정 높이와 다음 두 div의 백분율 값을 지정하고 싶습니다.div에 높이를 지정하는 방법은 무엇입니까?

마지막 div는 이전 div가 남긴 모든 공간 (브라우저 창의 아래쪽)을 차지해야합니다. 나는 어떻게 이것을 css에서 성취합니까?

여기 내 CSS + HTML입니다.

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > 
<head> 
<title>One Hundred Percent height divs</title> 
<style type="text/css" media="screen"> 
html 
{ 
height:100%; 
} 

body 
{ 
margin:0; 
padding:0; 
height:100%; 
} 
header 
{ 
height:20px; 
width:100%; 
background-color:red; 
} 
.container2 
{ 
height:40px; 
width:100%; 
background-color:#11ccdd; 
} 
.container3 
{ 
height:35%; 
width:100%; 
background-color:#bacdef; 
} 
.subcontainer1 
{ 
float:left; 
height:35%; 
width:50%; 
background-color:#569895; 
} 
.subcontainer2 
{ 
float:left; 
height:35%; 
width:50%; 
background-color:#dbc462; 
} 
.container4 
{ 
width:100%; 
background-color:#aaaadd; 
} 
</style> 
</head> 

<body> 

<header> 
header 
</header> 

<div class="ClearAll"></div> 
<div class="container2"> 
container2 
</div> 
<div class="ClearAll"></div> 

<div class="container3"> 
<div class="subcontainer1"> 
subcontainer1 
</div> 
<div class="subcontainer2"> 
subcontainer2 
</div> 
</div> 

<div class="ClearAll"></div> 


<div class="container4"> 
container4 


</div> 

</body> 
</html>

여기에 내가 쓴 것처럼 처음 두 div의 너비 픽셀 값을 언급해야합니다. 세 번째 컨테이너의 너비는 백분율입니다. 네 번째 컨테이너는 나머지 세 개의 div가 남긴 공간 (화면 크기)을 차지해야합니다. 내가 어떻게 할 수 있니?

출처

2011-02-11 priya

내가 할 수있는 당신이 원하는 것을 시각화하지 마십시오. HTML을 처음부터 가지고 있습니까? 결과가 어떻게 보이길 원하나요? – BoltClock

어떤 divs입니까? 나는 어떤 divs도 보지 않는다! Divs,여보세요! 어디야? _ 코드를 게시하십시오. 우리는 심령이 아닙니다! _ – Kyle

그리고 div는 어떻게 배치되어야합니까? 점유하고 싶은 총 공간은 얼마입니까? 화면 높이? 고정 된 픽셀 높이? 현재 HTML + CSS가 무엇입니까? 답변을 기다리기 전에 세부 정보를 추가하십시오. – mingos

CSS를 사용하여이를 수행 할 수 없습니다. 당신이하고 싶은 일에 따라 같은 효과를 내기 위해 해킹을 할 수는 있지만 실제로는 을 언급하지 않았습니다. 왜 이렇게해야할까요?

으로 디자인 된 복잡한 레이아웃의 경우 화면을 어떤 방식 으로든으로 채우십시오. masonry라는 매우 스마트 한 jquery 플러그인이 있습니다.

는

http://desandro.com/resources/jquery-masonry/

출처

2011-02-11 08:52:38 arnorhs

나는 자바 스크립트 또는 jquery없이 순수한 CSS로주고 싶다 ... 거기에 다른 옵션 ..? – priya

아니요. 동일한 효과를 얻으려면 해킹을 할 수 있지만 상단과 하단에 두 개의 div를 사용하지 않아도됩니다. – arnorhs

이 JQuery와 스크립트를 사용할 수 있습니다 :

function resizeContainer() { 
    var screenHeight = $(window).height(); 
    var allElements = $('header').height() + $('.container2').height() + $('.container3').height(); 
    var container4Height = screenHeight - allElements; 
    $('.container4').css({ 
     'height': container4Height 
    }); 
} 

resizeContainer(); 

$(window).resize(resizeContainer);

데모 :

http://jsfiddle.net/Mutant_Tractor/NSh35/2/

이 CSS에서 수행하고 완벽한 100 %를 볼 수 없습니다

출처

2011-02-11 12:41:06

thanksfor ur code. 하지만 자바 스크립트에서 0입니다. 내 코드와 자바 스크립트를 바인딩하는 방법을 모르겠다. 나를 도와 주실 수있으세요? – priya

'' –

div에 높이를 지정하는 방법은 무엇입니까?

답변

관련 문제