Как установить минимальную высоту 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 для соответствия экрану?

ответ

Смежные вопросы