全高 div 不起作用
[英]Full height div doesn't work
問題描述
我有一個簡單的 html/css 技巧的問題。
我想創建具有 100% 高度左側欄的網站，例如寬度為 300px，在右側，我想要具有其余寬度的 contener div。
下面的代碼：
html {min-height:100%; position relative;} body {margin:0px; height:100%;} .left-bar {position:absolute; width:100px; background:#f8e8bc; top:0; bottom:0; left:0; right:0; overflow:hidden;} .contener {float:right; right:0px; width: calc(100% - 100px); height:100%; background:#eee;} .box {margin:auto; width:150px; height:500px; overflow:hidden; border:1px solid #ccc;}
<html> <body> <div class="left-bar"></div> <div class="contener"> <div class="box"></div> </div> </body> </html>
1 個解決方案
解決方案1
0 2018-02-06 18:54:46
使用position: fixed而不是absolute 。
解決方案2
0 2018-02-06 19:06:47
首先，您在html的CSS中有一個錯字。 您丟失了: ，添加它可以解決此問題。 如果希望內部框控制尺寸，則還需要刪除min-height聲明：
html { position: relative; } body { margin: 0px; height: 100%; } .left-bar { position: absolute; width: 100px; background: #f8e8bc; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; } .contener { float: right; right: 0px; width: calc(100% - 100px); height: 100%; background: #eee; } .box { margin: auto; width: 150px; height: 500px; overflow: hidden; border: 1px solid #ccc; }
<div class="left-bar"></div> <div class="contener"> <div class="box"></div> </div>
順便說一句，您可以像下面那樣簡單地使用flexbox。 由於默認情況下項目的默認對齊方式是拉伸，因此您將獲得所需的布局。
body { margin: 0px; display: flex; } .left-bar { width: 100px; background: #f8e8bc; } .contener { flex: 1; background: #eee; } .box { margin: auto; width: 150px; height: 500px; overflow: hidden; border: 1px solid #ccc; box-sizing: border-box: }
<div class="left-bar"></div> <div class="contener"> <div class="box"></div> </div>
全高級別不能使div全高
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.