Я нашел много дискуссий и вопросов, связанных с этим вопросом в Интернете, однако ни один из них, похоже, не соответствует моему делу, и решения очень специфичны для определенной ситуации.
У меня есть элемент header
с высотой 100px
в верхней части страницы. У меня есть элемент div#sidebar
, положенный слева с шириной 250px
, и, наконец, элемент div#main
также оставил слева.
Высота html
, body
и div#sidebar
равна 100%
.
Моя цель состоит в том, чтобы получить div#sidebar
до конца вплоть до нижней части страницы независимо от размера браузера или размера содержимого. Очевидно, что если контент длиннее высоты видимой страницы, он должен действовать нормально и проталкиваться за конец страницы, вводя полосы прокрутки.
Однако, поскольку он стоит сейчас, кажется, что высота страницы была рассчитана как 100% + 100px
, вводя полосы прокрутки, даже если нет контента, который бы нажал div#sidebar
вниз. До сих пор я не нашел решений, которые работают, или, возможно, я пропустил это или испортил решение; независимо от того, я был у него уже более часа, и я собираюсь вырвать мои волосы.
Есть ли метод, не поддерживающий JavaScript, чтобы он работал правильно, чтобы остановить добавление высоты header
к 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;
}