CSS-макет полной высоты и полной ширины
Я ищу способ создать макет только для CSS (без JavaScript) с 5 областями, которые выглядит так: A, B, C должны иметь одинаковую высоту; и H и F должны иметь одинаковую ширину. Т.е. между регионами не должно быть пропусков, кроме фиксированной маржи. Элементы внутри региона должны знать размер своих родителей; это означает, что если я поместу
<textarea style="width:100%;height:100%">Just a test</textarea>
внутри области, он будет распространяться на всю ширину и высоту области. В правой части окна браузера не должно быть полосы прокрутки (поскольку высота H, C и F в точности соответствует высоте клиентской области браузера).
Это очень легко сделать, если вы используя Я знаю, что есть рабочие группы W3C, которые работают над расширением стандарта CSS с помощью функций, которые сделали бы приведенный выше макет очень простым реализовать. Эти стандартные расширения, однако, в настоящее время не реализованы большинством браузеров; и мне нужно решение, которое работает с текущими браузерами. Я просматривал множество веб-страниц, содержащих образцы макетов CSS, но ни одна из них не может сделать то, что я описал выше. Большинство из этих макетов либо не в полный рост, или столбцы имеют разную высоту, или они требуют JavaScript. Поэтому мой вопрос: возможно ли создать макет выше, используя только CSS ( нет JavaScript, нет искусственных столбцов, нет РЕДАКТИРОВАТЬ: На основе решения, предоставленного Гилшемом, мне удалось написать пример страницы, которая генерирует желаемый макет только для CSS (протестировано с Firefox 3.5.5 и IE8): Одним из недостатков является то, что div должен быть указан в определенном порядке, что плохо для поисковой оптимизации и для программ чтения с экрана; это, однако, не важно для предполагаемого веб-приложения. / Frank , чтобы сделать макет. Но я продолжаю читать, что использование таблиц для форматирования - это плохо, и CSS - это путь.
<таблица > )? Конечно, решение должно работать с современными веб-браузерами. <!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>
0 ответов
Похожие вопросы: