jquery - 绝对侧边栏比内容 clearfix 高？

Question

我有一个问题。这是我的代码:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#wrapper {
  overflow: hidden;
  position: relative;
}
#content {
  float: left;
  display: block;
  width: 100%;
  padding-right: 320px;
  overflow: hidden;
  position: relative;
  background-color: red;
}
#sidebar {
  position: absolute;
  background-color: green;
  top: 0;
  right: 0;
  width: 300px;
  overflow: hidden;
}

<div id="wrapper">
  <div id="content">content</div>
  <div id="sidebar">sidebar</div>
</div>
<!--end wrapper-->

在 #sidebar 低于 #content 之前，Overflow 工作得很好，但是当 #sidebar 更高时，它削减了我的部分 #sidebar 内容(很明显)。

我试图将它们都设置为最高的高度，但结果很悲惨 - 它给了我一些宇宙高度(可能是因为一个是绝对的？)

我想在它们下面添加一个页脚，但我想不通。

当我添加页脚以清除两者时，显然 float 元素不是绝对的。

我可以将 #sidebar 更改为 float 并为 #content 使用 css calc，但它在 IE8 中不起作用。

我可以使用 $('#content').css('width', '100%').css('width', '-=320px'); 但它不起作用？不知道为什么 - 它减去一些值但不是 320px

我应该怎么做？

Answer 1

编辑(第二个答案)

Fiddle using display:table;

CSS

#header {
    background:orange;
}
#wrapper {
 display:table;
}
#content {
  display:table-cell;
  width:100%;
  background: red;
}
#sidebar {
 display:table-cell;
 background: green;
}

#sidebar-inner {
 width:300px;
}
#footer {
    background:blue;
}

HTML

<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>  

这是一个通过 css flex 的解决方案。 Fiddle

这是另一个有更多内容和标题的 Fiddle 2

CSS

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

HTML

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