Full height div doesn't work
Question
I've a problem with simple html/css trick.
I want to create website with 100% height left bar with eg width 300px and on the right side i want contener div with the rest of the width.
below code:
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 answers
solution1
0 2018-02-06 18:54:46
使用position: fixed而不是absolute 。
solution2
0 2018-02-06 19:06:47
First you have a typo in the CSS of html . You are missing : , Adding it will fix the issue. You need to also remove the min-height declaration if you want the inner box to control the size:
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>
By the way you can simply use flexbox like below. Since the default alignment of items is stretch by default you will obtain the layout you want.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.