[英]Html, Body 100% Height and dynamic width for content
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. 因此,基本上,我希望两列布局具有固定的侧边栏和动态的Content来填充剩余空间。
HTML: 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: 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! 有了这个CSS,我的问题是我的内容没有占用剩余的空间,并且如果我移除浮动元素,我会得到一个垂直的滚动条,因为顶部有边距!
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? 有没有什么建议可以在没有滚动条的情况下实现100%的高度(不隐藏溢出,因为这不会消除顶部的空白)和动态内容宽度?
thanks in advance 提前致谢
EDIT: 编辑:
http://jsfiddle.net/gXubX/2/ http://jsfiddle.net/gXubX/2/
.container {
width: 100%;
background: fuchsia;
}
.left {
width: 200px;
float: left;
background: purple;
min-height: 300px;
}
And a clearfix applied to the container. 并将clearfix应用于容器。
Here is a solution that gives you 100% height for both content and the navbar: 这是一个为内容和导航栏提供100%高度的解决方案:
fiddle: http://jsfiddle.net/92c6M/ 小提琴: http : //jsfiddle.net/92c6M/
HTML 的HTML
<div id="navbar">
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
</ul>
</div>
<div id="content">
</div>
CSS 的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;
}
CSS: 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 的HTML
<div id="wrapper">
<div id="navbar"></div>
<div id="content-wrapper">
<div id="content">
asdfasfdasdfasdg asdga sdgasdg asdgasdgasdgasdg
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.