Высота боковой панели CSS 100%

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

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

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

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

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% высоты боковой панели.

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

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

и дать 2 ребенка ДИВС (боковой панели и основной) a display: table-cell

вот так..

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

взгляните на это ДЕМО где я изменил вашу начальную разметку, используя вышеуказанную технику (я использовал цвета фона для различных дивов, так что вы можете увидеть, какие из них какие)

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;
}

я столкнулся с этой проблемой несколько раз на разных проектах, но я нашел решение, которое работает для меня. Вы должны использовать четыре тега 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пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы. Надеюсь, это поможет!

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

Я сделал так:

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

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

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

отличный ответ, хотя, montrealmike. Это прекрасно работало для меня.

возможно Многоколоночные макеты вылезают из коробки это то, что вы ищете?

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

я столкнулся с той же проблемой, что и Джон. 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. Переместите боковую панель влево и дайте ей фоновое изображение. Создайте широкое поле по крайней мере шириной боковой панели для контейнера содержимого. Добавить очистка float hack чтобы все это работало.

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

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