1

私は現在、@ http://development.aycdesign.net/skinで Joomla 2.5 テンプレートに取り組んでおり、これで何日も立ち往生しており、Google はこの問題について友人ではありません。私が達成しようとしているのは、可変サイズのヘッダーと可変サイズのフッターを持ち、コンテンツ コンテナーを常にブラウザー ウィンドウ サイズの最小 100% にすることです。太陽の下でほぼすべてを試しましたが、2つの問題が発生しました。

  1. コンテンツが入っているコンテナが、そのコンテナの 100% の高さまで拡張されません。
  2. スクロールする必要があるページでは、コンテンツの一部がフッターにクリッピングされています。

これに関する提案は大歓迎です。これを解決して先に進むことができます!

<html>
<body>

<div id="wrapper">
        <div id="top">
            header
        </div>
        <div id="mnav">
            main menu
        </div>
        <div id="pagewidth">
                <div id="maincol">
                    content
                </div>
        </div>
        <div id="footer">
            footer
        </div>
</div>

</body>
</html>

....そしてcss：

html,body {
    height:100%;
    background: rgb(138, 126, 102);
    color: #A5A56F;
    font-family: arial, sans-serif;
    font-size: .9em;
    line-height: 1.25;
}

/* ******************************************************************** */ 
/* Wireframe Elements                                                   */
/* ******************************************************************** */   
#wrapper {
    position: relative;
    height:auto !important;
    height:100%;
    min-height:100%;
} 

#top {
       background: rgb(0, 0, 0);
       width: 100%;
}

#top .custom {
       width: 80%;
       margin: 0 auto 0 auto;
       color: #fff;
       text-align: right;
       padding: .5em 0 .5em;
}

#pagewidth {
        width: 80%;
    min-height: 100%;
        background: rgba(54, 54, 54, 0.5);
    text-align: left; 
        margin: 0 auto;
    padding-bottom: 3em;
}


#maincol {

}

#footer {
    background: rgb(0, 0, 0);
        width: 100%;
    height: 5%;
    position: absolute;
    bottom: 0;
}

#footer .custom {
    width: 80%;
    margin: 0 auto;
        color: #fff;
        text-align: right;
    padding: .5em 0 .5em 0;
}
4

3 に答える 3

1

次の CSS を に追加してみてください#pagewidth。

position: absolute;
top: 20px;
bottom: 5%; /* To keep the content from stretching past the footer */
left: 50%;
margin-left: -40%;

http://jsfiddle.net/H8sg8/

がまたはにposition設定されている要素がある場合、 と の両方を使用して、コンテナの上部と下部からそれぞれの距離になるように要素を伸ばすことができます。とにも同じことが使えます。absolutefixedtopbottomleftright

例はこちら

于 2012-11-30T15:54:02.437 に答える
0

問題は、自分の高さを計算するために、子コンテナが親の高さを知らないことです。ありがたいことに、過去にこの問題を調べるために多くの作業が行われました。

粘着性のあるフッターを備えた柔軟なページを取得するために、このようにページを設定するのが好きです.

その方法を 2 つ紹介します。1 つは最新のブラウザー用で、もう 1 つは従来のブラウザー (ie7、ie8、firefox < 17) をサポートする場合用です。

HTML 最新のブラウザー

<div class="page">
    <div class="page-header">
        <div class="container">
        </div>
    </div>
    <div class="container">
        <!--Main content goes here-->
    </div>
</div>
<div class="page-footer">
    <div class="container">
    </div>
</div>

レガシー ブラウザ

<div class="page no-box">
    <div class="page-header">
        <div class="container">
        </div>
    </div>
    <div class="container">
        <!--Main content goes here-->
    </div>
    <div class="page-push">
    <!--Acts as a buffer against the footer-->
    </div>
</div>
<div class="page-footer">
    <div class="container">
    </div>
</div>

CSS

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

.page {
    min-height: 100%;
    position: relative;
    /* Same height as the footer*/
    margin-bottom: -150px;
    padding-bottom: 150px;
    /* These allow the box model to include padding and margin*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

    .page.no-box {
        padding-bottom: 0;
    }

.page-push, .page-footer {
    height: 150px;
}

.page-footer {
    /*make sure it sits on top*/
    position: relative;
    z-index: 1;
}

.container {
    margin: 0 auto;
    width: 80%;
    max-width: 1140px;
}

私はこのシステムを仕事でよく使用しており、それに基づいてレスポンシブ グリッドを作成しました。こちらをご覧ください。うまくいけば、これはすべてあなたにとって理にかなっています。

于 2012-11-30T16:07:03.620 に答える