Question

多年来我尝试了很多不同的技术，但我仍然无法找到一种方法，我可以创建一个页脚，即根据内容动态更改高度，如果网站内容较少，页脚下到页面底部。

我尝试使用:: after伪元素：

footer::after {
    content: '';
    position: absolute;
    background: red; //just test
    width: 100%;
    height: 99px;
}

我找到了一种方法，你可以做到这一点看起来不错，但你需要设置页脚的高度。但是，如果您想要一个真正的响应式UI，则无法设置页脚的高度：）

我希望有人知道这个秘密，如何创建一个动态的页脚。

Answer 1

你想要的是具有流体高度的粘性页脚。

在旧版浏览器中，您需要一些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>

Answer 2

这可以很容易be done与CSS2.1（但不是在IE7-）。主要技巧如下：

.container {
    display: table;
    height: 100%;
    width: 100% /* mimics `display: block` */
}
.footer {
    display: table-footer-group;
}
/* to add padding use the below or wrapper/inner wrapping element combo. */
.footer:before, .footer:after {
    padding: 1em;
    content: '';
}

在现代浏览器中，它也可以使用FlexBox完成，这在理论上可能更合适，但支持程度较低。

Answer 3

这是粘性页脚，请试试这个：

HTML

<div id="container">
   <div id="header">Header Section</div>
   <div id="page" class="clearfix">
      <div id="left">Left Sidebar</div>
      <div id="content">Main content</div>
      <div id="right">Right sidebar</div>
   </div>
   <div id="footer">Footer Section</div>
</div>

CSS

/*sticky footer style*/
html,body {
  margin: 0;
  padding:0;
  height: 100%;
}
#container {
  min-height:100%;
  height: auto !important;
  height: 100%; /*for ie6*/
  position: relative;
}
#header {
  background: #ff0;
  padding: 10px;
}
#page {
  width: 960px;
  margin: 0 auto;
  padding-bottom: 60px;/* equal to the footer's height*/
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;/*The footer' height*/
  background: #6cf;
  clear:both;
}
/*=======主体内容部分=======*/
#left {
  width: 220px;
  float: left;
  margin-right: 20px;
  background: lime;
}
#content {
  background: orange;
  float: left;
  width: 480px;
  margin-right: 20px;
}
#right{
  background: green;
  float: right;
  width: 220px;
}

请查看demo。其他方法，您可以点击here。

你可以使用CSS3 flexbox模块，像这样：

HTML

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

CSS

header,section,footer {
  display: block;
}
html,body{
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  width: 100%;
  display: -moz-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -moz-box-orient: vertical;
  -webkit-box-orient: vertical;
  -moz-box-direction: normal;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
section {
  -moz-box-flex:1;
  -webkit-box-flex:1;
  -ms-flex:1;
  -webkit-flex:1;
  flex:1;

  background: hsla(250,20%,30%,0.9);
}
header {
  background: orange;
}
footer {
  background: green;
}

请查看demo。关于css3 flexbox module。

如何制作真正的动态页脚？

3 个答案:

HTML

CSS

HTML

CSS