두 번째 div의 높이를 설정하는 방법은 나머지 공간을 차지합니까?

다음 코드에는 두 개의 패널이 있습니다. 첫 번째는 고정 크기 (또는 자동) 여야하지만 두 번째는 사용 가능한 나머지 공간을 확보해야합니다.두 번째 div의 높이를 설정하는 방법은 나머지 공간을 차지합니까?

그래서 제가 height:100%;을 설정했지만 여전히 작동하지 않습니다.

<html style="height:100%;"> 
    <body style="height:100%;"> 
     <div style="background-color:green;">a 
     </div> 
     <div style="background-color:gray; height:100%;">d 
     </div> 
    </body> 
</html>

나머지보기에서는 두 번째 패널을 표시하기 위해 누락 된 사항은 무엇입니까?

출처

2013-01-31 Darf Zon

녹색과 회색 패널이 나타납니다. 문제가 뭐야? http://jsbin.com/epokid/1/edit –

음, 녹색 패널은 나머지 모든 공간에 표시되어야합니다. –

은'auto'로 설정되어 있습니까? – hjpotter92

개인적으로 position : absolute를 사용하고 싶습니다.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
<style> 
    html,body { 
    width:100%; 
    height:100%; 
    } 

    #Green { 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    height:30px; 
    background-color:green; 
    } 

    #Gray { 
    background-color:gray; 
    position:absolute; 
    top:30px; 
    left:0; 
    right:0; 
    bottom:0; 
    } 
</style> 
<body> 
    <div id="Green">a</div> 
    <div id="Gray">d</div> 
</body> 
</html>

이렇게하면 div의 전체 길이가 상위 30px에 대해 상속됩니다.

출처

2013-01-31 21:23:04 PlantTheIdea

답변 해 주셔서 감사합니다. 하지만 장치의 위치에 따라 다른 높이의 첫 번째 div를 표시하기 때문에 상대 경로를 사용하는 것을 선호합니다. 그래서 예 (첫 번째 div 높이가 자동) –

정직하게 그 중 하나가 정말 해키가 될거야, 또는 당신이 자바 스크립트 솔루션을 찾고있는 예를 편집했습니다. – PlantTheIdea

두 번째 div의 높이를 설정하는 방법은 나머지 공간을 차지합니까?

답변

관련 문제