화면에 맞게 div의 최소 높이를 설정하는 방법은 무엇입니까?

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.banner{ 
    width:800px; 
    height:160px; 
    border:1px solid #000000; 
} 
.main_box{ 
    width:800px; 
    height:300px; 
    border:1px solid #000000; 
} 
</style> 
</head> 
<body> 
<div class="banner"></div> 
<div class="main_box"></div> 
</body> 
</html>

여기에 최소 높이를 설정할 때 main_box" to 100% 아무 일도 발생하지 않습니다.화면에 맞게 div의 최소 높이를 설정하는 방법은 무엇입니까?

그러나 높이를 픽셀로 설정하면 높이를 볼 수 있습니다. 화면에 맞게 main_box div의 높이를 설정하고 싶습니다.

누구나 방법을 알고 있습니까?

출처

2014-11-16 Amar Pawar

_ "난 여기의 최소 높이 설정"main_box _ "100 %는, 아무 일도 일어나지 않는다"- 백분율로 주어진 임의의 높이가 있어야하기 때문에, 물론하지를 상위 요소에 대해 설정된 높이입니다. 그렇지 않으면 처음에 어떤 값을 취해야하는지 명확하지 않습니다. – CBroe

사용 (viewport-units) vhSizing with CSS3의 VW 및 VH 단위

min-height: 100vh

전체 코드

.banner{ 
 
    width:800px; 
 
    height:160px; 
 
    border:1px solid #000000; 
 
} 
 
.main_box{ 
 
    width:800px; 
 
    min-height: 100vh; 
 
    height:300px; 
 
    border:1px solid #000000; 
 
    background:red 
 
}

<div class="banner"></div> 
 
<div class="main_box"></div>

출처

2014-11-16 14:21:32

먼저 설정 HTML 바디 높이 100 %

html,body{ 
    height:100% 
}

출처

2014-11-16 14:21:34

이 CSS를 사용해보십시오 :

<style> 
html,body{ 
    height:100% 
} 
.banner{ 
    width:800px; 
    height:160px; 
    border:1px solid #000000; 
} 
.main_box{ 
    width:800px; 
    min-height:300px; 
    height:75%; 
    border:1px solid #000000; 
} 
</style>

출처

2014-11-16 14:31:14

화면에 맞게 div의 최소 높이를 설정하는 방법은 무엇입니까?

답변

관련 문제