100％宽度粘性页脚+标题，但居中3列内容，高度100％？

时间：2012-02-02 20:44:09

标签： css sticky-footer

我正在尝试使用全宽固定菜单，全宽标题，960px宽中心内容，3列（每个高度为100％）和全宽粘性页脚创建网页设计。

在所有工作示例中，我看到标题，内容和页脚的宽度相同。

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

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

这可以用CSS吗？

2 个答案:

答案 0 :(得分：2)

像这样的东西。请注意，这只是为了引导您找到正确的方向。你必须通过使用任何技术和粘性页脚来坚持使用相同高度的柱子。

标记

<!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

试试这个。这很完美。即使内容不足，页脚也会粘在底部，当内容较多时，页脚会向下推。此外，不会出现verticaly 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;
}

希望这有帮助。

答案 1 :(得分：1)

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

您需要将3列放在包装器（或其他内容）和标题中，将导航和页脚固定在包装器外部。现在，您可以使导航，页眉和页脚100％宽度和包装960px。

相关问题
最新问题