Подтвердить что ты не робот

Полная высота и ширина ширины CSS

Я ищу способ создания CSS-only (без JavaScript) макета с 5 регионами, которые выглядят следующим образом:

   ┌────────────────────┐
   │          H         │
   ├────┬────────┬──────┤
   │    │        │      │
   │    │        │      │
   │    │        │      │
   │  A │    B   │  C   │
   │    │        │      │
   │    │        │      │
   │    │        │      │
   ├────┴────────┴──────┤
   │          F         │
   └────────────────────┘

(Вышеприведенная диаграмма будет отображаться правильно, только если ваш шрифт имеет символы рисования строки в Юникоде.)

Макет должен полностью заполнить доступное пространство в веб-браузере (как по высоте, так и по ширине). A, B, C должны иметь одинаковую высоту; и H и F должны иметь одинаковую ширину. I.e, не должно быть пробелов между регионами, за исключением фиксированного запаса. Элементы внутри региона должны знать размер своих родителей; это означает, что если я поставлю

   <textarea style="width:100%;height:100%">Just a test</textarea>

внутри области, она будет распространяться на всю ширину и высоту области. В правой части окна браузера не должно быть полосы прокрутки (поскольку высоты H, C и F точно совпадают с высотой клиентской области браузера).

Это очень легко сделать, если вы используете <table> для создания макета. Но я продолжаю читать, что использование таблиц для форматирования - это плохо, а CSS - путь.

Мне известно, что есть рабочие группы W3C, которые работают над расширением стандарта CSS с помощью функций, которые сделали бы эту схему очень простой в реализации. Эти стандартные расширения, однако, в настоящее время не реализованы большинством браузеров; и мне нужно решение, которое работает с текущими браузерами.

Я просматривал множество веб-страниц, содержащих типовые макеты CSS, но ни один из них не может делать то, что я описал выше. Большинство этих макетов либо не являются полноразмерными, либо столбцы имеют разную высоту, либо они требуют JavaScript.

Поэтому мой вопрос: возможно ли создать вышеприведенный макет, используя только CSS (без JavaScript, без подделок, no <table>)? Разумеется, решение должно работать с текущими веб-браузерами.

РЕДАКТИРОВАТЬ: На основе решения, предоставленного Gilsham, мне удалось написать образец страницы, которая генерирует желаемый макет только для CSS (тестируется с Firefox 3.5.5 и IE8):

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{
    height:100%;    
    margin:0;
    padding:0;
    border:0;
}

div{
    margin:0;
    border:0;
}

textarea {
    margin:0;
    border:0;
    padding:0;
    height:100%;
    width:100%;
}

.content{
    display:table;
    width:100%;
    border-collapse:separate;
    height:80%;
}

.Col{
    display:table-cell;
    width:30%;
    height:100%;
}

#header,#footer{
    height:10%;
    position:relative;
    z-index:1;
}

</style>
</head>
<body>
<div id="header"><textarea style="background-color:orange;">H Just a test</textarea></div>
<div class="content">
    <div id="left" class="Col"><textarea style="background-color:lightskyblue;">A Just a test</textarea></div>
    <div id="center" class="Col"><textarea style="background-color:green;">B Just a test</textarea></div>
    <div id="right" class="Col"><textarea style="background-color:lime;">C Just a test</textarea></div>
</div>
<div id="footer"><textarea style="background-color:yellow;">F Just a test</textarea></div>
</body>
</html>

Один из недостатков заключается в том, что div должны быть указаны в определенном порядке, что плохо для поисковой оптимизации и для чтения с экрана; это, однако, не важно для предполагаемого веб-приложения.

/Фрэнк

4b9b3361

ОТВЕТЫ

Ответ 1

http://jsfiddle.net/aGG3V/

чтобы установить высоту заголовка и нижнего колонтитула, вы должны установить ее в своем стиле, а также заполнение и запас .content(это отрицательная версия)

Ответ 2

Привет fmunkert (и другие здесь:),

Мне было просто любопытно, и я подумал, что хочу попробовать, поэтому я запустил свой блокнот и придумал что-то вроде этого:

<html>
    <head></head>
<body style="margin: 0px; padding: 0px; height: 100%; width: 100%; text-align: center;">
<div style="height: 100%; width: 100%;">

<div style="height:20%; width: 100%; text-align: center; background-color: orange;">H</div>

<div style="height:60%; width: 100%; display: table;">
<div style="float:left; height:100%; width: 20%; background-color: yellow;">A</div>
<div style="float:left; height:100%; width: 60%; background-color: grey;">B</div>
<div style="float:left; height:100%; width: 20%; background-color: yellow;">C</div>
</div>

<div style="height:20%; width: 100%; text-align: center; background-color: orange;">F</div>

</div>
</body>
</html>

и здесь вывод в Firefox:

Firefox Screenshot

и вывод в IE8:

IE8 screenshot

Я тестировал это с помощью Firefox 3 и IE8. Кажется, все в порядке. Это то, что вы хотели?:)

Примечание 1: Как уже упоминалось другими, это может быть непрактичным, но все же это зависит от того, что вы/ваши клиенты хотите.

Примечание 2: Если это действительно то, что вы хотели, вы можете редактировать значения высоты и ширины в соответствии с вашими потребностями, и вы должны поместить эти правила CSS в отдельный файл CSS вместо встроенных стилей в качестве лучшей практики.

Ответ 3

Причина, по которой вы не можете найти CSS, заключается в том, что спецификация CSS на самом деле не позволяет вам выполнять все эти условия, не используя хотя бы один из параметров, которые вы не хотите использовать.

Живая маска Holy Grail - это 100% CSS, но сама не соответствует вашим критериям высоты: http://www.alistapart.com/articles/holygrail/

Вы можете подделать критерии высоты нижним колонтитулом, используя этот метод: http://www.themaninblue.com/writing/perspective/2005/08/29/

В этой статье 24Ways есть метод столбцов полной высоты, использующий абсолютное позиционирование, которое решает некоторые из ваших проблем, но создает новый в том, что один из ваших столбцов всегда переполняется, если содержимое расширяется: http://24ways.org/2008/absolute-columns

Вероятно, вам нужно будет объединить ряд методов, чтобы получить что-то, что можно было бы использовать для вашей спецификации. Я бы просто использовал jquery, потому что жизнь слишком коротка для того, чтобы возиться с CSS как это, но если вы мертвы, избегая этого, тогда подготовьтесь к большому взлому.

Ответ 4

Нет простого способа получить элемент для заполнения заданной глубины точно при использовании процентных измерений.

Вы можете приблизиться к привязать нижний колонтитул к нижней части окна, а затем - если cols A и C имеют общий цвет фона, но col B фон, установите для вашего тела (или контейнер div, если есть) цвет фона, чтобы соответствовать столбцам A + C, чтобы легко заполнить пробелы ниже этих столбцов, если они короче, чем col B.