html - 两列布局，其中主要内容 DIV 的宽度是可变的(使用所有可用空间 100%)

Question

我觉得这个问题已经得到解答，但我搜索了又搜索，似乎没有答案涉及动态主要内容宽度。

我只是想要这个场景:

|-|导航|-|主要内容|-|

其中 nav 是一个 DIV，main content 是一个 DIV，两者都放在另一个宽度为 100% 的 DIV 容器中。 - 只是 DIV 之间的一个间距，一个边距。

nav 的固定宽度为 300px，“主要内容”div 应始终占用剩余的可用空间(以填充父 div 的 100%)——无需使用 JavaScript。

我还想在每个 DIV(导航、主要内容)的左侧和右侧留出一些边距，以便它们与“浏览器边框”/正文之间有一些空间。

我试验过表格、表格单元格，但边框折叠让我抓狂，所以我要回到老天爷“float:left”和 clearfix。这是我目前所拥有的:

<div id="container" class="cf">
    <div id="nav">
        Nav stuff
    </div>    
    <div id="main">
        Main stuff
    </div>   
</div>

#container {
    padding: 0;
    width: 100%;
    background-color: orange;
    min-height: 50px;
}

#nav {
    display: inline;
    float: left;
    min-width: 300px;
    width: 300px;
    margin-left: 10px;
    margin-right: 10px;
}

#main {
    display: inline;
    float: left;
    background-color: green;
    margin-right: 10px;
}

.. /* clearfix stuff omitted (class 'cf') */

那么现在的问题是，如何让“主要内容”(#main)填充其余的父级(#container)。如果我使用 100% 的宽度，那么 100% 当然是父级的全宽，div 将位于“nav”div 下方。如果我使用“自动”，同样的事情也会发生。如果我传入固定宽度，它当然可以工作，例如以像素为单位，但我事先不知道正确的像素并使用 JS 来计算这对我来说似乎有点奇怪。

我见过一个解决方案，其中“nav”放在“main”内，但这会导致边距出现问题。尝试插入边距以在位于另一个 div 内的 div 旁边创建一些空间...我认为这在这个世界中无论如何是不可能的。

感谢您的帮助!

Answer 1

也许你应该创建 BFC 来面对这个问题。

例如:

#container{
    border: 1px solid red;
}
#nav{
    float: left;
    width: 300px;
    border: 1px solid green;
    height: 200px;

    margin-left: 20px;
    margin-right: 20px;
}
#main{

    overflow: hidden;



    height: 400px;
    border: 1px solid blue;
    margin-right: 20px;
}

overflow: hidden; 是为#main 创建 BFC 的关键。

JSFiddle:http://jsfiddle.net/yujiangshui/yMFB6/

关于 BFC 的更多信息:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context