Jquery 绝对边栏比内容clearfix高？

我有个问题。这是我的代码：

*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
#包装纸{
溢出：隐藏；
位置：相对位置；
}
#内容{
浮动：左；
显示：块；
宽度：100%；
右边填充：320px；
溢出：隐藏；
位置：相对位置；
背景色：红色；
}
#边栏{
位置：绝对位置；
背景颜色：绿色；
排名：0；
右：0；
宽度：300px；
溢出：隐藏；
}

内容
边栏

编辑（第二个答案）

CSS

HTML

HTML

内容
边栏
页脚

解决方案

好吧，我知道怎么做了。 我不想使用这种解决方案，但我找不到其他解决方案，因此：

如果您有类似问题：

#内容

和

#侧栏

现在处于浮动状态。

#边栏

的固定宽度为

300px

和

#内容

100%

我做了这个：

$(window).on('load resize', function () {
if ($(document).width() < 970) {
    var $left = $('#content_main');
    $left.css('width', '100%').width($left.width() - 320);
}
else {
    var $left = $('#content_main');
    $left.css('width', '970px').width($left.width() - 320);
}

$（窗口）.on（'load resize'，函数（）{
if（$（文档）.width（）<970）{
var$left=$（“#content_main”）；
$left.css（'width'，'100%'）.width（$left.width（）-320）；
}
否则{
var$left=$（“#content_main”）；
$left.css（'width'，'970px'）.width（$left.width（）-320）；
}

}))

---

感谢大家的关注，祝大家过得愉快。

您想实现什么目标？你想要什么样的结构？即使绝对边栏高于浮动内容，我还是想在#wrapper下放上清除的页脚。为什么不在包装的两个内部元素上使用绝对定位并消除浮动呢？事实上，我想我明白你现在的目标了。这可能更适合flex css。不幸的是，它不能解决我的问题，但谢谢//编辑Flex在ie8和IE9上不起作用谢谢ViDesignz，但是Flex在ie8和IE9上不起作用，所以这对我来说不是一个解决方案。那么您可能必须使用表或将显示设置为表。虽然IE8和IE9总共只占用户的1%…伙计，在其中添加JS是完全没有必要的…但每个人都有自己的想法。我在我的答案中添加了第二个解决方案，跨浏览器兼容。再次感谢ViDesignz，但我以前在表上尝试过，它在一开始就成功了，但我正在处理非常复杂的项目，而表在我填充内容后没有完成工作。再次感谢你的帮助。哦，好的。我不确定当添加内容时，我的第二个解决方案将如何“中断”。祝你好运。

<div id="header">Header</div>
<div id="wrapper">
  <div id="content">Content</div>
  <div id="sidebar">
      <div id="sidebar-inner">
        Sidebar  
      </div>      
  </div>  
</div>
<div id="footer">Footer</div>  

#wrapper {
  display:flex;
}
#content {
  flex-grow:1;
  background: red;
}
#sidebar {
  flex-grow:0;
  background: green;
  width: 300px;
}
#footer {
  background:blue;
}

<div id="wrapper">
  <div id="content">content</div>
  <div id="sidebar">sidebar</div>  
</div>
<div id="footer">Footer</div>  

$(window).on('load resize', function () {
if ($(document).width() < 970) {
    var $left = $('#content_main');
    $left.css('width', '100%').width($left.width() - 320);
}
else {
    var $left = $('#content_main');
    $left.css('width', '970px').width($left.width() - 320);
}