Больше проблем HTML/CSS [min-] высоты

Поэтому я делаю сайт для своего друга, который является юристом. Он дал мне ссылку на другой сайт, макет которого ему понравился, и спросил, могу ли я "сделать его похожим на этот". Этому ссылочному сайту, вероятно, 10 лет, и он состоит из вложенных 5-уровневых таблиц, поэтому я решил использовать CSS как хороший веб-разработчик. Теперь проблема в том, что он хочет макет из двух столбцов с заголовком, но тот, в котором один столбец перекрывает заголовок, а другой - нет. Я выложил сайт так:

<html style="min-height: 100%">
<head>...</head>
<body style="min-height: 100%">
  <div id="left" style="height: 100% !important">
    ...stuff...
  </div>
  <div id="header">
    ...stuff...
  </div>
  <div id="right" style="height: 100% !important">
    ...stuff...
  </div>
</body></html>

Все использует относительное позиционирование и процент или автоматическую высоту / ширину. Теперь главная проблема заключается в том, что и #left, и #right, как и ожидалось, имеют высоту, равную 100% страницы. Проблема в том, что #right div помещается внизу #header div, который находится прямо над ним, поэтому в нижней части страницы есть дополнительное пространство, которое занято только #right div. Это можно обойти? Я подумал об изменении стиля #header, чтобы получить процентную высоту, и вычесть его из высоты #right, но мне это кажется глупым (поверх которого он, вероятно, сломает IE).

Заранее спасибо!

Источник

1 ответ

Решение

Во-первых, я не предлагаю использовать min-height: 100% для чего-либо. Просто используйте высоту: 100%. min-height предполагается использовать в основном для значения в пикселях или em. использование% with min-height побеждает цель, вы не можете иметь минимальную высоту, равную проценту вашего экрана.

Я бы использовал систему сетки 1140. Он прост в использовании, очень гибок и может сделать ваш макет простым и быстрым в разработке.

Используя систему координат 1140, попробуйте это:

<div class="container">   
    <div class="row">
        <div class="twelvecol">
            <p>Header area!!!!</p>
        </div>
    </div>
</div>
<div class="container">   
    <div class="row">
        <div class="sixcol">
            <p>left column</p>
        </div>
        <div class="sixcol last">
            <p>right column</p>
        </div>
    </div>
</div>

Ну вот, проблема решена.

Источник
Другие вопросы по тегам