2012-01-12 6 views
0

У меня есть следующая проблема с css и задавалась вопросом, есть ли способ ее решить, установив абсолютное значение высоты. Код у меня выглядит следующим образом,css height property

<style type="text/css" media="screen"> 
html { height:100%; } 
body { background: black; height:100%; } 

#menud { 
position:absolute; 
padding:1em; 
height:300px; 
background-color:#eaeaea; 
width:184px; 
} 

#menue { 
position:absolute; 
margin-top:300px; 
padding:1em; 
height:900px; 
width:184px; 
background-color:red; 
} 

#data { 
position:absolute; 
margin-top:0px; 
margin-left: 184px; 
width:630px; 
height:600px; 
border-left:1px solid #dedede; 
border-right:1px solid #dedede; 
} 

#ad { 
position:absolute; 
padding:1em; 
margin-top:0px; 
margin-left:814px; 
width:186px; 
background-color:red; 
height:800px; 
} 

#content { 
width:1000px; 
background-color:white; 
height:100%; 
} 

#info { 
margin-top:0px; 
width:1000px; 
} 
</style> 

<html> 
<body> 

<div id='content'> 
<div id='info'> 

<div id='menua'>test</div> 
<div id='menub'>test</div> 
<div id='data'>test</div> 
<div id='ad'>test</div> 

</div> 
</div> 

</body> 
</html> 

Я установил свойство высоты до 100%, но это не покрывает весь фон белый, как можно было бы ожидать, что она. Любая помощь по этому поводу будет оценена по достоинству.

Thanx.

ответ

0

100% высота относительно контейнера. Чтобы покрыть весь фон, вам нужно будет использовать javascript. При загрузке страницы вы устанавливаете height на высоту окна.

Вы можете использовать jQuery, чтобы сделать это: в этом случае

$("#content").css('height', $(window).height()); 
+0

Для этого вам не нужен jQuery, и он может так же легко установить его с помощью простого javascript. – Rob

+0

Да, правильно. Но тогда вам придется обрабатывать разные браузеры. jQuery упростил работу. :) –

+0

Не задумываясь об этом, я не знаю, какие браузеры будут делать это по-другому. – Rob

0

Вы, возможно, придется удалить Прокладки и поля от тела, как body { margin: 0; padding: 0; }, для относительного расположением контейнера div, чтобы покрыть всю высоту ,

2

Установка высоты до 100% означает 100% текущей высоты видового экрана. Если ваша страница длиннее окна просмотра браузера, div слишком короткий. Используйте автоматическую высоту, чтобы позволить вам правильно рассчитать высоту.

Установить высоту содержимого обратно в авто (удалить height: 100%):

#content { 
width:1000px; 
background-color:white; 
} 

и удалить position: absolute из объявлений (или заменить position: relative), так что высота объявления должен соблюдаться при расчете родителя (#content «s) высота:

#ad { 
padding:1em; 
margin-top:0px; 
margin-left:814px; 
width:186px; 
background-color:red; 
height:800px; 
} 

теперь ваше содержание до тех пор, как и следовало ожидать.