Div 100% высота внутри Div не работает

Я проектирую интерфейс панели инструментов для себя. У меня возникают некоторые проблемы с внутренними div, у моего leftpane div устанавливается высота 100% внутри родителя, но он переполняет родительский div на величину 50 пикселей, которая является высотой верхней панели. Пожалуйста, предложите мне, почему оно переполнено, 100% должно означать, что там есть свободное пространство, не так ли?Div 100% высота внутри Div не работает

вот мой CSS и HTML

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

 
.wrapper { 
 
\t width: 100%; 
 
\t height: 700px; 
 
\t margin: auto; 
 
\t border: 1px solid black; 
 
\t display: table; 
 
} 
 

 
.topbar { 
 
\t height: 50px; 
 
\t background: #353535; 
 
\t background-color: #353535; 
 
\t clear:both; 
 
\t color: white; 
 
\t width: 100%; 
 
\t position:relative; 
 
} 
 

 
.leftpane { 
 
\t width: 20%; 
 
\t height: 100%; 
 
\t background-color: #eee; 
 
\t float: left; 
 
\t border-right: 2px solid #353535; 
 
} 
 

 
.content { 
 
\t width: 79%; 
 
\t height: 100%; 
 
\t float:right; 
 
\t border: 2px solid red; 
 
} 
 

 
.content-header { 
 
\t height: 50px; 
 
\t background-color: #353535; 
 
\t width: 100%; 
 
} 
 

 
.content-area { 
 
\t height:100%; 
 
\t width: 100%; 
 
\t border: 2px solid green; 
 
}

<html> 
 
<head> 
 
<title>GUYACOM - Suivi de la connectivit&eacute;</title> 
 
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
 
<link rel="stylesheet" href="css/style2.css" /> 
 
<!-- <link rel="stylesheet" href="css/bootstrap.css" /> --> 
 
<!--<link rel="stylesheet" href="css/colorbox.css" /> --> 
 
<!-- <script type="text/javascript" src="js/tinybox.js"></script> --> 
 
</head> 
 
<body> 
 
<div class="wrapper"> 
 
\t <div class="topbar"><h1> 
 
\t </h1></div> 
 
\t <div class="content-area"> 
 
\t \t <div class="leftpane"> 
 
\t \t </div> 
 
\t \t <div class="content"> 
 
\t \t \t <div class="content-header"> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 
</body> 
 
</html>

источник

2016-06-09 Letscode

Одним из решений является использование 'высота: известково (100% - 50px) ', второй для использования' display: table/table-row/table-cell', третий для использования 'flexbox', четвертого JS. – Vucko

Попробуйте это может помочь ...

<html> 
<head> 
<title>GUYACOM - Suivi de la connectivit&eacute;</title> 
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
<link rel="stylesheet" href="css/style2.css" /> 
<style> 
html, body { 
    height:100%; 
    margin: 0px; 
} 

.wrapper { 
    width: 100%; 
    height: 100%; 
    margin: auto; 
    border: 1px solid black; 
    display: table; 
} 

.topbar { 
    height: 50px; 
    background: #353535; 
    background-color: #353535; 
    clear:both; 
    color: white; 
    width: 100%; 
    position:absolute; 
} 

.leftpane { 
    width: 20%; 
    height: 100%; 
    background-color: #eee; 
    float: left; 
    border-right: 2px solid #353535; 
} 

.content { 
    width: 79.5%; 
    height: 100%; 
    float: left; 
    border: 2px solid red; 
} 

.content-header { 
    height: 50px; 
    background-color: #353535; 
    width: 100%; 
} 

.content-area { 
    height:100%; 
    width: 100%; 
    border: 2px solid green; 
} 
</style> 
</head> 
<body> 
<div class="wrapper"> 
    <div class="topbar"><h1> 
    </h1></div> 
    <div class="content-area"> 
     <div class="leftpane"> 
     </div> 
     <div class="content"> 
      <div class="content-header"> 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

источник

2016-06-09 10:42:11 Mani

Он работает, спасибо большое :) Могу ли я спросить, почему он не работал без абсолютного положения? 100% по умолчанию означает, что он должен принимать все свободное место там? – Letscode

Если вы не дадите положению абсолютное значение, то после раздела topbar это займет 100%. то высота будет увеличиваться на 100% + высота верхнего бара – Mani

Не совсем так, как мне кажется, изначально она работает, но когда я проверяю ее на инструментах разработчика, она попадает в верхнюю панель, и теперь моя панель содержимого скрыта внутри нее который также является 50px – Letscode

Div 100% высота внутри Div не работает

ответ

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