Установить высоту боковой панели на 100% с помощью CSS (с липким нижним изображением)?

ОБНОВЛЕНИЕ: Поскольку этот ответ все еще набирает голоса как вверх, так и против, и на момент написания ему восемь лет: сейчас, вероятно, есть лучшие методы. Оригинальный ответ следует ниже.

Очевидно, вы ищете технику Faux columns :-)

По тому, как вычисляется свойство height, вы не можете установить height: 100% внутри чего-то, что имеет автоматическую высоту.

Это сработало для меня

.container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -5000px; /* any large number will do */
  padding-bottom: 5000px; 
  .... 
} 

Пока флексбокс CSS не станет более распространенным, вы всегда можете просто позиционировать боковую панель абсолютно, прикрепив ее к нулю пикселей сверху и снизу, а затем установить запас на вашем основном контейнере для компенсации.

JSFiddle

http://jsfiddle.net/QDCGv/

HTML

<section class="sidebar">I'm a sidebar.</section>

<section class="main">I'm the main section.</section>

CSS

section.sidebar {
  width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: green;
}

section.main { margin-left: 250px; }

Примечание. Это очень простой способ сделать это, но вы обнаружите, что bottom означает не «нижняя часть страницы», а «нижняя часть окна». Боковая панель, вероятно, резко закроется, если ваше основное содержимое прокрутится вниз.

Я бы использовал таблицы css для достижения 100% высоты боковой панели.

Основная идея - обернуть боковую панель и основные блоки в контейнер.

Дайте контейнеру display:table

И присвойте двум дочерним элементам div (боковой и основной) display: table-cell

Вот так..

#container {
display: table;
}
#main {
display: table-cell;
vertical-align: top;
}
#sidebar {
display: table-cell;
vertical-align: top;
} 

Взгляните на эту ЖИВУЮ ДЕМО, где я изменил вашу первоначальную разметка с использованием описанной выше техники (я использовал цвета фона для разных div, чтобы вы могли видеть, какие из них какие)

Flexbox (http://caniuse.com/#feat=flexbox)

Сначала оберните нужные столбцы в div или раздел, например:

<div class="content">
    <div class="main"></div>
    <div class="sidebar"></div>
</div>

Затем добавьте следующий CSS:

.content {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

Могу ли я просто добавить свою адаптацию в дополнение к ответу @montrealmike?

Я сделал это:

.container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -101%;
  padding-bottom: 101%; 
  .... 
} 

Я сделал "101%", чтобы учесть (очень редкую) вероятность того, что кто-то может просматривать сайт на огромном экране высотой более 5000 пикселей!

Отличный ответ, montrealmike. У меня это сработало отлично.

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

Сначала стилизуйте элементы в своей таблице стилей:

#container {
width: 100%;
background: #FFFAF0;
}

.content {
width: 950px;
float: right;
padding: 10px;
height: 100%;
background: #FFFAF0;
}

.sidebar {
width: 220px;
float: left;
height: 100%;
padding: 5px;
background: #FFFAF0;
}

#footer {
clear:both;
background:#FFFAF0;
}

Вы можете редактировать различные элементы, как хотите, только убедитесь, что вы не изменили свойство нижнего колонтитула «clear: both» - это очень важно оставить.

Затем просто настройте свою веб-страницу следующим образом:

<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>

Я написал более подробное сообщение об этом в блоге по адресу http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container. Пожалуйста, дай мне знать, если возникнут какие-либо вопросы. Надеюсь это поможет!

Возможно, вам нужен Многоколоночные макеты, которые можно использовать прямо из коробки?

Думаю, сегодня для этого, наверное, можно было бы использовать flexbox. См. пример Святого Грааля.

Я столкнулся с той же проблемой, что и Джон. TheLibzter направил меня на правильный путь, но изображение, которое должно оставаться внизу боковой панели, не было включено. Итак, я внес некоторые коррективы ...

Важный:

