Question

我正在尝试应用粘性页脚，但在Orchard中实现此问题。

在之前的网站中，我成功应用了以下粘性页脚方法： 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;
}

Layout.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>

更新

Derk的解决方案结合删除以下Orchard CSS似乎正在做的伎俩：

/* 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

而不是删除明确浮动css changing content: "."到content: ""似乎也具有相同的效果。

对此事的解释将非常感激，欢呼。

此致泽尔。

Answer 1

对于该填充问题，我建议您查看此边框方法。它移动div内部的填充而不是外部。因此，您不必在整个项目中计算填充和div宽度等。它非常有用！

/* apply a natural box layout model to all elements */
* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

将它放在你的风格的顶部！可能需要一些调整才能使一个场地模塑成形，但这是值得的。

但是现在：将它添加到.zone的东西：

.zone {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    padding: 10px;
}

您可以在此处详细了解：Paul Irish talks about border-box

对于页脚：

查看此笔：Weighted Footer

你的代码中已经有html和body了 - 但你有某种包装吗？

如果没有，你需要放一个：

<div class="main-wrapper">

    <header></header>

    <section class="main-content"></section>

    <div class="footer-buffer">(BUFFER)</div>

</div> <!-- end .main-wrapper -->

<footer></footer>

这里有非常基本的结构。因此，请检查您的主题是否符合类似内容。

html, body {
  height: 100%;
}

.main-wrapper {
  min-height: 100%;
  height: auto !important; /* for IE 6 */
  height: 100%; /* for IE 6 */
  margin: 0 auto -4em;

  /* new addition */
  overflow: hidden;
}

footer, .footer-buffer {
  height: 4em;
}

我个人会将width: 100%;和float: left;放在所有这些上......但是你需要尽可能简单地解决问题。然后，您可能希望在每个部分中使用.inner {max-width: 980px; margin: 0 auto;}之类的其他div来制作标准列网站。我会备份你的CSS文件并像你一样做更多的测试。

我希望有所帮助！我花了这么多时间与那个粘性页脚作斗争！

粘性页脚果园CMS

1 个答案: