导航后CSS 2列布局中断

虽然我确信这个问题已经得到解答 - 并且很抱歉问 - 但是我一直无法找到任何我能理解的东西（对不起，我的知识库仍然非常有限）。导航后CSS 2列布局中断

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

已经得到左边和内容栏“内容”导航栏“导航”，但遗憾的是，当达到导航栏的末尾，内容为“弯曲”周围。我试过了最小高度，如果我设置了一个特定数量的像素（即570像素），但是我需要多个CSS - 也可以使用重复图像来获得小提琴。

了代号为包装，导航和内容如下所示：

#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*/ 
    }

会有人能帮助我吗？我开始把我的头发拉出来.. 另外，我有点害怕把它全部分开，因为我也设法在右下方得到一个图像，这也是相当棘手..

Your帮助真的很感激。

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

来源

2013-07-21 user2604463

如果

不浮动，然后将#content设置为overflow：隐藏时没有高度或宽度值。我应该使用空间左侧导航。它与布局有关，但我不知道英文中的正确名称。如果任何人都可以改进此提示，那就太好了:) –

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

这将绝对将导航定位在包装的左上角，并且内容的填充将使主要位移出导航的方向。我没有完全检查，但我很确定，那样做。

祝你好运！

来源

2013-07-21 17:49:14

尝试预约与#content{margin-left:200px}留下空间，默认情况下删除该width将努力扩大100％，你可以看到here和榜样。

来源

2013-07-21 19:04:26

导航后CSS 2列布局中断

回答

相关问题