導航後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列布局中斷

回答

相關問題