Sayfanın veya içeriğin altındaki altbilgi, hangisi daha düşükse

Question 1

Aşağıdaki yapıya sahibim:

<body>
    <div id="main-wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <footer>
        </footer>
    </div>
</body>

<article>Javascript kullanarak içeriği dinamik olarak yüklüyorum . Bu nedenle <article>bloğun yüksekliği değişebilir.

Çok <footer>fazla içerik olduğunda bloğun sayfanın altında veya yalnızca birkaç satır içerik olduğunda tarayıcı penceresinin altında olmasını istiyorum.

Şu anda birini veya diğerini yapabilirim ... ama ikisini birden yapamaz.

Bunu nasıl yapabileceğimi bilen var mı - <footer>hangisinin daha düşük olduğuna bağlı olarak sayfanın / içeriğin altına veya ekranın altına sadık kalın.

Question 2

Ryan Fait'in yapışkan altbilgisi çok güzel, ancak temel yapısının eksik olduğunu düşünüyorum *.

Flexbox Sürümü

Eski tarayıcıları desteklemeye gerek kalmadan flexbox'ı kullanabileceğiniz kadar şanslıysanız, yapışkan altbilgiler önemsiz bir şekilde kolay hale gelir ve dinamik olarak boyutlandırılmış bir altbilgiyi destekler.

Altbilgilerin flexbox ile dibe yapışmasını sağlamanın püf noktası, aynı kaptaki diğer öğelerin dikey olarak esnetilmesidir. Tek gereken, aşağıdakilerden daha büyük display: flexbir flexdeğere sahip en az bir kardeşi olan tam yükseklikte bir sarmalayıcı öğesidir 0:

_CSS:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

Kod parçacığını göster

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#main-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
}
article {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Snippet'i genişlet

Flexbox kullanamıyorsanız, temel seçim yapım:

<div class="page">
  <div class="page__inner">
    <header class="header">
      <div class="header__inner">
      </div>
    </header>
    <nav class="nav">
      <div class="nav__inner">
      </div>
    </nav>
    <main class="wrapper">
      <div class="wrapper__inner">
        <div class="content">
          <div class="content__inner">
          </div>
        </div>
        <div class="sidebar">
          <div class="sidebar__inner">
          </div>
        </div>
      </div>
    </main>
    <footer class="footer">
      <div class="footer__inner">
      </div>
    </footer>
  </div>
</div>

Hangisi o kadar da uzak değil:

<div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
</div>

Altbilgiyi sabitlemenin püf noktası, altbilginin, içerdiği öğenin alt dolgusuna sabitlenmesidir. Bu , altbilgi yüksekliğinin sabit olmasını gerektirir , ancak altbilgilerin tipik olarak statik yükseklikte olduğunu buldum.

_HTML:

<div id="main-wrapper">
    ...
    <footer>
    </footer>
</div>

_CSS:

#main-wrapper {
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

Kod parçacığını göster

#main-wrapper {
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Snippet'i genişlet

Altbilgi sabitlendiğinde, altbilgisi daha uzun olmadıkça, artık en azından sayfanın yüksekliğinde #main-wrapperolmanız gerekir #main-wrapper. Bu yaparak yapılır #main-wrapperbir var min-heightbir 100%. Ayrıca kendi ebeveynleri, hatırlamak zorunda htmlve bodyihtiyaç yanı sayfa olarak uzun boylu gibi olması.

_CSS:

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main-wrapper {
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

Kod parçacığını göster

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

 <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Snippet'i genişlet

Tabii ki, bu kod altbilginin içerik olmadığında bile sayfanın altından düşmesine neden olduğu için benim kararımı sorgulamalısınız. Geçen hile kullandığı kutu modelini değiştirmek için #main-wrapperböylece min-heightbir 100%içermektedir 100pxdolguyu.

_CSS:

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main-wrapper {
    box-sizing: border-box;
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

Kod parçacığını göster

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  box-sizing: border-box;
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

 <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Snippet'i genişlet

Ve işte orada, orijinal HTML yapınızın olduğu yapışkan bir altbilgi var. Sadece emin olmak footer'ın heighteşittir #main-wrappers' padding-bottomve set olmalıdır.

^{* Fait'in yapısında hata bulmamın sebebi , gereksiz bir eleman eklerken .footerve .headerelemanlarını farklı hiyerarşik seviyelerde ayarlamasıdır .push.}

Question 3

Ryan Fait'in yapışkan altbilgisi , geçmişte defalarca kullandığım basit bir çözüm.

Temel HTML :

<div class="wrapper">
    <div class="header">
        <h1>CSS Sticky Footer</h1>
    </div>
    <div class="content"></div>
    <div class="push"></div>
</div>
<div class="footer"></div>

CSS :

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

Bunu halihazırda sahip olduğunuz sonuçlara benzer olacak şekilde çevirmek, şu satırlarda bir şeylerle:

HTML :

<body>
    <div class="wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <div class="push"></div>
    </div>
    <footer>
    </footer>
</body>

CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

Altbilginizin yüksekliğiyle eşleşecek şekilde sarmalayıcı kenar boşluğundaki negatifi güncellemeyi ve div düğmesini itmeyi unutmayın. İyi şanslar!

Question 4

Bu sorunu herhangi bir ek işaret eklemeden çözmeye çalışıyordum, bu yüzden aşağıdaki çözümü kullandım:

article {
  min-height: calc(100vh - 150px); /* deduct the height or margins of any other elements within wrapping container*/
}

footer {
  height: 50px;
}

header {
   height: 50px;
}

nav {
  height: 50px;
}

<body>
  <div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
  </div>
</body>

Snippet'i genişlet

Makalenin minimum yüksekliğini ayarlayabilmek için üstbilgi, gezinme ve altbilgi yüksekliklerini bilmeniz gerekir. Bununla, makale yalnızca birkaç satır içeriğe sahipse, altbilgi tarayıcı penceresinin altına yapışır, aksi takdirde tüm içeriğin altına düşer.

Bunu ve yukarıda yayınlanan diğer çözümleri burada bulabilirsiniz: https://css-tricks.com/couple-takes-sticky-footer/