Css 可变内容宽度固定边栏宽度布局

我在论坛上搜索过，但找不到问题的确切答案。我想在上调整我的博客布局，使内容区域的宽度灵活，在浏览器更改宽度时可进行调整，而无需将侧边栏推到底部

它目前是一个固定宽度的布局

我玩过的主要风格有：

#wrapper {
width:960px;
margin:0 auto;
}

#content {
padding:25px 0;
}

section {
float:left;
width:660px;
margin-right:20px;
}

aside {
float:left;
width:280px;
}

---

我想使剖面宽度保持动态，同时将侧边保留在窗口右侧。

将您的样式更改为此

section {
    float:left;
    width:100%;
    margin-right: -280px;
}

aside {
    float:left;
    width:280px;
}

---

将您的样式更改为此

section {
    float:left;
    width:100%;
    margin-right: -280px;
}

aside {
    float:left;
    width:280px;
}

使用定位。将#wrapper div设置为

位置：relative这将定位该div的所有子元素相对于它的位置，而不是相对于浏览器窗口的位置

现在将您的侧边放在#wrapper div的左上角

aside {
    width: 280px;
    position: absolute;
    right: 0;
    top: 0;
}

最后，为section div提供足够的填充空间，以便它仍然可以扩展和收缩，但它为边线留出了足够的空间。您希望边距等于边距的宽度（在本例中为280px）

我在JSFIDLE上举了一个例子：

额外好处：如果你真的想变得有趣，你可以设置你的#wrapper div的
max width
，这样页面就可以在这个大小内灵活地显示。如果您这样做，请确保您也设置了
最小宽度
（等于侧边的大小），以便当窗口一直缩小时，侧边不会落在包装外。
使用定位。将#wrapper div设置为
位置：relative这将定位该div的所有子元素相对于它的位置，而不是相对于浏览器窗口的位置

现在将您的侧边放在#wrapper div的左上角

aside {
    width: 280px;
    position: absolute;
    right: 0;
    top: 0;
}

最后，为section div提供足够的填充空间，以便它仍然可以扩展和收缩，但它为边线留出了足够的空间。您希望边距等于边距的宽度（在本例中为280px）

我在JSFIDLE上举了一个例子：

额外好处：如果你真的想变得有趣，你可以设置你的#wrapper div的
max width
，这样页面就可以在这个大小内灵活地显示。如果您这样做，请确保您也设置了
min width
（等于侧边的大小），以便当窗口一直缩小时，侧边不会落在包装外。
Morphius解决方案是迄今为止最好的解决方案-例如，请参阅


.blbx{
背景：蓝色；
宽度：计算（100%-100px）；
高度：50px；
显示：内联块；
垂直对齐：顶部；
文本对齐：居中；
}
.rdbx{
背景：红色；
显示：内联块；
高度：50px；
宽度：100px；
垂直对齐：顶部；
}
.环绕{
宽度：100%；
高度：50px；
}
.myimg{最大宽度：100%；
最大高度：100%；
}
Morphius解决方案是迄今为止最好的解决方案-有关示例，请参阅


.blbx{
背景：蓝色；
宽度：计算（100%-100px）；
高度：50px；
显示：内联块；
垂直对齐：顶部；
文本对齐：居中；
}
.rdbx{
背景：红色；
显示：内联块；
高度：50px；
宽度：100px；
垂直对齐：顶部；
}
.环绕{
宽度：100%；
高度：50px；
}
.myimg{最大宽度：100%；
最大高度：100%；
}

也许这样可以：

section {
    float:left;
    width:100%;
    padding-right:250px;
    height:100px;
}

aside {
    float: left;
    width: 250px;
    min-height: 100%;
}

也许这样可以：

section {
    float:left;
    width:100%;
    padding-right:250px;
    height:100px;
}

aside {
    float: left;
    width: 250px;
    min-height: 100%;
}

Nandhakumar，不确定这是否解决了我在调整窗口大小时该部分的宽度问题？Nandhakumar，不确定这是否解决了我在调整窗口大小时该部分的宽度问题？这似乎给出了最佳结果。我没有包括top:0选项，但这似乎将所有内容都移动到了窗口的顶部。我遗漏了什么吗？嘿@AjayD'Souza，只要相对定位的包装中只有两个元素是，这似乎会给出最好的结果。我没有包括top:0选项，但这似乎将所有内容都移动到了窗口的顶部。我遗漏了什么吗？嘿@AjayD'Souza只要相对定位的包装中只有两个元素是和Morpheus，将节宽度设置为100%会导致侧边栏位于内容下方，内容填充所有语言的宽度
css calc
<代码>截面{宽度：计算（100%-280px）
。它在IE8及更低版本中不起作用。多亏了Morpheus，它才起作用。我已经在Firefox上测试了它，并为旧浏览器和Opera编程了一些兼容性。Morpheus将section width设置为100%会导致侧边栏位于内容下方，而内容则填充了所有语言
css calc
的宽度。
section{width:calc（100%-280px）
。它在IE8和更低版本中不起作用。感谢Morpheus，这是有效的。我已经在Firefox上测试了它，并为旧浏览器和Opera编写了一些兼容性程序。