有没有办法可以给div增加20％的宽度，宽度的余数用CSS给另一个div

Question

我有以下简单的HTML：

<article id="root-view">
   <div id="menu-view">
      x
   </div>
   <div id="content-view">
      y
   </div>
</div>

我将菜单视图的样式设置为宽度：20％，内容视图宽度：80％

我现在想给出菜单视图：width：40rem并将余数分配给内容视图。

有没有办法可以用CSS做到这一点？我没有看到可用于内容视图宽度的设置？请注意，我们使用的是IE9及更高版本的浏览器。

Answer 1

您可以使用calc()将#content-view的宽度设为100%减去40rem。

jsFiddle example - 全屏example可能效果更好。

#content-view {
    width:calc(100% - 40rem);
}

这相当于剩余空间。

---

或者，您可以使用CSS表格：

jsFiddle example - 全屏example

#root-view {
    display:table;
    width:100%;
}
#menu-view {
    display:table-cell;
    width:40rem;
}
#content-view {
    display:table-cell;
}

Answer 2

试试这个

#content-view { 
float:right;
margin-left:20%;
width:80%; }

#menu-view{
float:left;
margin-right:80%;
width:20%; }