Ответ 1
чтобы установить высоту заголовка и нижнего колонтитула, вы должны установить ее в своем стиле, а также заполнение и запас .content(это отрицательная версия)
Полная высота и ширина ширины 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 должны быть указаны в определенном порядке, что плохо для поисковой оптимизации и для чтения с экрана; это, однако, не важно для предполагаемого веб-приложения.
/Фрэнк
Ответы
Ответ 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:
и вывод в IE8:
Я тестировал это с помощью 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.