0

Soooooo 我在 Css 中制作了一个粘性页脚。它不像我想要的那样工作。页脚粘在底部，但我也想要页面的 100% 高度。这不起作用，我已经尝试了很多。目前，页脚妨碍了容器，并且它们重叠。如果我给容器margin-bottom: 70px;，当内容非常小时，它会创建额外的不需要的空间，从而产生不必要的滚动条。

这是我的代码：

<html><head>

<style type='text/css'>

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 800px;
    height: auto !important;
    min-height: 100%;
}

.bold-show {
    font-family: Helvectica, sans-serif;
    font-size: 96px;
    background-color: rgba(0, 0, 0, 0.95);
    color: #eeeeee;
    padding: 50px;
}

#footer {
    position: relative;
    height: 70px;
    width: 100%;
    text-align: center;
    display: table;
    margin-top: -70px;
    background-color: rgba(0, 0, 0, 0.9);
    color: #eeeeee;
}

#footer div {
    display: table-cell;
    vertical-align: middle;
}

</style>

</head><body>

<div class='container'>
    <div class='bold-show'>
    Donuts. Food for thought. This is my place, this fox will guide you. Random filler text for the win.
    </div>
</div>

<div id='footer'>
    <div>
        We support a free and open internet. 
    </div>
</div>

</body></html>

此外，这不是实际的站点。只是测试以在真实站点上实施。

4

1 回答 1

1

我认为这就是您正在寻找的：

<div id="wrapper">
  <header></header>
  <div id="main"></div>
  <footer></footer>
</div>

body, html, #wrapper { height: 100%;  } /* Create space for elements to be 100% */
#wrapper { display: table; } /* Create a table-structure */
#wrapper > * { display: table-row; } /* All direct children behave as rows */
#wrapper > header, 
#wrapper > footer { min-height: 100px; } /* These must be at least 100px */
#main { height: 100%; } /* Let the mid section fill up the remaining space */
于 2013-01-09T22:51:37.900 回答