我在论坛中搜索过，但无法得到问题的确切答案。我想在http://techtites.com/ 调整我的博客布局，以使内容区域的宽度灵活，当浏览器改变宽度时调整宽度，而不会将侧边栏推到底部。
目前是固定宽度布局。
我玩过的主要风格有：
#wrapper {
width:960px;
margin:0 auto;
}
#content {
padding:25px 0;
}
section {
float:left;
width:660px;
margin-right:20px;
}
aside {
float:left;
width:280px;
}
我想让 section 的宽度是动态的，同时将 aside 保留在窗口的右侧。
【问题讨论】：
也许这样可以：
section {
float:left;
width:100%;
padding-right:250px;
height:100px;
}
aside {
float: left;
width: 250px;
min-height: 100%;
}
【讨论】：
把你的样式改成这个
section {
float:left;
width:100%;
margin-right: -280px;
}
aside {
float:left;
width:280px;
}
【讨论】：
css calc。 section { width: calc(100% - 280px)。它在 IE8 及更低版本中不起作用。
到目前为止，Morphius 解决方案是最好的 - 例如，请参阅 http://codepen.io/anon/pen/wBBdgg
.blbx {
background:blue;
width: calc(100% - 100px);
height:50px;
display:inline-block;
vertical-align:top;
text-align:center;
}
.rdbx {
background:red;
display:inline-block;
height:50px;
width: 100px;
vertical-align:top;
}
.surround {
width: 100%;
height:50px;
}
.myimg { max-width:100%;
max-height:100%;
}<div class='surround'>
<div class="blbx" ><img class='myimg' src="http://assets.cdpn.io/assets/logos/codepen-logo.svg">
</div><div class="rdbx"></div></div>【讨论】：
使用定位。将您的#wrapper div 设置为position: relative; 这将相对于 it 而不是浏览器窗口定位该 div 的所有子元素。
现在将您的侧边放置在#wrapper div 的左上角
aside {
width: 280px;
position: absolute;
right: 0;
top: 0;
}
最后，为部分 div 提供足够的填充，以便它仍然可以扩展和收缩，但它为旁边留出了足够的空间。您希望内边距等于边的宽度（在本例中为 280 像素）。
section {
padding-right: 280px;
}
我在 jsFiddle 上举了一个例子：jsfiddle.net/2e9HM/6/
奖励：如果你真的想变得花哨，你可以设置你的#wrapper div 的max-width，这样页面在那个大小内是灵活的。如果您这样做，请确保您也设置了 min-width（等于您的侧边的大小），以便在窗口一直缩小时侧边不会落在 #wrapper 之外。
【讨论】：
section {
float:left;
width:660px;
margin-right:20px;
height:100px;
}
aside {
height:100px;
margin-left: 670px;
}
【讨论】：