粘性页脚果园 CMS

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; 放在所有这些上...但是您需要使其尽可能简单以找出问题所在。然后，您可能需要在每个部分中添加另一个 div，例如 .inner {max-width: 980px; margin: 0 auto;}，以使该标准列网站看起来。我会备份你的 CSS 文件并像你一样做更多的测试。

希望对您有所帮助！我花了这么多小时和一天的时间来对抗那个粘页脚！