HTML/CSS полная высота боковая панель

Я нашел много дискуссий и вопросов, связанных с этим вопросом в Интернете, однако ни один из них, похоже, не соответствует моему делу, и решения очень специфичны для определенной ситуации.

У меня есть элемент 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;
}

Ответы

Ответ 1

Вы ищете печально известную технику "faux-columns". Здесь учебник.

В принципе, вы не можете сделать это с помощью простого цвета фона, вам нужно использовать повторяющееся фоновое изображение.

Ответ 2

Я обнаружил, что метод, описанный в этой статье, был очень простым методом решения проблемы.

Вам нужно окружить свои #sidebar и #main divs другим div, поэтому ваш html-код будет выглядеть следующим образом:

...
<div id="content">
    <div id="sidebar">
        <h1>Sidebar</h1>
    </div>
    <div id="main">
        <h1>Main</h1>
    </div>
</div>
...

а затем следующий css сделает что-то близкое к тому, что вы хотите:

#content {
    position: relative;
    width: 100%;
}
#sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 240px;
}
#main {
    position: relative;
    margin-left: 250px;
}

(с небольшим количеством настроек, например, я обнаружил, что край h1 в #main, казалось, игнорируется... но поле h1 на #sidebar не было!).

Ответ 3

Если вам не нужен более низкий IE, используйте display: table для родителя и display: table-cell для элементов. Это должно исправить их высоты вместе. Что касается пробела, используйте margin-top: -100 px; padding-top: 100px;

Ответ 4

Не уверен, что вы пробовали это, или если это сработает для вас (я новичок в кодировании), но попробуйте поместить боковую панель влево, поместить содержимое вправо, как выравнивание по тексту влево, так и использовать проценты для ширины.

#sidebar
    {
float: left;
width: 25%;
background: #ccc;
min-height: 100%;
text-align: left;
    }

#main
    {
float: right;
text-align: left;
width: 70%;
    }

Если у вас есть другие настройки, вам придется подойти к ним по-другому, но это может сработать.

Ответ 5

$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));

Вы можете сделать это с помощью этого кода jquery. Вызов основной высоты содержимого.

Ответ 6

jQuery элегантно справляется с этим с легкостью, поэтому я не уверен, почему вы не захотите использовать js. Большинство разработчиков, которые кодировали более чем пару сайтов, потратили значительное время на поиск магического ответа, как и у меня, и ничего не сравнивает с использованием js.