Высота не заполняется 100% высота страницы

Я не могу понять этого. У меня есть простой набор div с заголовком, боковой панелью и областью содержимого. Заголовок имеет полную ширину, сторона и содержимое перемещаются влево.

Мне нужна боковая панель (для фона), чтобы заполнить 100% высоты страницы, но когда я проверяю элемент на хроме, <body> на самом деле заканчивается задолго до нижней части страницы, что, по-видимому, ограничивает высота моей боковой панели.

Что удерживает <body> от заполнения полной страницы здесь?

    <body>
    <div id="head">
    </div>
<div id="sidebar">
    <div>
        <div id="menu">
            <ul>
                <li><a href="/dashboard.php"><img src="/img/blank.png" alt="home" id="home_ico">Home</a>
                </li>
                <li class="admin"><a><img src="/img/blank.png" alt="home" id="users_ico">Users</a>
                    <ul class="submenu" style="display: none;">
                        <li><a href="/users">Manage users</a></li>
                        <li><a href="/users/add.php">Add a user</a></li>
                    </ul>
                </li>

                <li class=""><a><img src="/img/blank.png" alt="home" id="clients_ico">Clients</a>
                    <ul class="submenu" style="display: none;">
                        <li><a href="/client_orgs">Manage clients</a></li>
                        <li><a href="/client_orgs/add.php" class="admin">Add a client</a></li>
                    </ul>
                </li>


                <li class=""><a><img src="/img/blank.png" alt="home" id="projects_ico">Projects</a>
                    <ul class="submenu" style="display: none;">
                        <li><a href="/projects">Manage projects</a></li>
                        <li><a href="/projects/add.php" class="admin">Create a project</a></li>
                        <li></li>
                        <li><a href="/projects/submitted.php" class="admin client">Submitted projects</a></li>
                        <li><a href="/projects/closed.php" class="admin">Closed projects</a></li>
                    </ul>
                </li>
                <li class=""><a href="/my_account"><img src="/img/blank.png" alt="home" id="account_ico">Account</a>
                </li>
                <li class="active"><a href="/help.php"><img src="/img/blank.png" alt="help" id="help_ico">Help</a>
                </li>
            </ul>

        </div>
    </div>
</div>    
<div id="body" class="full">
  <div id="content">

    <!--start block-->
    <div class="block">
        <h1><img src="/img/blank.png" alt="home" id="help_ico"> Help</h1>
        <p>
        Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.
        </p>
    </div>  
</div>   
</body>

CSS

* {
    margin:0;
    padding:0;
}
html, body {
    height:100%;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 160%;
    position: relative;
    background: #000;
}
#sidebar{
    width: 200px;
    background: #000;
    height: 100%;
    padding-top: 30px;
    -webkit-box-shadow: inset -4px 0px 8px 0px rgba(0, 0, 0, 0.5);
        box-shadow: inset -4px 0px 8px 0px rgba(0, 0, 0, 0.5);
     float: left;
}
#body{
    float: left;
    padding: 30px 0 30px 40px;
    width: 75%;
}

Ответ 1

Похоже, у вас есть float: left применяется к вашим детям. Используйте этот код:

html, body {
    overflow: auto;
}

Ответ 2

Если у вас есть сомнения - лучший способ найти это, добавив:

html { overflow-y:scroll; }

Ответ 3

попробуйте добавить

body {
  min-height: 100%;
}

Ответ 4

Кажется, вы пытаетесь достичь макета, который охватывает всю высоту контейнера - эти макеты не подходят. Вы должны прочитать технику CSS Faux Columns, что является обходным решением этой проблемы.

Ответ 5

Есть две проблемы:

Во-первых:
Ширина ваших элементов превышает 100% ширины страницы. Вот почему ваш div id = "body" застрял под боковой панелью.

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

Второе:
height: 100% не работает так, как казалось бы, есть обходные пути для этого.
Вот отличное решение

Ответ 6

Не уверен, что это поможет кому угодно, но у меня была такая же проблема, но только на мобильных устройствах. Я обнаружил, что существует стиль html { height: 100%; }, который заставлял тело не распространять всю высоту. Как только я удалил высоту 100% в теге html, он зафиксировал тело, не увеличивающее всю высоту страницы на мобильном устройстве. У меня все еще есть 100% высоты на теге тела.

Ответ 7

Пожалуйста, используйте этот ответ с умом, я не могу помочь во многих случаях:

html, body{min-height:100%;}
body{height:100vh;}