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

Ответ 1

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

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

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

Ответ 2

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

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

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

Ответ 3

Пока 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 не означает "нижняя часть страницы", а "нижняя часть окна". Боковая панель, вероятно, будет прервана, если ваше основное содержимое прокрутится вниз.

Ответ 4

Я бы использовал таблицы css, чтобы достичь 100-процентной высоты боковой панели.

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

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

И дайте 2 дочерних divs (боковая панель и главная) a display: table-cell

Так вот..

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

Взгляните на этот LIVE DEMO, где я изменил вашу начальную разметку, используя описанную выше технику (у меня есть используемые цвета фона для разных div, чтобы вы могли видеть, какие из них)

Ответ 5

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

Ответ 6

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

Я сделал это:

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

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

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

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

Ответ 7

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

Ответ 8

Возможно, Макеты нескольких столбцов выходят из коробки - это то, что вы ищете?

Ответ 9

Я столкнулся с той же проблемой, что и Джон. 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>

Ответ 10

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

Ответ 11

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

#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>

Ответ 12

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

Ответ 13

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

Ответ 14

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