Верстка в две колонки высотой до футера

W
На сайте с 27.04.2015
Offline
29
619

Помогите выровнять колонки. Когда в одной колонке много текста то вторая колонка становится равной заполнению. Это происходит в IE и Safari-win а в Opera, Chrome, Firefox всё нормально. При увеличении масштаба в браузере происходит тоже самое.

Нужно чтобы фон колонок всегда растягивался до футера.

<!doctype html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style/styles.css">
</head>
<body>
<div class="wrapper">
<header class="header">Шапка сайта</header>
<content class="content">
<article class="article">Основной текст
<br>
<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>

Б<br>



</article>
<aside class="aside">Сайдбар
<br>
<br>

A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
Б<br>

</aside>
</content>
<footer class="footer">Подвал</footer>
</div>
</body>
</html>

* {

margin: 0;
padding: 0;
}


html, body {
height: 100%;
}

.wrapper {
display: table;
height: 100%;
margin: 0 auto;
}

.header {
width: 900px;
height:100px;
background: #F0E68C;
}
.content {
display: table-row;
wider: 900px;
min-height: 100%;
height: 100%;
}
.article {
display: table-row;
width: 600px;
min-height: 100%;
height: 100%;
background: #D2B48C;
float: left;

}

.aside {
display: table-row;
width: 300px;
min-height: 100%;
height: 100%;
background: #FFDAB9;
float: right;
}
.footer {
bottom: 0;
width: 900px;
height: 60px;
background: #B8860B;
}

D.iK.iJ
На сайте с 26.05.2013
Offline
225
#1

Использовать display: table-row; с float: right; это какая-то такая ересь, что лучше бы просто сверстали обычную таблицу!

Я правда не понимаю - как браузеры такое вообще понимают и воспринимают. Строка таблицы с обтеканием...

Что мешало сделать их table-cell, убрать обтекание и добавить шапке таблицы что-то вроде display: table-caption? :)

И да, я все еще настаиваю на обычной таблице.

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
melkozaur
На сайте с 06.04.2010
Offline
505
#2

Wooz, ничего не понять.

Что нужно? Что получается? Как нужно чтобы получалось?

А вообще - не пытайтесь такое сложное мутить с таблицами, полагая что браузеры все поймут. Таблицы - дело такое. Даже если в браузерах все ок, обязательно найдутся мобильные браузеры, в которых все не ок :)

Серверы в NL/US со скидкой 30% нашим читателям: E5-2650v4/10GB DDR4/240GB SSD/1 Gbps - от $20: https://ua-hosting.company/vps/nl SEO без компромиссов: https://seoleaks.net SEOLEAKS - продвижение сайтов: https://www.instagram.com/seoleaks
W
На сайте с 27.04.2015
Offline
29
#3
melkozaur:
Wooz, ничего не понять.
Что нужно? Что получается? Как нужно чтобы получалось?

А вообще - не пытайтесь такое сложное мутить с таблицами, полагая что браузеры все поймут. Таблицы - дело такое. Даже если в браузерах все ок, обязательно найдутся мобильные браузеры, в которых все не ок :)

Нужен макет шапка, две колонки одинаковой высоты до футера с разным фоном, прибитый футер и чтобы текст никуда не убегал и легкость к адаптации.

V
На сайте с 30.11.2010
Offline
92
#4
Wooz:
Нужен макет шапка, две колонки одинаковой высоты до футера с разным фоном, прибитый футер и чтобы текст никуда не убегал и легкость к адаптации.

ну так и используйте display:inline-block. зачем вам эти "таблицы".

Что-то слишком усложняете, в зависимости от задач, там может еще в 1н див можно обернуть и выставлять высоту в %, но вообще выставлять высоту моветон.

https://codepen.io/alexandr-rodkin/pen/mgVgKq

gribbo
На сайте с 01.03.2012
Offline
66
#5

есть хороший генератор, там подсмотрите решение колонок на всю высоту

Мой выбор хостинга (https://beget.com/p461662) \ Создаю сайты (/ru/forum/1009089)
LC
На сайте с 29.04.2015
Offline
60
#6

Не понятно что нужно, куда там текст убегает, но вот шапка, 2 колонки и футер - https://codepen.io/seolaba/pen/BEzaja

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий