Question

我觉得这个问题已得到解答，但我搜索并搜索过，似乎没有答案处理动态主要内容宽度。

我只想要这个场景：

| - | nav | - |主要内容| - |

其中nav是DIV，主要内容是DIV，两者都放在另一个宽度为100％的DIV容器中。 - DIV之间的距离很小，边缘。

nav的固定宽度为300px，主要内容为＃34; div应该总是占用剩余的可用空间（以填充100％的父div） - 不使用JavaScript。

此外，我想在每个DIV（导航，主要内容）的左右边缘留出一些边距，以便它们和＆＃34;浏览器边框＆＃34; / body之间有一些空间。

我试验了桌子，桌子，但是边界坍塌让我疯狂，所以我要回到上帝那里了“漂浮：离开＆＃34;和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') */

所以现在的问题是，如何制作＆＃34;主要内容＆＃34; （#main）填充父级的其余部分（#container）。如果我使用100％的宽度，那么100％当然是父级的全宽，而div将在＆＃34; nav＆＃34; DIV。如果我使用＆＃34; auto＆＃34;同样的事情发生了。它当然可以工作，如果我传入固定宽度，例如以像素为单位，但我事先并不知道正确的像素，并使用JS来计算这对我来说有点奇怪。

我已经看到了一个解决方案，其中＆＃34; nav＆＃34;被放在＆＃34; main＆＃34;但这会导致边际问题。尝试插入一个边距，以便在另一个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

Answer 2

例如：

#container {
    width: 100%
    position: relative;
}
#nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
}
#main {
    margin-left: 320px;
}

JSFIDDLE

两个列布局，其中主要内容DIV的宽度是流动的（使用所有可用空间为100％）

2 个答案: