CSS限制網站的寬度

我正在嘗試創建一個乾淨的跨瀏覽器管理模板。我編了一個側邊欄導航，然後是主要內容區域。然而，我遇到了問題，因爲它似乎像我在主要區域（白色）的內容不是一直延伸到整個範圍。CSS限制網站的寬度

代碼：http://jsfiddle.net/spadez/Ct5jx/5/

前瞻：http://jsfiddle.net/spadez/Ct5jx/5/embedded/result/

表應服用了白色的內容區域的整個寬度。任何人都可以向我解釋如何在不破壞佈局的情況下解決這個問題。

這是可能導致該問題的代碼：

#framecontent { 
    position: absolute; 
    width: 200px; 
    height: 100%; 
    overflow: hidden; 
    background-color: #34495E; 
} 
#maincontent { 
    position: fixed; 
    left: 200px; 
    overflow: auto; 
}

任何幫助，將不勝感激。

詹姆斯

來源

2014-04-17 Jimmy

而不是使用絕對和固定定位我會使用以下設置的（應該從IE8的所有瀏覽器中運行起來）：

HTML

<div class="wrapper"> 
    <div class="left"> 
     left stuff 
    </div> 
    <div class="right"> 
     right stuff 
    </div> 
</div>

CSS

html, body {height: 100%; max-height: 100%; padding:0; margin:0;} 
.wrapper {display:table; width:100%; height:100%;} 
.wrapper > div {display:table-cell;} 
.wrapper .left {width:200px; background-color:#34495E}

Example

你可以添加一個min-width到.wrapper所以右欄不會收縮規模下面你要

If you need it to work with ie 7, try this

來源

2014-04-17 11:07:57 Pete

我能問的兼容性的這個是什麼？它會是IE8 +嗎？感謝您的幫助，順便提一下 – Jimmy

是的，第一個應該在ie8 plus中工作，第二個應該是ie7 plus – Pete

假設IE8 +很好，你會推薦第一個解決方案作爲更清潔，更靈活的解決方案，還是事實上的你的第二個解決方案更好？ – Jimmy

CSS限制網站的寬度

回答

相關問題