0

Cssでスティッキーフッターを作っています。思い通りにいかない。フッターは一番下にくっつきますが、ページの高さも 100% にしたいです。これはうまくいきません、そして私はたくさん試しました。現在、フッターがコンテナの邪魔になり、重なっています。containermargin-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 に答える