2015-11-19 3 views
0

У меня проблема с свойствами высоты. Я делаю веб-сайт и хочу сделать это: есть элемент div, который сворачивает других, и у этого есть дочерний div, и когда я изменяю размер окна, тогда родительский div получает высоту окна. это нормально, но дочерний div не фиксируется, поэтому некоторые дочерние элементы - это не показано. те остаются с дочерью div ... plase help me ...css высота и переполнение

Я хочу видеть полный патч желтой области, но когда я изменяю размер браузера, некоторые тэги остаются ... как я могу исправить? любой браузер высоты желтый патч сусло показано ... Пожалуйста, помогите мне ...

enter image description here

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>Document</title> 
 
\t <style> 
 
\t *, *:before, *:after{ 
 
\t \t padding:0; 
 
\t \t margin:0; 
 
    \t box-sizing: border-box; 
 
\t } 
 
\t html,body{ 
 
\t \t height:100%; 
 
\t \t overflow-y: hidden; 
 
\t } 
 
\t .d{ 
 
\t } 
 
\t .d1{ 
 
\t \t height:100%; 
 
\t \t overflow:hidden; 
 
\t \t position:relative; 
 
\t } 
 
\t .d2{ 
 
\t \t display:block; 
 
\t \t position:relative; 
 
\t \t background:yellow; 
 
\t \t overflow-y: auto; 
 
\t \t height:90%; 
 
\t } 
 
\t .d3{ 
 
\t \t height:90px; 
 
\t \t background:blue; 
 
\t } 
 
\t </style> 
 
</head> 
 
<body> 
 
\t <div class="d d1"> 
 
\t \t <div class="d3"> 
 
\t \t \t <p>dadsdsaasd</p> 
 
\t \t \t <p>dadsdsaasd</p> 
 
\t \t \t <p>dadsdsaasd</p> 
 
\t \t \t <p>dadsdsaasd</p> 
 
\t \t \t <p>dadsdsaasd</p> 
 
\t \t </div> 
 
\t \t <div class="d2"> 
 
\t \t \t <p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>sonososososo</p> 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html>

ответ

0

попробуйте использовать position:inherit для детей дивы. Надеюсь, это сработает

0

Вы можете использовать css calc.

Jsfiddle

.d2 
{ 
    height: calc(100% - 90px); 
} 
0

Высота в пикселях и процентах вместе не работает большой обычно. Переполнение: скрытый скрывает 90% div, так как его размер превышает размер окна просмотра. Удалить переполнение: скрыто для родительского div, тело & html тег для просмотра скрытого содержимого. Если есть какая-то конкретная причина переполнения: скрытая до верхней иерархии. Вы все еще можете достичь того же, упомянув процентные значения для обоих ребенка DIV

Согласно кода .d2 {высота: 87%} .d3 {высота: 13%}

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