網站內容的擴展和收縮

Question

我正在嘗試創建一個簡單的全屏站點，其中邊欄的寬度是恆定的，但是“站點內容”區域會根據您的瀏覽器寬度而擴展和收縮。

這是兩張可視化我正在嘗試做的圖片：

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>

有任何想法嗎？

Answer 1

每當我建立響應式網站時，這都是一個很好的基礎教程。 （這包括建立一個站點以擴展以及與移動設備的所有合約）

http://webdesignerwall.com/tutorials/sensitive-design-in-3-steps

干杯。

Answer 2

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

Answer 3

嘗試這個：

#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％，並包括填充（和/或邊框）。