Полноразмерная боковая панель HTML / CSS
Я нашел множество дискуссий и вопросов, разбросанных по этому вопросу в Интернете, однако ни один из них, похоже, не соответствует моему случаю, а решения очень специфичны для определенной ситуации.
У меня есть элемент заголовка высотой 100 пикселей вверху страницы. У меня есть элемент div # sidebar , перемещенный влево с шириной 250 пикселей , и, наконец, элемент div # main также перемещается влево.
Высота элемента html , body и div # sidebar составляет 100% .
Моя цель - получить div # sidebar , чтобы простираться до самого низа страницы независимо от размера браузера или размера содержимого. Очевидно, что если контент длиннее, чем видимая высота страницы, он должен действовать как обычно и продвигаться за конец страницы, создавая полосы прокрутки.
Однако в нынешнем виде высота страницы рассчитывалась как ] 100% + 100px , вводятся полосы прокрутки, хотя нет содержимого, которое могло бы сдвинуть div # sidebar вниз. Пока я не нашел ни одного работающего решения, или, возможно, я его пропустил или испортил решение; несмотря на это, я занимаюсь этим уже больше часа и собираюсь вырвать себе волосы.
Есть ли способ заставить это работать должным образом, не используя JavaScript, чтобы остановить заголовок высота добавляется к 100% ?
Вот мой HTML / CSS - хотя я включил все соответствующие детали выше, это должно помочь.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Awesome Template!</title>
<link href="./stylesheet.css" rel="stylesheet" />
</head>
<body>
<header id="primary">
<h1>My Awesome Template!</h1>
</header>
<div id="sidebar">
<h1>Sidebar</h1>
</div>
<div id="main">
<h1>Main</h1>
</div>
</body>
</html>
CSS:
html, body
{
margin: 0;
padding: 0;
height: 100%;
}
body
{
background: #fff;
font: 14px/1.333 sans-serif;
color: #080000;
}
header#primary
{
width: 100%;
height: 100px;
background: #313131;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d4d4d), to(#313131));
background-image: -moz-linear-gradient(#4d4d4d, #313131);
background-image: -o-linear-gradient(#4d4d4d, #313131);
background-image: linear-gradient(#4d4d4d, #313131);
}
header#primary h1
{
margin: 0px 0px 0px 20px;
padding: 0px;
line-height: 100px;
color: #ffffff;
}
#sidebar
{
float: left;
width: 250px;
background: #ccc;
min-height: 100%;
}
#main
{
float: left;
}