Html, Body 100% Height and dynamic width for content
Question
I know that there are Questions here that covers parts of my Question but I can´t put them together to make my layout work.
So basically I want a two Column Layout with a fixed Sidebar and dynamic Content fill up the remaining space.
HTML:
<body>
<div id="navbar">
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
</ul>
</div>
<div id="content">
</div>
</body>
CSS:
html, body {
height:100%;
margin: 0;
padding: 0;
border: 0;
}
#content {
height:100%;
float:left;
/*margin: 0 0 0 200px;*/
}
#navbar{
height:100%;
width:200px;
float:left;
}
With this CSS I have the Problem that my content isn´t taking up the remaining Space, and if I remove the float I get a vertical scrollbar because there´sa margin on top!
Any suggestions how I can achieve 100% Height without scrollbar (no overflow hidden because that doesn´t remove the margin on top) and dynamic content width?
thanks in advance
EDIT:
Ironically it works with jsfiddle
3 answers
solution1
4 2013-09-05 12:29:32
.container {
width: 100%;
background: fuchsia;
}
.left {
width: 200px;
float: left;
background: purple;
min-height: 300px;
}
And a clearfix applied to the container.
solution2
2 ACCPTED 2013-09-05 13:23:06
Here is a solution that gives you 100% height for both content and the navbar:
fiddle: http://jsfiddle.net/92c6M/
HTML
<div id="navbar">
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
</ul>
</div>
<div id="content">
</div>
CSS
html, body {
height:100%;
margin: 0;
padding: 0;
border: 0;
}
#content {
height:100%;
width: calc(100% - 200px);
display: inline-block;
background-color: #DDF;
}
#navbar{
height:100%;
width:200px;
float: left;
background-color: #CEC;
}
solution3
1 2013-09-05 12:32:58
CSS:
#wrapper {
width: 100%;
float: left;
positon: relative;
}
#navbar {
width: 200px;
float: left;
top: 0px;
left: 0px;
position: absolute;
height: 300px;
background-color: red;
z-index: 2;
}
#content-wrapper {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 300px;
float: left;
background-color: blue;
z-index: 1;
}
#content {
left: 200px;
margin-left: 200px;
background-color: green;
z-index: 3;
color: white;
}
HTML
<div id="wrapper">
<div id="navbar"></div>
<div id="content-wrapper">
<div id="content">
asdfasfdasdfasdg asdga sdgasdg asdgasdgasdgasdg
</div>
</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.