Липкий нижний колонтитул Orchard CMS

Question

Я пытаюсь применить липкий нижний колонтитул, но у меня возникли проблемы с его внедрением в Orchard.

В предыдущем сайте я применил следующий метод липкого колонтитула успешно: http://www.cssstickyfooter.com/using-sticky-footer-code.html

Я просто не могу получить липкий колонтитул работать в саде, и я не могу найти ничего об этом.

Уже пробовал удалить все существующие CSS, чтобы попытаться выяснить, почему он не работает без каких-либо успехов. Не усложняйтесь при проверке HTML с помощью firebug.

Используемый шаблон: Пользовательская тема на основе темы (структура мудрая без изменений).

Проблема:

Зона обивка в 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> 

Update

Soluti Дерк в в сочетании с удалением следующего 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; 
} 

Update 2

Вместо удаления прозрачных поплавков Css changing content: "." к content: "" кажется, также быть с таким же эффектом.

Объяснение причины этого было бы весьма полезно, приветствия.

С уважением, Zer.

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 и тело в коде - но у вас есть wra какой-нибудь?

Если нет, то вам нужно поставить один в:

<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 и проверил еще несколько тестов, как вы делали.

Я надеюсь, что это поможет! Я провел столько часов и дней, сражаясь с этим липким нижним колонтитулом!