2

我正在尝试应用粘性页脚，但在 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;
}

布局.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

而不是删除 clear floats css changing content: "."tocontent: ""似乎也具有相同的效果。

对此原因的解释将不胜感激，欢呼。

问候，泽。

4

1 回答 1

3

对于那个填充问题，我鼓励你查看这个边界框方法。它将填充移动到 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 谈论边界框

对于页脚：

看看这支笔：加权页脚

您的代码中已经有 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;}Inside each section 以使该标准列网站看起来。我会备份你的 CSS 文件并像你一样做更多的测试。

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

于 2013-02-17T19:03:38.807 回答