Установите div на оставшуюся высоту с помощью CSS с неизвестной высотой divs выше и ниже

Question

Установите div на оставшуюся высоту с помощью CSS с неизвестной высотой divs выше и ниже

можно ли сделать обертку заполнить высоту окна (без прокрутки) и прокручивать центр div, не возясь с пикселями и javascript?

<div id="wrapper">

  <h1>Header</h1>

  <div id="center">

    <div style="height:1000px">high content</div>

  </div>

  <div id="footer">Footer</div>

</div>

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

Высота верхнего, нижнего и Центрального дивов неизвестна (нет набора px или %, т. е. переменного размера шрифта или заполнения). Возможно ли это с помощью чистого CSS?

1023 4

html css height scrollable

4 ответов:

Comments

Ничего не найдено.

Dan Dascalescu · Accepted Answer · 2017-05-23 14:54:54

обновление: современный способ решить эту проблему компоновки -использовать flexbox модели CSS. Он поддерживается всеми основными браузерами и IE11+.

2012: правильный способ сделать это только с CSS-использовать display: table и display: table-row. Это поддерживается всеми основными браузерами, начиная с IE8. Это не использование таблиц для отображения. Вы будете использовать ДИВС:
html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    display: table;
    height: 100%;
    width: 100%;
    background: yellow;  /* just to make sure nothing bleeds */
}
.header {
    display: table-row;
    background: gray;
}
.content {
    display: table-row;  /* height is dynamic, and will expand... */
    height: 100%;        /* ...as content is added (won't scroll) */
    background: turquoise;
}
.footer {
    display: table-row;
    background: lightgray;
}
<div class="wrapper">
    <div class="header">
        <h1>Header</h1>
        <p>Header of variable height</p>
    </div>
    <div class="content">
        <h2>Content that expands in height dynamically to adjust for new content</h2>
        Content height will initially be the remaining
        height in its container (<code>.wrapper</code>).
        
    </div>
    <div class="footer">
        <h3>Sticky footer</h3>
        <p>Footer of variable height</p>
    </div>
</div>
вот именно. Дивы завернуты, как и следовало ожидать.

danial · Accepted Answer · 2017-05-23 14:47:14

кросс-браузерное решение, полученное из Дэн Dascalescu ответ:

http://jsfiddle.net/Uc9E2

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
.l-fit-height {
    display: table;
    height: 100%;
}
.l-fit-height-row {
    display: table-row;
    height: 1px;
}
.l-fit-height-row-content {
    /* Firefox requires this */
    display: table-cell;
}
.l-fit-height-row-expanded {
    height: 100%;
    display: table-row;
}
.l-fit-height-row-expanded > .l-fit-height-row-content {
    height: 100%;
    width: 100%;
}
@-moz-document url-prefix() {
    .l-scroll {
        /* Firefox requires this to do the absolute positioning correctly */
        display: inline-block;
    }
}
.l-scroll {
    overflow-y: auto;
    position: relative;
    height: 1000px;
}
.l-scroll-content {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 1000px;
    min-height:100px;
}

<div class="l-fit-height">
    <section class="l-fit-height-row">
        <div class="l-fit-height-row-content">
            <p>Header</p>
        </div>
    </section>
    <section class="l-fit-height-row-expanded">
        <div class="l-fit-height-row-content l-scroll">
            <div class="l-scroll-content">
                <p>Foo</p>
            </div>
        </div>
    </section>
    <section class="l-fit-height-row">
        <div class="l-fit-height-row-content">
            <p>Footer</p>
        </div>
    </section>
</div>

Kevrone · Accepted Answer · 2011-12-19 03:45:33

Итак, вы говорите о липком нижнем колонтитуле. Я пошел и сделал еще несколько исследований, и вот что у меня есть для вас.
<div id="wrapper" style="height:100%">
<div id="header" style="float:none;"><h1>Header</h1></div>

<div style="overflow:scroll;float:none;height:auto;">high content</div>

<div id="footer" style="clear:both;position:fixed;bottom:0px;"><h1>Footer</h1></div>
</div>
Это даст вам липкий нижний колонтитул. Ключ положение: фиксированный и дно: 0px; К сожалению, это означает, что он также парит над любым контентом в scrollview. Пока, кажется, есть только Javascript, чтобы понять это, но я буду продолжать искать.

FakeRainBrigand · Accepted Answer · 2011-12-19 02:01:19

С помощью overflow:auto позволит вам сделать это.

демо