網站內容擴展和收縮

我正在嘗試創建一個簡單的全屏網站，其中側欄是恆定寬度，但「網站內容」區域根據您的瀏覽器寬度展開和收縮。網站內容擴展和收縮

這裏有兩個畫面可視化什麼，我試圖做的：

http://i.stack.imgur.com/AKBme.png

http://i.imgur.com/ct3RN.png

當瀏覽器擴展側欄仍保留了其原有的寬度，但「網站內容「幾乎翻了一番，以填補空間。

我已經能夠讓網站內容擴大的唯一方法是也有側邊欄，例如擴大：

<style> 
#sidebar{ 
width:20%; 
float:right; 
} 
#sitecontent{ 
width:80%; 
float:left; 
} 
</style>

任何想法？

來源

2012-02-20 user1210772

<style> 
#sidebar{ 
    width: 256px; /* Use a fixed width for your sidebar. */ 
    float: right; 
} 
#sitecontent{ 
    display: block; 
    float: left; 
} 
</style>

來源

2012-02-20 20:53:52 Greg

這是一個很好的教程，我用它作爲基礎，每當我去構建響應式網站。（這包括建立一個網站，以擴大以及合同一直到移動設備）

乾杯。

來源

2012-02-20 20:53:07 Downpour046

試試這個：

#sidebar { 
    float: left; width: 200px; /* or whatever */ 
} 
#sitecontent { 
    width: 100%; 
    box-sizing: border-box; // also -webkit-box-sizing, -moz-box-sizing, maybe -o-box-sizing 
    padding-left: 200px; /* same as sidebar */ 
}

通過使用「邊界箱」盒子大小—將不能在IE瀏覽不到8 —您可以將內容框的寬度設置爲100％並有包括填充（和/或邊框）。

來源

2012-02-20 20:56:29 Pointy

網站內容擴展和收縮

回答

相關問題