在内联块元素CSS上设置宽度

Question

我遇到了两个div并排的问题。左div（侧边栏）设置为固定宽度，我希望右侧div（“内容”）占据右侧的剩余空间。目前，我可以将右侧div设置为固定宽度，在右侧。 Demo我希望在没有在侧边栏上设置边距的情况下完成此操作。

由于

HTML

<div style="height: 100%">
  <div id="Header"></div>
     <div id="container">
        <div id="sidebar"></div>
        <div id="content">fff</div>
 </div>

Answer 1

您只需要移除float:left;上的#content，以便占用余下的空间：

<强> DEMO

编辑：

如果您想在侧边栏上添加透明背景，则需要将left-margin:240px添加到#content，以便内容不会通过侧边栏显示（演示更新）

Answer 2

想使用内联块？

在标题中指定display: inline-block。

我们可以执行此操作并使用calc(100% - 240px)修复侧边栏，以从#content的宽度中移除侧边栏宽度。

• 拥有这样的div：<div id="sidebar"></div><div id="content">fff</div>可以防止内联间隙。 More information here

• 我已在height: calc(100% - 30px)上删除了#container的滚动条，以移除标题高度。对于旧的浏览器后备不够重要。

浏览器支持：当然，请注意browser compatibility使用calc() - IE 9 +。我们可以为旧浏览器使用未经优化的后备宽度，或者，如果真的需要，我已经包含了一个基本的jQuery calc()后备，如果calc()不是，则会设置宽度支持的。
jQuery后备是from this answer。我添加了宽度检查，因此它只会在宽度太小时运行。如果你还包括jQuery库，那就特别好。

实施例

注意vertical-align: top以保持内联块div垂直正确定位。

// calc fallback - optional

var checkWidth = $('#outer').width() - 240;
var contentWidth = $('#content').width();

if (checkWidth !== contentWidth) {
  alert('no calc :(');
  $('#content').css('width', '100%').css('width', '-=240px');
  $(window).resize(function() {
    $('#content').css('width', '100%').css('width', '-=240px');
  });
} else {
  alert('has calc :D !');  
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
#Header {
  height: 30px;
  background-color: yellow;
}
#container {
  height: calc(100% - 30px);
  width: 100%;
}
#sidebar {
  background-color: orange;
  height: 100%;
  opacity: 0.3;
  width: 240px;
  display: inline-block;
  vertical-align: top;
}
#content {
  background-color: blue;
  height: 100%;
  width: calc(100% - 240px);
  display: inline-block;
  vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="height: 100%" id="outer">
  <div id="Header"></div>
  <div id="container">
    <div id="sidebar"></div><div id="content">fff</div>
  </div>
</div>