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

【问题标题】：Html, Body 100% Height and dynamic width for contentHtml, Body 100% 内容的高度和动态宽度
【发布时间】：2013-09-05 12:22:53
【问题描述】：

我知道这里的问题涵盖了我的部分问题，但我无法将它们放在一起以使我的布局正常工作。

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

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

【问题讨论】：

@Itay 呃，小提琴？网址呢？
你想让你的 div#content 有一个动态宽度吗？
jsfiddle.net

标签： html css

【解决方案1】：

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

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

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

并且对容器应用了一个 clearfix。

【讨论】：

我已经尝试过你的建议，但我仍然在顶部和底部有一个边距jsfiddle.net/tqEfS/1
谢谢，但这并不能解决我的 100% 高度和我得到的垂直滚动条的问题......看看页面底部，这应该是一条直线 jsfiddle.net/tqEfS/2
对不起，我不明白...我希望内容和侧边栏的高度为 100%！在你的小提琴中情况并非如此，min-height: 300px;
如果我将溢出设置为隐藏它会起作用，所以我会接受你的回答 ;-) 并感谢你的帮助
我没有告诉你需要 100% 高度的容器，这个可行：jsfiddle.net/gXubX/4

【解决方案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;
}

【讨论】：

哇，这是一个非常好的解决方案，不知道计算！这是否适用于所有浏览器，例如IE7 甚至 6？

【解决方案3】：

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>

【讨论】：

我不希望导航栏是动态的，它应该有一个固定的宽度
关闭，但这会导致水平滚动条：-/
哦，我会试试你的解决方法 :)