html - 具有页眉、页脚和多个 100% 最小高度内容列的 CSS 布局-6ren

html - 具有页眉、页脚和多个 100% 最小高度内容列的 CSS 布局

转载作者：搜寻专家更新时间：2023-10-31 08:20:15

这是我想要实现的:

即使内容未垂直填满视口(viewport)，页脚也应位于屏幕底部。
内容列的边框应始终为 100% 的内容高度。由于列的数量和宽度会因页面而异，因此不能使用背景图像来伪造列边框。
当所有内容都可见时，不应有滚动条(示例 1)。
解决方案应该全部是 HTML/CSS，没有 JS。
最低支持的浏览器应为 IE9+ 和最新桌面版本的 Firefox、Chrome、Safari、Opera；没有怪癖模式。
页眉/页脚/内容的宽度始终是固定的(因此页眉和页脚不需要放在内容区域内)。页眉和页脚的高度也是固定的。

我尝试了 Fluid Width Equal Height Columns 中的技巧和 this sticky footer example但无法同时满足所有要求。任何提示表示赞赏。

编辑:到目前为止，我所做的最深入的工作是模仿在 webkit 浏览器中正常工作但在 IE9 和 Opera 中不能正常工作的表格。 See the fiddle here .

HTML:

<div class="table outer">
    <div class="row header">
        <div class="cell">header</div>
    </div>
    <div class="row content">
        <div class="cell">
            <div class="table inner">
                <div class="row">
                    <div class="cell">content 1</div>
                    <div class="cell">content 2</div>
                    <div class="cell">content 3</div>
                </div>
            </div>
        </div>
    </div>
    <div class="row footer">
        <div class="cell">footer</div>
    </div>
</div>

CSS:

html, body {
    height: 100%;
}
.table {
    display: table;
    min-height: 100%;
    height: 100%;
}
.table.outer {
    width: 500px;
    margin: 0 auto;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}
.header, .footer {
    height: 25px;
    background-color: #999;
}
.content {
    background-color: #eee;
}
.table.inner {
    width: 100%;
    min-height: 100%;
    height: 100%;
}
.table.inner .cell {
    width: 33%;
    border-right: 1px dashed #c00;
}

最佳答案

虽然这不是语义上理想的解决方案，但我能找到的实现所有规定要求的唯一方法是回到 90 年代并使用表格进行布局。

See the fiddle here .

HTML:

<!DOCTYPE html>
<html>    
<head>
    <meta charset="utf-8">
</head>
<body>
    <table class="outer">
        <tr>
            <td class="header" colspan="3">header</td>
        </tr>
        <tr class="content">
            <td>content1</td>
            <td>content2</td>
            <td>content3</td>
        </tr>
        <tr>
            <td class="footer" colspan="3">footer</td>
        </tr>
    </table>
</body>
</html>

CSS:

html, body {
    height: 100%; margin: 0;
}
.outer {
    min-height: 100%;
    height: 100%;

    width: 500px;
    margin: 0 auto;
}
.header, .footer {
    height: 25px; background-color: #999;
}
.content td {
    width: 33%;
    background-color: #eee;
    border-right: 1px dashed #c00;
    vertical-align: top;
}

关于html - 具有页眉、页脚和多个 100% 最小高度内容列的 CSS 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13191306/

文章推荐： java - 将参数传递给父类(super class)

文章推荐： java - 简单的 StringBuilder 构造函数/方法问题

文章推荐： java - Java 的货币库

搜寻专家

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 具有页眉、页脚和多个 100% 最小高度内容列的 CSS 布局