导航后 CSS 2 列布局中断答案

【问题标题】：CSS 2-Column layout breaks after navigation导航后 CSS 2 列布局中断
【发布时间】：2013-07-21 15:55:16
【问题描述】：

虽然我确定这个问题已经得到解答 - 很抱歉提出问题 - 但我无法找到任何我能理解的内容（抱歉，我的知识仍然非常有限）。

我正在设计一个简单的 2 栏网站，顶部有一个横幅，底部有一个页脚。 -> 现场演示：http://jsfiddle.net/4XYWJ/1/

左侧有一个导航栏“nav”和一个内容栏“content”，但不幸的是，当到达导航栏的末尾时，内容“弯曲”在它周围。已经尝试过最小高度，如果我设置了特定数量的像素，即 570 像素，它会起作用，但是我需要多个 CSS - 而且，我似乎可以使用重复的图像来获得小提琴。

wrapper、nav 和 content 的代码如下所示：

#wrapper {
        width:90%;
        margin:20px auto;
        border-bottom: 1px dotted black;
    }

.nav {
        float:left;
        width:200px;
        min-height: 100%;
        background-image: url(img/blank.gif);
        background-repeat: repeat-y;
    }


#content {
        width: 100%;
        min-height: 570px;
        text-align: left;
        padding-top: 10px;
        background-color: #f3e8d6; /*Default bg, similar to the background's base color*/
        background-image: url("../img/tree.jpg");
        background-position: right bottom; /*Positioning*/
        background-repeat: no-repeat; /*Prevent showing multiple background images*/
    }

有人能帮我解决这个问题吗？我开始拔头发了。。另外，我有点不敢把它全部拆开，因为我还设法在右下角放了一张图片，这也很棘手..

非常感谢您的帮助。

谢谢你和最好的问候，西蒙

【问题讨论】：

如果
浮动
不浮动，则将#content设置为overflow:hidden，没有高度或宽度值。我应该使用左边的房间导航。它与布局有关，但我不知道英文的正确名称。如果有人可以改进这个技巧，那就太好了:)

标签： css navigation two-columns

【解决方案1】：

将导航更改为position:absolute; left:0; top:0; 并删除浮动，然后将padding-left:210px; 添加到内容中。最后在包装器中添加position: relative;。

它将导航绝对定位在包装器的左上角，并且内容上的填充将主要位移出导航。我还没有完全检查过，但我很确定，它会做到的。

祝你好运！

【讨论】：

【解决方案2】：

尝试使用#content{margin-left:200px} 保留剩余空间并删除width，默认情况下它将尝试扩展100%，您可以查看here 和示例。

【讨论】：