Div Div內部100％高度不起作用

我正在爲自己設計儀表板界面。我有一些內部div的問題，我的leftpane div被設置爲父級內部的100％高度，但是它溢出了父級div的50px，這是topbar的高度。請告訴我它爲什麼會溢出，100％應該表示任何可用空間，不是嗎？Div Div內部100％高度不起作用

這裏是我的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％第二個使用'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

如果您沒有提供絕對位置，在頂欄後只有100％。那麼高度將增加100％+頂杆高度 – Mani

它不是我想的正確方式，它最初似乎在工作，但是當我在開發人員工具上檢查它時，它實際上已經進入了頂部欄，現在我的內容 - 頂部欄被隱藏在其中這也是50px – Letscode

Div Div內部100％高度不起作用

回答

相關問題