Контейнер с 2 колонками, высота кузова 100%

Question

Контейнер с 2 колонками, высота кузова 100%

0

Я использую этот пример fyi: http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/ (где левый столбец является фиксированной шириной через px и справа переосмыслен)

Я пытаюсь сделать высоту контейнера на 100% от высоты тела.

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

Любые предложения, пока не повезло..

Мой пример jsfiddle:

http://jsfiddle.net/GtK98/1/

djohn1225 01 окт. 2013, в 19:26

Источник

0

Я пытаюсь сделать два столбца 100% высоты (чтобы соответствовать телу), даже если там нет содержимого в div.
djohn1225 01 окт. 2013, в 16:59
0

Вы также хотите нижний колонтитул? или просто заголовок и контент?
avrahamcool 01 окт. 2013, в 20:39

Теги:

html

css

css-float

2 ответа

Ещё вопросы

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

avrahamcool · Answer 1 · 2013-10-01T18-14-00.000Z

это макет без нижнего колонтитула. Если вы хотите добавить комментарий нижнего колонтитула здесь, и я сделаю это.

Чистый CSS без фиксации высоты заголовка с/без фиксации ширины левой стороны, кросс-браузера (IE8+)

Взгляните на этот рабочий скрипт

HTML: (очень простой)

<div class="Container">
    <div class="Header">
    </div>
    <div class="HeightTaker">
        <div class="Wrapper">
            <div class="LeftContent">
            </div>
            <div class="RightContent">
            </div>
        </div>
    </div>
</div>

CSS:

*
{
    margin: 0;
    padding: 0;
}
html, body, .Container
{
    height: 100%;
}
    .Container:before
    {
        content: '';
        height: 100%;
        float: left;
    }
.HeightTaker
{
    position: relative;
    z-index: 1;
}
    .HeightTaker:after
    {
        content: '';
        clear: both;
        display: block;
    }
.Wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
}

.Header
{
    /*for demonstration only*/
    background-color: #bf5b5b;
}
.Wrapper > div
{
    height: 100%;
    overflow: auto;
}

.LeftContent
{
    float: left;

    /*for demonstration only*/
    background-color: #90adc1;
}
.RightContent
{
    /*for demonstration only*/
    background-color: #77578a;
}

Arcadio Garcia · Answer 2 · 2013-10-01T14-08-00.000Z

Ты пробовал

min-height:100%;

в css?

Да, никакого эффекта. Ex jsfiddle.net/GtK98/1