css - 100% 宽度的粘性页脚 + 标题，但居中的 3 列内容高度为 100%？

标签 css sticky-footer

我正在尝试创建一个具有全宽固定菜单、全宽标题、960 像素宽居中内容和 3 列(每列高度为 100%)和全宽粘性页脚的网页设计。

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

(已编辑)我的问题是让列在任何屏幕尺寸下拉伸(stretch)到屏幕的全高，从页眉底部到页脚顶部。

我已经举了一个我想要实现的例子:http://muku.dk/example.jpg

这可以用 CSS 实现吗？

最佳答案

是这样的。请注意，这只是为了引导您朝着正确的方向前进。您必须使用任何技术和粘性页脚自己将等高列粘贴到那里。

标记

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

试试这个。这很完美。即使没有足够的内容，Footer 也会粘在底部，当有更多内容时会向下推。垂直滚动条也不会出现。现在请不要让我也让列的高度相同。

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;
}

希望这对您有所帮助。

关于css - 100% 宽度的粘性页脚 + 标题，但居中的 3 列内容高度为 100%？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9119726/

上一篇：javascript - 我的 textarea 文本没有按照我希望的方式使用 javascript 将其设置为 CSS

下一篇：html - 奇怪的 CSS 填充？

相关文章：

html - 粘性 "footer"到 div 底部而不是页面

javascript - JS onclick div 消失，直到播放动画

CSS 粘性页脚在 8250 BlackBerry 设备上不起作用

javascript - 防止粘性表单输入的位置变化

css - 将html转换为pdf时如何防止文本溢出(并填充div)？

css - IE 8 中的粘性页脚仅在直接访问页面后才与内容重叠

html - CSS Sticky Footer Menu - 检查元素时布局损坏

html - 当我将鼠标悬停在测试类上时，左侧类的颜色没有改变

javascript - 与 ui-sref 的链接不显示正确的 css

javascript - 如何排除 div 触发此事件？

©2024 IT工具网  联系我们