网站内容的扩展和收缩

Site content expanding and contracting

本文关键字：扩展 网站      更新时间：2023-09-26

我正试图创建一个简单的全屏网站，其中的侧栏宽度不变，但"网站内容"区域会根据浏览器的宽度进行扩展和收缩。

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

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

https://i.stack.imgur.com/4Lg0E.png

当浏览器展开时，侧栏仍然保持原来的宽度，但"网站内容"几乎翻了一番以填满空间。

我能够扩展网站内容的唯一方法是也扩展侧边栏，例如：

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

有什么想法吗？

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

这是一个很棒的教程，每当我构建响应式网站时，我都会将其作为基础。（这包括建立一个网站，以扩展和合同一直到移动设备）

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

干杯。

试试这个：

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

相关文章：