多年来我尝试了很多不同的技术,但我仍然找不到一种方法,我可以创建一个页脚,动态改变高度,取决于内容,如果网站内容较少,页脚去到页面底部.
我试过玩:: after伪元素:
footer::after {
content: '';
position: absolute;
background: red; //just test
width: 100%;
height: 99px;
}
而且我发现了一种方法,在那里你可以做到这一点看起来不错,但你需要设置页脚的高度.但是如果你想要一个真正的响应式UI,你就无法设置页脚的高度:)
我希望有人知道这个秘密,如何创建一个动态的页脚.
你想要的是具有流体高度的粘性页脚.
在旧版浏览器中,您需要一些JavaScript.
在现代浏览器中,您可以使用css表显示类型:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0pt;
}
.Frame {
display: table;
height: 100%;
width: 100%;
}
.Row {
display: table-row;
height: 1px;
}
.Row.Expand {
height: auto;
}
</style>
</head>
<body class="Frame">
<header class="Row"><h1>Catchy header</h1></header>
<section class="Row Expand"><h2>Awesome content</h2></section>
<footer class="Row"><h3>Sticky footer</h3></footer>
</body>
</html>
我从这个例子中得到了:
http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
编辑:现在我看到你想扩展页脚,而不是内容.因为它是更常见的版本,我将离开原始的带有粘性页脚问题的旁路者.
请尝试使用此版本:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0pt;
}
.Frame {
display: table;
height: 100%;
width: 100%;
}
.Row {
display: table-row;
height: 1px;
}
.Row.Expand {
height: auto;
}
</style>
</head>
<body class="Frame">
<header class="Row"><h1>Catchy header</h1></header>
<!-- these two line differ from the previous example -->
<section class="Row"><h2>Awesome content</h2></section>
<footer class="Row Expand"><h3>Sticky footer</h3></footer>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
11021 次 |
| 最近记录： |