• Расположение блока div, содержащего боковую панель и контент (#bodyLayout). Это должно быть относительно.
• Позиционирование div, который должен оставаться внизу sidbar (#sidebarBottomDiv). Это должно быть абсолютным.
• Ширина содержимого + ширина боковой панели должны быть равны ширине страницы (#container)

Вот css:

    #container
    {
        margin: auto;
        width: 940px;
    }
    #bodyLayout
    {
        position: relative;
        width: 100%;
        padding: 0;
    }
    #header
    {
        height: 95px;
        background-color: blue;
        color: white;
    }
    #sidebar
    {
        background-color: yellow;
    }
    #sidebarTopDiv
    {
        float: left;
        width: 245px;
        color: black;
    }
    #sidebarBottomDiv
    {
        position: absolute;
        float: left;
        bottom: 0;
        width: 245px;
        height: 100px;
        background-color: green;
        color: white;
    }
    #content
    {
        float: right;
        min-height: 250px;
        width: 695px;
        background-color: White;
    }
    #footer
    {
        width: 940px;
        height: 75px;
        background-color: red;
        color: white;
    }
    .clear
    {
        clear: both;
    }

А вот HTML:

<div id="container">
    <div id="header">
        This is your header!
    </div>
    <div id="bodyLayout">
        <div id="sidebar">
            <div id="sidebarTopDiv">
                This is your sidebar!                   
            </div>
            <div id="content">                  
            This is your content!<br />
            The minimum height of the content is set to 250px so the div at the bottom of
            the sidebar will not overlap the top part of the sidebar.
            </div>
            <div id="sidebarBottomDiv">
                This is the div that will stay at the bottom of your footer!
            </div>
            <div class="clear" />
        </div>
    </div>
</div>
<div id="footer">
    This is your footer!
</div>

Я понимаю, что это старый пост, но я пытался что-то придумать, чтобы на моем сайте была боковая панель. Это сработает?

#sidebar-background
{
    position:fixed;
    width:250px;
    top:0;
    bottom:0;
    background-color:orange;
}

#content-background
{
    position:fixed;
    right:0;
    top:0;
    bottom:0;
    left:250px;
    background-color:pink;
}

#sidebar
{
    float:left;
    width:250px;
}

#content
{
    float:left;
    width:600px;
}

<div id="sidebar-background"></div>
<div id="content-background"></div>

<div id="sidebar">Sidebar stuff here</div>
<div id="content">Stuff in here</div>

Я думаю, ваше решение заключалось бы в том, чтобы обернуть ваш контейнер содержимого и боковую панель в родительский элемент, содержащий div. Переместите боковую панель влево и придайте ей фоновое изображение. Создайте широкое поле не менее ширины боковой панели для контейнера содержимого. Добавьте удаление хака с плавающей запятой, чтобы все это заработало.

используйте фон тела, если вы используете боковую панель с фиксированной шириной, чтобы получить изображение той же ширины, что и ваша боковая панель. также поместите background-repeat: repeat-y в свои коды css.

Абсолютное положение, верх: 0 и низ: 0 для боковой панели и относительное положение для оболочки (или контейнера), в которой содержатся все элементы, и готово!

Попробуй это. Он заставляет навигационную панель расти по мере добавления контента и сохраняет центральную область в центре.

   <html>
        <head>
            <style>
                    section.sidebar {
          width: 250px;
          min-height:100vh;
          position: sticky;
          top: 0;
          bottom: 0;
          background-color: green;
        }

        section.main { position:sticky; top:0;bottom:0;background-color: red; margin-left: 250px;min-height:100vh; }
            </style>
            <script lang="javascript">
            var i = 0;
            function AddOne()
            {
                for(i = 0;i<20;i++)
                {
                var node = document.createElement("LI");
                var textnode = document.createTextNode(' Water ' + i.toString());

                node.appendChild(textnode);
                document.getElementById("list").appendChild(node);
                }


            }
            </script>
        </head>
        <body>
                <section class="sidebar">
                    <button id="add" onclick="AddOne()">Add</button>
                    <ul id="list">
                        <li>bullshit 1</li>
                    </ul>
                </section>
                <section class="main">I'm the main section.</section>
        </body>    
    </html>