Html,Body 100%内容的高度和动态宽度

时间:2013-09-05 12:22:54

标签: html css

我知道这里有一些问题涵盖了我的问题的部分内容,但我无法将它们放在一起使我的布局工作。

所以基本上我想要一个带有固定边栏的两列布局,动态内容填充剩余的空间。

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;
}

使用这个CSS我遇到的问题是我的内容没有占用剩余的空间,如果我移除浮动,我会得到一个垂直滚动条,因为顶部有一个边距!

任何建议我如何在没有滚动条的情况下达到100%高度(没有溢出隐藏,因为它没有删除顶部的边距)和动态内容宽度?

提前致谢

修改

具有讽刺意味的是,它适用于jsfiddle

3 个答案:

答案 0 :(得分:4)

http://jsfiddle.net/gXubX/2/

.container { 
    width: 100%;
    background: fuchsia;
}

.left {
    width: 200px;
    float: left;
    background: purple;
    min-height: 300px;
}

并且应用于容器的clearfix。

答案 1 :(得分:2)

这是一个为内容和导航栏提供100%高度的解决方案:

小提琴: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;
}

答案 2 :(得分:1)

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>