100% 宽度的粘性页脚 + 页眉，但以 100% 的高度居中 3 列内容？答案

【问题标题】：100% width sticky footer + header, but centered 3 column content with height 100%?100% 宽度的粘性页脚 + 页眉，但以 100% 的高度居中 3 列内容？
【发布时间】：2012-02-25 13:03:30
【问题描述】：

我正在尝试创建一个网页设计，其中包含全宽固定菜单、全宽页眉、960 像素宽、3 列（每列高度为 100%）和全宽粘性页脚的居中内容。

在我见过的所有工作示例中，页眉、内容和页脚的宽度相同。

（已编辑）我的问题是让列在任何屏幕尺寸下从页眉底部到页脚顶部拉伸到屏幕的整个高度。

我已经举了一个例子来说明我想要实现的目标：http://muku.dk/example.jpg

这可以通过 CSS 实现吗？

【问题讨论】：

回答您的问题“这可能使用 CSS 吗？”。是的，使用 CSS 很有可能

标签： css sticky-footer

【解决方案1】：

类似的东西。请注意，这只是为了引导您走向正确的方向。您必须使用任何技术以及粘性页脚将等高列粘贴在其中。

标记

<!Doctype html>  
<html lang="en">  
<head>  
<meta charset="utf-8">  
<title>Title Goes Here</title>  
<link rel="stylesheet" href="styles.css">  
</head>  
<body> 
<div id="wrapper">
<div id="my_menu">
<p>fixed menu width 100%</p>
</div>
<div id="container">
<div id="my_header">
<p>header width 100%</p>
</div>
<div id="content">
<div id="col1">
<p>column 1 width 320px height 100%</p>
</div>
<div id="col2">
<p>column 2 width 320px height 100%</p>
</div>
<div id="col3">
<p>column 3 width 320px height 100%</p>
</div>
</div>
<div id="my_footer">
<p>sticky footer width 100%</p>
</div>
</div>
</div>
</body>  
</html>

风格

*
{
padding: 0;
margin: 0;
}

html, body
{
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
}

div#wrapper
{
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
}

div#my_menu
{
width: 100%;
min-width: 100%;
height: 50px;
border: 1px solid black;
background-color: grey;
position: fixed;
}

div#my_menu>p
{
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
font-size: 50px;
line-height: 50px;
font-weight: bold;
text-transform: uppercase;
color: red;
text-align: center;
}

div#container
{
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
padding-top: 50px;
}

div#my_header
{
width: 100%;
min-width: 100%;
height: 100px;
border: 1px solid black;
background-color: yellow;
}

div#my_header>p
{
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
font-size: 100px;
line-height: 100px;
font-weight: bold;
text-transform: uppercase;
color: red;
text-align: center;
}

div#content
{
width: 960px;
margin: 0 auto;
height: 100%;
min-height: 100%;
border: 1px solid black;
background-color: blue;
overflow: auto;
}

div#col1
{
width: 320px;
height: 100%;
min-height: 100%;
outline: 1px solid black;
background-color: green;
float: left;
}

div#col1>p
{
width: 100%;
min-width: 100%;
font-weight: bold;
text-transform: uppercase;
color: red;
text-align: center;
}

div#col2
{
width: 320px;
height: 100%;
min-height: 100%;
outline: 1px solid black;
background-color: orange;
float: left;
}

div#col2>p
{
width: 100%;
min-width: 100%;
font-weight: bold;
text-transform: uppercase;
color: red;
text-align: center;
}

div#col3
{
width: 320px;
height: 100%;
min-height: 100%;
outline: 1px solid black;
background-color: gold;
float: left;
}

div#col3>p
{
width: 100%;
min-width: 100%;
font-weight: bold;
text-transform: uppercase;
color: red;
text-align: center;
}

div#my_footer
{
width: 100%;
min-width: 100%;
height: 80px;
border: 1px solid black;
background-color: pink;
}

div#my_footer>p
{
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
font-size: 80px;
line-height: 80px;
font-weight: bold;
text-transform: uppercase;
color: red;
text-align: center;
}

编辑 1

试试这个。这很完美。即使没有足够的内容，页脚也会粘在底部，并在有更多内容时向下推。垂直的 Scroolbar 也不会出现。现在请不要让我让列也等高。

