Javascript 网站内容扩展和收缩

我正在尝试创建一个简单的全屏站点，其中侧栏的宽度是恒定的，但“站点内容”区域根据浏览器的宽度进行扩展和收缩

以下是两张图片，展示了我正在尝试做的事情：

当浏览器展开时，侧栏仍然保持其原始宽度，但“网站内容”几乎增加了一倍以填充空间

我能够让站点内容扩展的唯一方法是同时扩展侧边栏，例如：

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

#边栏{
宽度：20%；
浮动：对；
}
#网站内容{
宽度：80%；
浮动：左；
}

---

什么想法？

< P>这是一个很棒的教程，每当我建立响应网站时，我都会用它作为基础。（这包括建立一个站点，以扩展和承包所有移动设备）

干杯。

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

#边栏{
宽度：256px；/*为侧边栏使用固定宽度*/
浮动：对；
}
#网站内容{
显示：块；
浮动：左；
}

试试这个：

#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%，并使其包含填充（和/或边框）