Структура сайта
Вложений: 1
Привет, подскажите как реализовать такую модель:
Нужно что б "хедер" и "футер" были прижаты соответственно к верхней и нижней части экрана (не fixed) да так что б при удалении центральной части "контент" они так и оставались прижатыми. Помогите Христа ради. |
А если контент больше оставшейся части, подвал опускаться должен или контент под него залазить?
|
Ответ на вопрос
Должен опускаться
|
Основные блоки сайта head, content, footer должны быть самостоятельными. То есть при удалении какого-либо блока верстка не должна распадаться. При удалении блока content верхняя и нижняя части макета должны быть прижаты к верху и к низу окна браузера соответственно.
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
html, body {
width: 100%; height: 100%;
margin: 0;
}
body {
display: grid;
grid-template-rows: auto 1fr auto;
}
header {
grid-row: 1;
background: yellowgreen;
}
main {
grid-row: 2;
background: gold;
/*для примера изменение размера*/
overflow: auto;
resize: vertical;
}
footer {
grid-row-end: -1;
background: yellowgreen;
}
</style>
</head>
<body>
<header>header</header>
<main>сontent</main>
<footer>footer</footer>
</body>
</html>
|
Ты гений, спасибо.
|
| Часовой пояс GMT +3, время: 21:36. |