Есть ли способ, которым я могу дать 20% ширины div, а оставшаяся часть ширины - другому div с CSS

У меня есть следующий простой HTML:

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

</code> <p> Я установил стиль меню-вида в ширину: 20% и контент-вид в ширину: 80%</p> <p> Я хотел бы теперь предоставить представление меню: width: 40rem и оставить остаток, выделенный для содержимого.</p> <p> Есть ли способ, которым я могу это сделать с помощью CSS? Я не видел параметр, который мог бы использовать для ширины содержимого? Обратите внимание, что мы используем браузеры IE9 и выше.</p> </article>
2 ответа

Вы можете использовать calc() чтобы установить ширину #content-view на 100% вычитаемую на 40rem.

Пример jsFiddle - полноэкранный пример может работать лучше.

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

Это эквивалентно оставшемуся пространству.

Кроме того, вы можете использовать таблицы CSS:

Пример jsFiddle - полноэкранный пример

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


Попробуй это

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

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

licensed under cc by-sa 3.0 with attribution.