有沒有一種方法，我可以給20％的寬度，以一個div和寬度的其餘部分到另一個DIV與CSS

Question

我有以下簡單的HTML：

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

我設置菜單視圖的風格寬度：20％和內容視圖到寬度：80％

我想現在給菜單視圖：寬度：40rem和其餘的分配給內容視圖。

有沒有一種方法可以用CSS做到這一點？我還沒有看到可用於content-view寬度的設置？請注意，我們正在使用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%; }