Я пытаюсь создать настройку страницы с двумя областями навигации (сверху и слева), подобными этой:
Светло-серая область - это то место, где будет находиться основное содержание каждой страницы. Слева находится второе навигационное меню, которое должно доходить до нижней части экрана и совпадать с основной областью содержимого.
Я не могу понять, как настроить их так, чтобы и левое меню, и область основного контента простирались вниз до нижней части экрана. Я использую проценты ширины, свойства float и position CSS, чтобы выровнять их рядом друг с другом (свойство display не имело никакого эффекта). Я считаю, что проблема в том, что мне нужно увеличить область основного контента на 95 пикселей, используя:
bottom: 95px;
В противном случае правый нижний угол левого навигационного меню и левый верхний угол области основного содержимого соприкасаются друг с другом по диагонали, и под областью заголовка появляется большой белый промежуток, прежде чем он достигнет светло-серой области основного содержимого.
Единственный способ, которым я обнаружил, чтобы увеличить их высоту 'до низа, это установить их высоту в пикселях, но это не совсем работает, так как я перемещаю область основного контента вверх на 95px, чтобы нижняя часть основного контента область имеет белый пробел под ним, и это даже не с левым меню навигации. Моя HTML-статья выглядит так:
<body>
<header>
<nav id="topMenu">
</nav>
<div id="titleAndUserInfo">
</div>
</header>
<nav id="leftMenu">
</nav>
<section id="main">
</section>
</body>
Навигационные теги соответствуют шаблону
Обновление
Мне удалось заставить мои CSS и HTML5 работать так, чтобы позиция была правильной, но левое навигационное меню и светло-серая область основного содержимого по-прежнему не расширялись до нижней части экрана, когда не хватает контента для сделать это автоматически. Как я могу заставить это? Установка их высоты на 100% или значение px, похоже, не работает. Вот мой HTML, CSS и результаты в Chrome.
<body>
<header>
<nav id="topMenu">
<ul>
<li><a href="/">xxx</a></li>
<li><a href="/Home/About">xxxxx</a></li>
</ul>
</nav>
<div id="titleUserLogin">
<h1>Title</h1>
Welcome <strong>test</strong>!
<a href="/Account/LogOff">Log Off</a>
</div>
</header>
<nav id="leftMenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">xxxx</a></li>
<li><a href="/">xxxx</a></li>
<li><a href="/">xxx</a></li>
<li><a href="/">xxxx</a></li>
<li><a href="/">xxxx</a></li>
<li><a href="/">xxxx</a></li>
<li><a href="/">xxxx</a></li>
<li><a href="/">xxxx</a></li>
</ul>
</nav>
<section id="main">
<p>content</p>
</section>
</body>
/* General */
body {
margin: 0;
padding: 0;
border: 0;
height: 100%;
}
/* Header */
header {
text-align: left;
float: right;
position: relative;
width: 90.5%;
}
div#titleUserLogin {
color: #fff;
background-color: #303030;
display: inline-block;
width: 100%;
}
div#titleUserLogin h1 {
display: inline;
}
div#titleUserLogin a {
text-align: right;
float: right;
}
/* Navigation menus */
nav#topMenu ul {
padding: 0 0 2px;
position: relative;
display: inline;
}
nav#topMenu ul li {
list-style: none;
display: inline;
}
nav#topMenu ul li a {
background-color: #303030;
color: #fff;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
padding: 10px 20px;
line-height: 2.8;
text-decoration: none;
}
nav#leftMenu {
background-color: #303030;
position: relative;
float: left;
width: 9%;
}
nav#leftMenu ul {
position: relative;
}
nav#leftMenu ul li {
list-style: none;
}
/* main content */
section#main {
background-color: #d7d7d7;
height: 100%;
width: 90.5%;
float: right;
height: 100%;
}
