在页面底部粘贴HTML 5表页脚

前端之家收集整理的这篇文章主要介绍了在页面底部粘贴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%;}

编辑:我的表需要垂直展开,并且当header / footer中的行溢出表高度时,需要显示一个滚动条.

解决方法

这是我为另一篇文章做的一个示例.我的桌子是完全可展开的,您也可以看到滚动条.
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/

原文链接:https://www.f2er.com/html/230631.html

猜你在找的HTML相关文章