2

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

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

在左侧有一个导航栏“nav”和一个内容栏“内容”，但不幸的是，当到达导航栏的末尾时，内容“弯曲”在它周围。Hve 尝试过 min-height，如果我设置特定数量的像素（即 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*/
    }

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

您的帮助将不胜感激。

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

4

2 回答 2

0

Try reserving that left space with #content{margin-left:200px} and remove the width by default it will try to expand 100%, you can see here and example.

于 2013-07-21T19:04:26.640 回答
0

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

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

祝你好运！

于 2013-07-21T17:49:14.733 回答