Всем привет. Есть несколько вопросов по использованию display: table;
- Рационально ли делать верстку на основе display: table?
- Как объединять ячейки внутри элемента с display: table-row?
- Почему header c классом .row в коде ниже не заполняет всю ширину таблицы?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
width: 100%;
height: 100%;
}
.table {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
.wrapper {
width: 100%;
height: 100%;
padding-bottom: 70px;
}
header.row {
width: 100%;
height: 50px;
background: silver;
border-bottom: 20px solid #fff;
}
aside,
section {
display: table-cell;
padding: 20px;
}
section {
padding-right: 20px;
overflow: auto;
border-right: 1px solid silver;
}
aside {
width: 300px;
}
footer {
height: 50px;
margin-top: -50px;
border-top: 1px solid silver;
background: #f5f5ff;
}
<div class="wrapper table">
<header class="row">
<div>Почему header.row не заполняет всю ширину таблицы</div>
</header>
<div class="row">
<section class="cell"></section>
<aside class="cell"></aside>
</div>
</div>
<footer></footer>
table
. Это что то вроде того, что если бы вы писали наphp
5 лет, а потом вам сказали, что это никому не нужно, кроме "бедных" фирм, заказчик которых не готов выплатить больше денег за решение "шаблонной" задачи, думаю вы бы настояли на том, что php это хорошо, т.к. вы не готовы перешагнуть через себя и перейти наruby
,python
илиnode.js
.