Я пытаюсь найти правильный способ выложить эту страницу с помощью css, но с некоторыми проблемами. HTML выглядит следующим образом:CSS Макет страницы - divs move on resize
body {
\t background-color: orange;
}
header {
\t display: block;
\t text-align: right;
\t width: 100%;
\t height: 50px;
}
.mainWrapper {
\t width: 100%;
}
nav {
\t border: 1px solid black;
\t float: left;
\t padding-top: 20px;
\t width: 20%;
}
nav ul li {
\t width: 100%;
\t text-align: center;
\t margin-bottom: 10px;
\t list-style-type: none;
\t height: 75px;
\t border: 1px solid black;
}
content {
\t float: right;
\t width: 65%;
\t padding: 100px;
\t background-color: white;
\t border-radius: 10px;
\t border: 1px solid black;
}<!DOCTYPE html>
<html>
<head>
\t <link rel="stylesheet" type="text/css" href="style.css">
</style>
</head>
<body>
<header>Title</header>
<div class="mainWrapper">
\t <nav>
\t \t <ul>
\t \t \t <li>Link 1</li>
\t \t \t <li>Link 2</li>
\t \t \t <li>Link 3</li>
\t \t \t <li>Link 4</li>
\t \t </ul>
\t </nav>
\t <content>blah blah blah</content>
</div>
</body>
</html>Что я и добиваюсь является 100% ширины заголовка сверху. Под ним слева расположено навигационное меню шириной 20%. Тогда сразу справа от этого навигатора находится основная область содержимого, которая занимает оставшуюся ширину страницы.
Проблема заключается в том, что основная область содержимого смещается под навигационное меню, когда окно браузера становится меньше. Странно, что он делает это, потому что я думал, что область содержимого просто изменит размер, потому что она установлена в% ширины.
Также, как наилучшим образом гарантировать, что и навигационное меню, и область содержимого занимают остальную часть пространства браузера по вертикали? Я попытался установить высоту: 100% на них (после установки высоты тела на 100%), но она простирается чуть чуть ниже нижней части страницы и заставляет полосу прокрутки отображаться вверх
это работает. не знал, что вы можете делать вычисления в css. благодаря – Simon