设置内联块元素的宽度，CSS

Question

我在将两个div并排放置时遇到问题。 左div（sidebar）设置为固定宽度，我希望右div（“ content”）占据右侧的剩余空间。 目前，我可以将右侧的div设置为固定宽度。 演示我想要完成此操作而无需在侧边栏上设置左边距。

谢谢

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以便占用剩余空间：

演示

编辑：

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

Answer 2

要使用内联块吗？

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

我们可以这样做，并使用calc(100% - 240px)固定边栏，以从#content的宽度中删除边栏的宽度。

• 像这样使用div： <div id="sidebar"></div><div id="content">fff</div>可以防止内联间隙。 更多信息在这里 。

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

浏览器支持 ：当然，请注意使用calc() -IE 9 +的浏览器兼容性 。 我们可以使用未优化的后备宽度为老版本浏览器，或者，如果真的需要 ，我已经包含了一个基本的jQuery calc()回退，将设置宽度如果calc()不支持。
jQuery的后备源于此答案 。 我添加了宽度检查，因此它仅在宽度太小时才运行。 如果您仍然包含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>