Html 有没有一种方法可以让一个div有20%的宽度，而另一个div有CSS的宽度

我有以下简单的HTML：

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

x
Y

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

现在我想给出菜单视图：width:40rem，并将剩余部分分配给content视图

有没有一种方法可以用CSS实现这一点？我还没有看到可用于内容视图宽度的设置？请注意，我们使用的是IE9及以上浏览器。

您可以使用将

内容视图的宽度设置为
100%
减去
40rem

-全屏可能会更好

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

这相当于剩余的空间


或者，您可以使用CSS表：

-全屏

试试这个

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

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

给根视图指定宽度。和菜单视图：40rem。内容视图将获得其余部分。好吧，你是说我不需要使用calc（）？用你的小提琴我只看到一个红色区域和下面的另一个区域。它似乎没有显示任何宽度。@SamanthaJ这是因为结果窗口小于
40rem
。请使用
4rem
查看此示例。。谢谢你，乔希。我会试试这个。我的同事建议我使用CSS表格。你认为这也是一个好的选择吗？
#content-view { 
float:right;
margin-left:20%;
width:80%; }

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