получить два деления, чтобы заполнить все вертикальное пространство - PullRequest
Новая
       12

получить два деления, чтобы заполнить все вертикальное пространство

1 голос
/ 19 июля 2011

это кажется такой распространенной проблемой, и я потратил несколько часов, пытаясь выяснить это онлайн ..

Ситуация:

  • У меня есть 2 divs: div_header, div_content
  • Какое бы вертикальное пространство не занимало div_header, мне нужно div_content для заполнения оставшегося пространства, так как размер браузера изменяется

Код: 

<html>
<head> 
</head>

<body>

<div id = "div_header">             
</div>

<div id="div_content">
</div>

</body>
</html>

Спасибо, ребята.

Ответы [ 2 ]

0 голосов
/ 19 июля 2011

Я не знаю, хотите ли вы решение JS или нет.вот моя попыткаНа моем экране, если высота браузеров опускается ниже 400px, тогда он показывает прокрутку, но это нормально

<html>
<head> 
<script type="text/javascript">

function heightDo()
{

var headerO = document.getElementById("div_header");
var contentO = document.getElementById("div_content");
//var docH = document.height;
var bodH = document.body.offsetHeight;
contentO.style.height = bodH - headerO.offsetHeight;
}
</script>
<style type="text/css">
html, body {
}
#div_header
{
height:auto;


}
#div_content { 


}
</style>
</head>

<body onload="heightDo()">

<div id="div_header">  
header           
<br/>
What do you say?
</div>

<div id="div_content">
content
</div>

</body>
</html>
0 голосов
/ 19 июля 2011

Редактировать: неправильно понятые требования ОП:

Используйте следующий CSS: 

html, body {
  margin: 0;
  height: 100%;
}

#div_header {
  height: 100px;
}

#div_content
{
  position: absolute;
  top: 100px;
  bottom: 0px;
  width: 100%;
}
...