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

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

0 голосов
/ 20 февраля 2012

Итак, я делаю сайт для своего друга, который является юристом. Он дал мне ссылку на другой сайт, макет которого ему понравился, и спросил, могу ли я «сделать его похожим на этот». Этому ссылочному сайту, вероятно, 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 Ответ

1 голос
/ 20 февраля 2012

Во-первых, я не предлагаю использовать min-height: 100% для чего-либо. Просто используйте высоту: 100%. min-height предполагается использовать в основном для значения в пикселях или em. использование% с 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>

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

...