HTML 标记

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Document Title</title>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body id="index">
<div id="wrapper">
    <div id="my_menu">
    FIXED MENU WIDTH 100%
    </div>
    <div id="my_header">
    HEADER WIDTH 100%
    </div>
    <div id="content">
        <p>CONTENT 960px</p>
        <div id="col1" class="content_columns">
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        COLUMN 1 WIDTH 320px HEIGHT 100%
        </div>
        <div id="col2" class="content_columns">
        COLUMN 2 WIDTH 320px HEIGHT 100%
        COLUMN 2 WIDTH 320px HEIGHT 100%
        COLUMN 2 WIDTH 320px HEIGHT 100%
        COLUMN 2 WIDTH 320px HEIGHT 100%
        COLUMN 2 WIDTH 320px HEIGHT 100%
        COLUMN 2 WIDTH 320px HEIGHT 100%
        COLUMN 2 WIDTH 320px HEIGHT 100%
        COLUMN 2 WIDTH 320px HEIGHT 100%
        COLUMN 2 WIDTH 320px HEIGHT 100%
        </div>
        <div id="col3" class="content_columns">
        COLUMN 3 WIDTH 320px HEIGHT 100%
        COLUMN 3 WIDTH 320px HEIGHT 100%
        COLUMN 3 WIDTH 320px HEIGHT 100%
        COLUMN 3 WIDTH 320px HEIGHT 100%
        COLUMN 3 WIDTH 320px HEIGHT 100%
        </div>
        <div class="clear_floats"></div> <!-- For Clearing Floats -->
    </div>
    <div class="push"></div> <!-- For Sticky Footer -->
</div>
    <div id="my_footer">
    STICKY FOOTER WIDTH 100%
    </div>
</body>
</html>

样式 CSS

* /* For CSS Reset */
{
padding: 0;
margin: 0;
}

html, body
{
width: 100%;
height: 100%;
}

div#wrapper
{
width: 100%;
height: 100%;
min-height: 100%; /* For Sticky Footer */
height: auto !important; /* For Sticky Footer */
margin: 0 auto -70px; /* For Sticky Footer */
}

div#my_menu
{
width: 100%;
height: 50px;
outline: 1px solid black;
background-color: grey;
text-align: center;
position: fixed;
}

div#my_header
{
width: 100%;
height: 100px;
outline: 1px solid black;
background-color: yellow;
text-align: center;
padding-top: 50px;
}

div#content
{
width: 960px;
margin: 0 auto;
outline: 1px solid black;
background-color: brown;
text-align: center;
}

div.content_columns
{
width: 320px;
outline: 1px solid black;
background-color: gold;
text-align: center;
float: left;
}

div.clear_floats /* For Clearing Floats */
{
clear: both;
}

div#my_footer
{
width: 100%;
height: 70px;
outline: 1px solid black;
background-color: pink;
text-align: center;
}

div.push /* For Sticky Footer */
{
height: 70px;
}

希望这会有所帮助。

【讨论】：

非常感谢您抽出宝贵时间！但是使用您的解决方案，即使列内的内容小于屏幕的高度，我仍然会得到不必要的滚动。有没有可能避免这种情况？
非常感谢您，非常感谢您的努力！但是在大屏幕分辨率中，内容不会拉伸以填满我们的屏幕 - 而且列确实需要具有相等的高度（抱歉）。也许我需要找到一种方法来使用 javascript 来代替？
你可以做的是，拿上面的代码，问一个新问题，但是这次只问如何使内容100%高度以及等高列。我相信它会用没有 Javascript 或 Jquery 的纯 CSS 解决方案来回答。否则，我可以为您指出许多 JavaScript 和 Jquery 解决方案。
stackoverflow.com/questions/9159026/…

【解决方案2】：

是的，你试过什么？这是非常基本的。

您需要将 3 列放在包装器（或其他东西）中，并将页眉、固定导航和页脚放在包装器之外。现在，您可以将导航、页眉和页脚设为 100% 宽度，并将包装器设为 960 像素。

【讨论】：

感谢您的回答，但我的问题是让列在任何屏幕尺寸下从页眉底部到页脚顶部拉伸到屏幕的整个高度。关于如何实现这一目标的任何想法？
它们被称为等高列。 Flex 列是一种方式 - vanseodesign.com/css/equal-height-columns - css-tricks.com/fluid-width-equal-height-columns - woorkup.com/2009/10/11/… - matthewjamestaylor.com/blog/… - buildinternet.com/2009/07/… -
谢谢，但是列具有相同的高度是不够的 - 它们还需要位于 960 px 宽的居中容器内，并从（100% 宽）标题延伸到（100 % 宽) 粘性页脚
是的，我没有看到您的问题。让我给你一个大纲。制作一个 div#container，给它宽度：100% 和高度：100%；制作一个 div#menu，给它宽度：100%；位置：固定；制作一个 div#header，给它宽度：100%；制作一个 div#content;给它宽度：960px；边距 0 自动；制作 3 个 div，div#col1，div#col2，divid#col3，给它们宽度：320px；高度：100%；使用任何等高列技术。制作一个 div#footer，给它宽度：100%；使用任何粘性页脚技术
@KasperBjerre：请使用@，这样我就可以在我的收件箱中收到您的消息，而不必重新访问问题以查看任何更新。