スティッキー フッターを適用しようとしていますが、Orchard 内でこれを実装するのに問題があります。
以前の Web サイトで、次のスティッキー フッター メソッドをうまく適用しました: http://www.cssstickyfooter.com/using-sticky-footer-code.html
Orchard 内でスティッキー フッターを機能させることができず、それについて何も見つけることができません。
既存のすべての CSS を削除して、成功せずに機能しない理由を突き止めようとしました。firebug を使用して HTML を検査するときも賢明ではありません。
使用するテンプレート: カスタム テーマ ベースのテーマ マシン (構造に関しては変更なし)。
問題：
ゾーンのパディングsite.cssがこれらの奇妙な問題を引き起こしています。しかし、スティッキーフッターを実現できるように、これからパディングを維持するにはどうすればよいですか?
ゾーンのパディングがないと、すべてのゾーンに必要なすべてのパディングがなくなるためです。
/* Zones */
.zone
{
padding: 10px;
}
または、Orchard がスティッキー フッターを実現するためにより適した方法が他にありますか?
補足質問
@tag.StartElement と @tag.EndElement の目的は何ですか?
CSS: (フッターの高さは正確に 40px です)
html, body
{
height: 100%;
}
#layout-wrapper { min-height: 100%; }
#layout-footer
{
position: relative;
margin-top: -40px; /* negative value of footer height */
clear:both;
background-color: #030e27;
}
レイアウト.cshmtl:
@tag.StartElement
@if (Model.Header != null)
{
<header>
<div id="layout-header" class="group">
<div id="header">
@Zone(Model.Header)
</div>
</div>
<div id="layout-header-bottom"></div>
</header>
}
@if (Model.Navigation != null)
{
<div id="layout-navigation" class="group">
<div id="navigation">
@Zone(Model.Navigation)
</div>
</div>
}
@if (Model.Featured != null) {
<div id="layout-featured" class="group">
@Zone(Model.Featured)
</div>
}
@if (Model.BeforeMain != null) {
<div id="layout-before-main" class="group">
@Zone(Model.BeforeMain)
</div>
}
<div id="layout-main-container">
<div id="layout-main" class="group">
@if (Model.AsideFirst != null) {
<aside id="aside-first" class="aside-first group">
@Zone(Model.AsideFirst)
</aside>
}
<div id="layout-content" class="group">
@if (Model.Messages != null) {
<div id="messages">
@Zone(Model.Messages)
</div>
}
@if (Model.BeforeContent != null) {
<div id="before-content">
@Zone(Model.BeforeContent)
</div>
}
@* the model content for the page is in the Content zone @ the default position (nothing, zero, zilch) *@
@if (Model.Content != null) {
<div id="content" class="group">
@Zone(Model.Content)
</div>
}
@if (Model.AfterContent != null) {
<div id="after-content">
@Zone(Model.AfterContent)
</div>
}
</div>
@if (Model.AsideSecond != null) {
<aside id="aside-second" class="aside-second">
@Zone(Model.AsideSecond)
</aside>
}
</div>
</div>
@if (Model.AfterMain != null) {
<div id="layout-after-main" class="group">
@Zone(Model.AfterMain)
</div>
}
@if (Model.TripelFirst != null || Model.TripelSecond != null || Model.TripelThird != null) {
<div id="layout-tripel-container">
<div id="layout-tripel" class="group">@* as in beer *@
@if (Model.TripelFirst != null) {
<div id="tripel-first">
@Zone(Model.TripelFirst)
</div>
}
@if (Model.TripelSecond != null) {
<div id="tripel-second">
@Zone(Model.TripelSecond)
</div>
}
@if (Model.TripelThird != null) {
<div id="tripel-third">
@Zone(Model.TripelThird)
</div>
}
</div>
</div>
}
@tag.EndElement
<div id="layout-footer" class="group">
<footer id="footer">
<div id="footer-quad" class="group">
@if (Model.FooterQuadFirst != null) {
<div id="footer-quad-first">
@Zone(Model.FooterQuadFirst)
</div>
}
@if (Model.FooterQuadSecond != null) {
<div id="footer-quad-second">
@Zone(Model.FooterQuadSecond)
</div>
}
@if (Model.FooterQuadThird != null) {
<div id="footer-quad-third">
@Zone(Model.FooterQuadThird)
</div>
}
@if (Model.FooterQuadFourth != null) {
<div id="footer-quad-fourth">
@Zone(Model.FooterQuadFourth)
</div>
}
</div>
@if(Model.Footer != null) {
<div id="footer-sig" class="group">
@Zone(Model.Footer)
</div>
}
</footer>
</div>
アップデート
次の Orchard CSS の削除と組み合わせた Derk のソリューションは、そのトリックを行っているようです。
/* Clearing Floats
***************************************************************/
.group:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.zone:after, .widget-control:after /* .zone:after self clears every zone container - .widget-control:after self clears any floats used in a widget */
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
更新 2
クリアフロート csschanging content: "."を削除する代わりにcontent: ""、同じ効果があるようです。
この原因の説明をいただければ幸いです。
よろしく、Zer。