网站内容的扩展和收缩

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