0

フッターが下部に固定されたテンプレートを作成しようとしています。さまざまな方法を試してみましたが、セカンダリ コンテンツ div を 100% の高さで展開することは不可能であることがわかりました。Ryan Fait、David Walsh を試し、他の方法を検索しました。よくある質問だと思いますが、スタックオーバーフローではまだ解決策を見ていません。

ここで例を見ることができます: http://jsfiddle.net/charlyta/hyfUe/

    * {
        margin: 0;
        padding: 0;
        }

    body, html {
        height: 100%;
        }

    #container {
        background: #f00; /* styling only */
        width: 100%;
        margin: 0 auto;
        position: relative;
        height: auto !important;
        min-height: 100%;
        height: 100%;



        }

    #content {
        padding-bottom: 100px;
        width: 980px;
        background-color: #FFF;
        margin: 0 auto;
        min-height: 100%;
        margin-top: -20px;
        -webkit-box-shadow: 0px 1px 3px rgba(27, 57, 50, 0.44);
        -moz-box-shadow:    0px 1px 3px rgba(27, 57, 50, 0.44);
        box-shadow:         0px 1px 3px rgba(27, 57, 50, 0.44);
        -moz-border-radius: 5px;
        border-radius: 5px;
        position: relative;
         max-height:100%;
        height:auto !important;
         height: 100%;
        overflow: hidden;

        }

    #footer {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100px;
        width: 100%;
        background: #0f0;
        }

        #header {

        height: 100px;
        width: 100%;
        background: #0f0;
        }

</style>


<div id="container">
<div id="header">
header
</div>
    <div id="content">
        Your content goes here
    </div>
    <div id="footer">
        Footer here
    </div>        
</div>
 </body>
4

3 に答える 3

1

cssのいくつかの変更

* {
    margin: 0;
    padding: 0;
    }

#container {
    background: #f00; /* styling only */
    display:block;
    margin: 0 auto;
    min-height: 100%;
    }

#content {
    padding-bottom: 100px;
    width: 980px;
    background-color: #FFF;
    margin: 0 auto;
    min-height: 100%;
    margin-top: -20px;
    -webkit-box-shadow: 0px 1px 3px rgba(27, 57, 50, 0.44);
    -moz-box-shadow:    0px 1px 3px rgba(27, 57, 50, 0.44);
    box-shadow:         0px 1px 3px rgba(27, 57, 50, 0.44);
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: relative;
     max-height:100%;
    height:auto !important;
     height: 100%;
    overflow: hidden;
    }

#footer {
    display:block;
    position: fixed; /* here is where the magic happens =D */
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: #0f0;
    }

    #header {

    height: 100px;
    width: 100%;
    background: #0f0;
    }

フッターを下部に固定する場合、フッターをコンテナー内に配置することはできません。したがって、yout html は次のようにする必要があります。

<div id="container">
    <div id="header">
    header
    </div>

    <div id="content">
        Your content goes here
    </div>
</div>

<div id="footer">
    Footer here
</div>

これがあなたの望むものだと思います。

于 2012-11-07T13:29:34.220 に答える
1

編集：

これで再試行してください：

http://jsfiddle.net/hyfUe/12/

    #container {
        background: #f00; /* styling only */
        width: 100%;
        margin: 0 auto;
        /*position: relative;*/
        /*height: auto !important;*/
        /*min-height: 100%;*/
        height: calc(100% - 120px); /* MAGIC */
    }

    #content {
        border: 3px dashed silver; /* DEBUG */
        padding-bottom: 100px;
        width: 980px;
        background-color: #FFF;
        /*margin: 0 auto; /* REMOVED */
        /*min-height: 100%; /* REMOVED */
        margin-top: -20px;
        margin-bottom: 100px;
        -webkit-box-shadow: 0px 1px 3px rgba(27, 57, 50, 0.44);
        -moz-box-shadow:    0px 1px 3px rgba(27, 57, 50, 0.44);
        box-shadow:         0px 1px 3px rgba(27, 57, 50, 0.44);
        -moz-border-radius: 5px;
        border-radius: 5px;
        display: block;
        height: calc(100% - 170px) !important; /* MAGIC */
        }

    #footer {
        opacity: 0.5; /* DEBUG */
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100px;
        width: 100%;
        background: #0f0;
        }
于 2012-11-07T13:11:21.210 に答える
0 

.container-for-fix-footer {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
footer {
  height: 50px;
  flex-shrink: 0; /* this is what does the trick */
  background-color: black;
}
main {
  flex: 1 0 auto;
}
<div class="container-for-fix-footer">
  header
  <main class="content">
  content
  </main>
  <footer>FOOTER</footer>
</div>

于 2020-06-17T12:35:47.050 に答える