Сейчас сверстал простенькую страницу-шаблон.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>absolute</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<article>
article
</article>
<nav>
nav
</nav>
<aside>
aside
</aside>
<header>
header
</header>
<footer>
footer
</footer>
</body>
</html>html, body {
backgroung-color: #fff;
font-family: Helvetica, sans-serif;
color: #000;
overflow: hidden;
margin: 0;
padding: 0;
}
header {
background-color: #555;
position: absolute;
top: 0;
width: 100%;
height: 10em;
}
article {
background-color: #666;
position: absolute;
top: 10em;
left: 25%;
right: 25%;
width: 50%;
height: 40em;
}
nav {
background-color: #888;
position: absolute;
left: 0;
top: 10em;
width: 25%;
height: 40em;
}
aside {
background-color: #888;
position: absolute;
right: 0;
top: 10em;
width: 25%;
height: 40em;
}
footer {
background-color: #555;
position: absolute;
bottom: 0;
height: 10em;
width: 100%;
}Вопроса два. Первый: такая вёрстка нормальна или в приличном обществе за такое бьют? Второй: как сделать (желательно без js) так, чтобы у article, aside и nav высота подстраивалась под размер экрана (height: 100%)?
UPD: я написал костыль на jquery, покритикуйте:
$(document).ready(fit);
$(window).resize(fit);
function fit() {
var height = $(document).height() - $("header").height() - $("footer").height();
$("nav, aside, article").height(height);
}
