Сделайте левый столбец в макете из 2 столбцов занимающим 100% высоты с помощью липкого нижнего колонтитула

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

Пожалуйста, посмотрите на JSFiddle ниже.

http://jsfiddle.net/x11joex11/2Ljgze37/8/

CSS:

/* Set Defaults */
* {height:100%;margin:0;}
.wrapper{
    background-color:rgba(0,0,0,0.25);
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin:0 auto -50px;
}
.clear {clear:both}

/* Create Header */
.header{
    height:50px;
    background-color:rgba(0,255,0,0.5);
}

/* Content */
.content{
    height:100%;
    padding-right:100px;
}

/* Left Column */
.leftside{
    float:left;
    height:100%;
    width:100px;
    background-color:rgba(0,0,255,0.5);
}

/*Right Column*/
.rightside{
    float:right;
    margin: 0 -100px 0 0; width: 100%;
    background-color:rgba(255,0,255,0.5);
}
.push{
    height:50px;
}
.stickyfooter{
    height:50px;
    background-color:rgba(255,0,0,0.75);
}

HTML:

<div class="wrapper">
    <div class="header">Header</div>
    <div class="content">
        <div class="leftside">
            Left Menu<br/><br/>
            Home<br/><br/>
            Page #1<br/><br/>
            Page #2<br/><br/>
            Page #3<br/><br/>
        </div>
        <div class="rightside">
            Right Content (lorem ipsum forgot the rest)
            (lorem ipsum forgot the rest)(lorem ipsum forgot the rest)
            (lorem ipsum forgot the rest)(lorem ipsum forgot the rest)
            (lorem ipsum forgot the rest)(lorem ipsum forgot the rest)
        </div>
        <div class="clear"></div>
        <div class="push"></div>
    </div>   
</div>
<div class="stickyfooter">Footer</div>

html layout css sticky-footer
person Joseph Astrahan    schedule 10.08.2014    source источник
comment
Не могли бы вы уточнить не застревать, пока не упретесь в содержимое левого столбца? Я не могу помочь, пока не пойму, что вы имеете в виду.   -  person amess    schedule 10.08.2014

Ответы (2)


arrow_upward
1
arrow_downward

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

Вы можете добавить это вне вашей оболочки:

<div class="left-bg"></div>

и этот css:

.left-bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color:rgba(0,0,255,0.5);
    width:100px;
    z-index: -1;
}

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

Скрипт: http://jsfiddle.net/3t5r2qg3/

Как сказал Джозеф в комментариях, в этом сценарии лучше использовать «позиция: фиксированная»; по сравнению с «позиция: абсолютная;»

person mattroberts33    schedule 10.08.2014
comment
Большое спасибо, именно то, что я искал! Гениальное решение, использующее абсолютное положение для повторения шаблона слева с z-index: -1, поэтому заголовок, нижний колонтитул все еще выше, сохраняя высоту 100% - person Joseph Astrahan; 11.08.2014
comment
Хочу отметить, что лучше менять позицию на Фиксированную, а не на абсолютную. Причина этого в том, что он адаптируется к высоте браузера, а не только к тому, что вы видите визуально на экране. (см. это, css-tricks.com/), если вы добавите много контента в левое меню, затем уменьшите окно браузера и прокрутите вниз, вы увидите, что фоновый элемент div исчезает, если он не находится в «фиксированном» положении. - person Joseph Astrahan; 17.08.2014

arrow_upward
0
arrow_downward

Поиграл и обновил свою скрипку до своей спецификации:

http://jsfiddle.net/YoshiMaster/2Ljgze37/18/

Честно говоря, не могу вспомнить все шаги, которые я предпринял, но основным было установить стиль .content в

display: table;

и его дети

display: table-cell;

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

person Charles    schedule 10.08.2014