Question

我遇到了问题。这是我的代码：

＆＃13;

* {
  -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;
}

＆＃13;

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

＆＃13;

溢出效果很好，直到#sidebar低于#content，但当#sidebar更高时，它会削减部分#sidebar内容（显然）。

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

我想在它们下面添加一个页脚，我无法弄明白。

当我添加页脚以清除它时，它显然是清晰的浮动元素，而不是绝对的。

我可以将#sidebar更改为浮动并使用#content的css计算但它在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>

Answer 2

<强>解

好的，我想出了如何让它发挥作用。我不想使用这种解决方案，但我找不到其他任何东西：

如果您遇到类似问题：

#content和#sidebar现在正在使用浮点数。 #sidebar的固定宽度为300px和#content 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);
}

}）;

感谢所有人的兴趣，祝你有个美好的一天。

绝对边栏比内容clearfix更高？

2 个答案: