Приклеивание нижнего колонтитула HTML 5 внизу страницы

Посмотрите на таблицу. Он имеет 3 раздела:

Заголовки столбцов
3 строки со значениями
Один нижний колонтитул

Я пытаюсь придерживаться нижнего колонтитула внизу страницы. Высота стола должна быть изменчиваема, и мне нужно поместить вертикальную полосу прокрутки, если строки со значениями превышают пределы высоты таблицы. Я не хочу расширять высоту строки значения. Есть ли способ сделать это? (только html/css).

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <div class="table">
        <div class="row headers">
            <div class="cell col1">Col1</div>
            <div class="cell col2">Col2</div>
            <div class="cell col3">Col3</div>
        </div>
        <div class="row">
            <div class="cell col1">1</div>
            <div class="cell col2">2</div>
            <div class="cell col3">3</div>
        </div>
        <div class="row">
            <div class="cell col1">1</div>
            <div class="cell col2">2</div>
            <div class="cell col3">3</div>
        </div>
        <div class="row">
            <div class="cell col1">1</div>
            <div class="cell col2">2</div>
            <div class="cell col3">3</div>
        </div>
        <div class="row footers">
            <div class="cell col1">Footer</div>
            <div class="cell col2"></div>
            <div class="cell col3"></div>
        </div>
    </div>

</body>

</html>

Стили:

.table{
    display:table;
    width: 100%;
    border: 1px solid #000;
    background: #eee;
}
.row{
    display:table-row;
}
.headers { color: #505; font-weight: bold;}
.footers { color: #055;}
.cell{
    background: #eee;
    display:table-cell;
    border: 1px solid #fff;
}

.col1 { width:50%;}
.col2 { width:25%;}
.col3 { width:25%;}

Изменить: Моя таблица должна быть вертикально расширяемой, и она должна показывать полосу прокрутки, когда строки внутри верхнего/нижнего колонтитула переполняют высоту таблицы.

Ответы

Ответ 1

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

    html, body, #expandtable, #tablecontainer 
    {
        height:100%;
        margin: 0;
        padding: 0;
        border: none;
        overflow-y: hidden;
    }

    #tablecontainer 
    {
        width: 100%;
        margin: 0 auto;
        padding-top: 50px;
        max-width: 900px;
    }

    #expandtable
    {
        margin: 5px 0 0 0px;
        overflow-x: hidden;
        overflow-y: scroll;
        height: 60%;
        border-bottom: 0;
        background-color: #eee;
        margin: 0 auto;
    }

    .breakline { clear:both;}

    .divrow
    {

    }

    .divcell { float:left; border: 1px solid #999; box-sizing: border-box; min-height: 30px; }
    .colname { float:left; border: 1px solid #e5e5e5; box-sizing: border-box;}

    .cellwidth1 { width:10%; }
    .cellwidth2 { width:45%; }
    .cellwidth3 { width:35%; }
    .cellwidth4 { width:10%; }

<div id="tablecontainer">

    <div id="topbar">
        <div class="colname cellwidth1">ABC</div>
        <div class="colname cellwidth2">ABC</div>
        <div class="colname cellwidth3">ABC</div>
        <div class="colname cellwidth4">ABC</div>
    </div>
    <div class="breakline"></div>
    <div id="expandtable">
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
    </div>
    <div class="breakline"></div>
    <div id="topbar">
        <div class="colname cellwidth1">ABC</div>
        <div class="colname cellwidth2">ABC</div>
        <div class="colname cellwidth3">ABC</div>
        <div class="colname cellwidth4">ABC</div>
    </div>
</div>

http://jsfiddle.net/Gabriel_Mendez/T2pmq/

Ответ 2

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

Вы должны использовать позиционирование, чтобы получить нижний колонтитул в нижней части страницы:

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

источник: http://www.w3.org/TR/CSS2/visuren.html#propdef-position

Единственное решение, о котором я мог думать, это создать вторую таблицу для нижнего колонтитула. Чтобы сделать его менее сложным для себя, предложите просто использовать элементы <table>.

<table>
    <theader>
        <tr>
            <th class="col1">Col1</th>
            <th class="col2">Col2</th>
            <th class="col3">Col3</th>
        </tr>
    </theader>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
    </tbody>
</table>

<table id="footer">
    <tr>
        <td class="col1">
            Footer
        </td>
        <td class="col2">
        </td>
        <td class="col3">
        </td>
    </tr>
</table>

теперь вы можете просто поместить абсолютную таблицу нижнего колонтитула:

#footer
{
    width: 100%;
    position: absolute;
    bottom: 0;
}

Итак, следующая проблема, с которой мы сталкиваемся, - это элемент <td> не реагирует на переполнение. Чтобы обойти это, вы можете обернуть каждое содержимое <td> в div и установить переполнение-y:

<td>
     <div>
          12312321312312312312312313123123123123345 long content as example
    </div>
 </td>

Теперь мы также должны установить статическую высоту для div:

td > div, th > div
{
    height: 22px;
    overflow-y: scroll;
}

Также убедитесь, что содержимое td разбивается на ось y:

td, th
{
    border: 1px solid #fff;
    background: #eee;
    word-break: break-all;
}

Теперь, когда вы обертываете каждый контент в <div>, он должен работать так же, как и в таблице нижнего колонтитула.

jsFiddle

Надеюсь, что это было полезно

Ответ 3

Вы пытались добавить overflow-y:scroll; следующим образом:

.row{
    display:table-row;
    overflow-y: scroll;
}

Ответ 4

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

Я использовал CSS3 Flexible Box Layout, ключевое правило здесь article { -webkit-flex: 1 1 auto; }. flex - это правило сокращения и первые два значения 1 для flex-grow и flex-shrink позволяют контейнеру <article> заполнять любое доступное пространство. Это в сочетании с overflow-y: auto; приводит к появлению полосы прокрутки, когда высота содержимого превышает допустимую высоту.

MDN Использование гибких полей CSS также является хорошим резюме этих свойств.

Теперь я считаю, что немного неправильно создавать таблицы без тега <table>, но я не мог сделать ничего другого, что сработало.

Примечание. Извините, это не кросс-браузерная демонстрация. У меня нет всех последних браузеров. Если у меня будет время позже, я попытаюсь обновить CSS.

CSS

html, body {
    height:100%;
}
.flex {
    display: -webkit-flex;
    -webkit-flex-direction: column;
    height: 100%;
    width: 80%; /* artificial limitation showing scroll on the edge of the "table" */
    overflow: hidden;
}

header, article, footer {
    min-height:24px;
}

header {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    color: #505;
    font-weight: bold;
}
article {
    -webkit-flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
}
footer {
    display: -webkit-box;
    color: #055;
}
.row {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    max-height:24px;
}
header > div, article > div, footer > div {
    background: #eee;
    border: 1px solid #fff;
}
header > :first-child, .row > :first-child, footer > :first-child {
    width:50%;
}
header > :nth-child(2), .row > :nth-child(2), footer > :nth-child(2) {
    width:25%;
}
header > :last-child, .row > :last-child, footer > :last-child {
    width:25%;
}

HTML

<section class="flex">
    <header>
        <div>Col1</div>
        <div>Col2</div>
        <div>Col3</div>
    </header>
    <article>
        <div class="row">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
        <div class="row">
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
        <div class="row">
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
        <!-- more rows here, removed for brevity -->
    </article>
    <footer>
        <div>Footer</div>
        <div></div>
        <div></div>
    </footer>
</section>

Ответ 5

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

Для вас может работать следующее решение.

Оберните свою "таблицу" с именем div тегом:

.tableFooter { height:90px; overflow-x: hidden; overflow-y: auto; position: fixed; bottom: 0; width: 90%; /* 90 placed roughly */ }