4

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

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

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

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

我希望任何人都知道其中的秘密，如何创建动态页脚。

4

3 回答 3

8

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

在较旧的浏览器中，您需要一些 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>
于 2013-06-30T22:27:11.873 回答
2

这可以通过 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 来完成，这在理论上可能更合适，但支持较少。

于 2013-07-01T06:43:54.150 回答
-2

它是粘性页脚，请尝试以下操作：

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

请查看演示。其他方法，您可以点击这里。

你可以使用 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;
}

请查看演示。关于css3 flexbox 模块。

于 2013-07-01T01:28:58.407 回答