HTML sayfa altbilgisinin minimum yükseklikte sayfanın altında kalmasını ancak sayfanın üzerine gelmemesini sağlamak için CSS

379

Sayfanın http://www.workingstorage.com/Sample.htmalt kısmında oturup yapamayacağım bir altbilgiye sahip olan aşağıdaki sayfaya (deadlink:) sahiptim .

Altbilginin yapmasını istiyorum

  • sayfa kısa olduğunda ve ekran doldurulmadığında pencerenin altına yapıştırma ve
  • fazla içerik olduğunda (içeriğin üst üste binmek yerine) belge sonunda kalın ve normal şekilde aşağıya doğru hareket edin.

CSS kalıtsaldır ve beni kandırır; İçeriğe minimum yükseklik koymak veya altbilginin alta gitmesini sağlamak için düzgün bir şekilde değiştiremiyorum.

css  footer 
— Caveatrob
kaynak
16
Bunun çok yaygın bir sorun olması şaşırtıcı. Belki CSS4'te "gezinme çubuğu yap" ve "altbilgi yap" uygulamalarını çok sık denediğimiz için göreceğiz.
— izomorfizmalar
1
Asla CSS4 olmayacak (CSS3 büyüyecek). Bunun uygulanmasıyla düzeltileceğini düşünüyorum flexbox.
— Marijke Luttekes
1
Bu konuda mükemmel makale: css-tricks.com/couple-takes-sticky-footer
— Phil
— Lalit Baghel

Yanıtlar:

345

Basit bir yöntem, 100%sayfanızın gövdesini birmin-height arasında 100%çok. Altbilginizin yüksekliği değişmezse bu iyi çalışır.

Altbilgiye negatif kenar boşluğu verin:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}
— Jon Winstanley
kaynak
27
Bu yalnızca, altbilginizin yüksekliğini önceden biliyorsanız biliyorsanız çalışır. Bazen altbilgilerin dinamik içeriği olabilir veya bir çerçeve oluşturursunuz. Değişken yükseklik altbilgileri hakkında herhangi bir fikriniz var mı?
— Costa
@Costa değişken yükseklik altbilgileriyle çalışan bir çözüm bulmak için cevabımı burada kontrol et .
— Jose Rui Santos
dinamik içerik için "yükseklik" değerini atlamanız yeterlidir, altbilgi içeriğe uyum sağlar. Tüm tarayıcılarda test edilmedi
— m47730
Bu box-sizing: border-box;, vücuda [ve #container] ihtiyaç duyabilir .
— konsolebox
Bu çok garip hileler gibi görünüyor, aşağıda basit olan ve hileci olmayan cevaplar var.
— Andrew Koster
165

Altbilgiyi alta yapıştırmak için oldukça kolay bir yöntem geliştirdim, ancak en yaygın yöntemler olarak, Altbilginizin yüksekliğine uyacak şekilde ayarlamanız gerekir.

DEMO'YU GÖRÜNTÜLE

Flexbox yöntemi:

html, body{ height:100%; margin:0; }
header{ height:50px; background:lightcyan; }
footer{ height:50px; background:PapayaWhip; }

/* Trick */
body{ 
  display:flex; 
  flex-direction:column; 
}

footer{
  margin-top:auto; 
}
 
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
Snippet'i genişlet

Aşağıdaki bu yöntem , ::afterüzerine bir sözde öğe yerleştirerek bir "hile" kullanır ve altbilginin tam yüksekliğine bodysahip olacak şekilde ayarlar , böylece altbilgi ile aynı alanı kaplar.absolute üzerine yerleştirilmiş, altbilgi gerçekten yer kaplıyor ve mutlak konumlandırmanın olumsuz etkilerini ortadan kaldırıyor gibi görünüyor (örneğin, vücudun içeriğinin üzerinden geçmek)

position:absolute yöntemi: (dinamik altbilgi yüksekliğine izin vermez)

html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
header{ height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }

/* Trick: */
body {
  position: relative;
}

body::after {
  content: '';
  display: block;
  height: 50px; /* Set same as footer's height */
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
}
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
Snippet'i genişlet

Tablo düzeni yöntemi:

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

header {
  height: 50px;
  background: lightcyan;
}

footer {
  height: 50px;
  background: PapayaWhip;
}


/**** Trick: ****/
body {
  display: table;
  width: 100%; 
}

footer {
   display: table-row;
}
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
Snippet'i genişlet

— vsync
kaynak
Basit ve zarif ve daha da önemlisi işe yarıyor. Div'leri eklemeye başladığınızda diğer çözümler başarısız olur display: table display: table-row display:table-cell. Ancak body {margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0;}bir kaydırma çubuğu önlemek için eklemek için gerekli bulundu . Bunu ayarlayarak bunun için yiyecek ve içecek olabilir body:after heightama benim sorun değil piksel değil rem değil mayın belirtiyorum.
— Steve Waring
3
@SteveWaring - Teşekkür ederim. Oldukça eski olduğu için bu cevap güncellendi. Şimdi kullanmak istiyorumflexbox
— vsync
1
"Temel ortak işaretleme" altındaki CSS, çalışmamasına neden olan küçük bir hataya sahipti (hata, bağlantılı olan "DEMO" da mevcut değildi). Düzeltme özgürlüğünü aldım.
— sleske
3
TEŞEKKÜR EDERİM! Flexbox çözümü aslında basittir ve kesmek veya garip sabit boyutlar veya sabit pozisyonlar kullanmaz.
— Andrew Koster
1
Bu demo çalışan tek kişi! Harika, teşekkürler!
— Drakinite
51

Mükemmel bir çapraz tarayıcı çalışan çok basit bir yaklaşım şudur:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>
Snippet'i genişlet

— Tamás Pap
kaynak
34

Bunu altbilgimi altına yapıştırmak için kullandım ve benim için çalıştı:

HTML

<body>
    <div class="allButFooter">
        <!-- Your page's content goes here, including header, nav, aside, everything -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

Yani HTML yapmak zorunda tek değişiklik var, o ekleyin divile "allButFooter"sınıfındaki. Bunu tüm sayfalarla yaptım, çok kısa olanlarla, altbilginin dibe yapışmayacağını ve ayrıca kaydırmam gerektiğini bildiğim kadar uzun sayfalar olduğunu biliyordum. Bunu yaptım, bu yüzden bir sayfanın içeriğinin dinamik olması durumunda iyi çalıştığını görebiliyordum.

CSS

.allButFooter {
    min-height: calc(100vh - 40px);
}

"allButFooter"Sınıf vardır min-height(görünüm yüksekliği bağlıdır değeri 100vhzaten olduğunu bildiğini, görüntü alanı yüksekliği sayesinde% 100) ve altbilginin yüksekliğini40px .

Tüm yaptığım bu, ve benim için mükemmel çalıştı. Her tarayıcıda denemedim, sadece Firefox, Chrome ve Edge ve sonuçlar istediğim gibi oldu. Altbilgi alta yapışır ve z-endeksi, konum veya diğer özelliklerle uğraşmak zorunda kalmazsınız. Belgemdeki her öğenin konumu varsayılan konumdu, onu mutlak veya sabit veya herhangi bir şeyle değiştirmedim.

Duyarlı tasarımla çalışma

Temizlemek istediğim bir şey var. 40px yüksekliğindeki aynı Altbilgi ile bu çözüm, duyarlı bir tasarımda çalışırken beklediğim gibi çalışmadı Twitter-Bootstrap. Ben işlevde çıkartıldığı değeri değiştirmek zorunda kaldı:

.allButFooter {
    min-height: calc(100vh - 95px); 
}

Muhtemelen Twitter-Bootstrapkendi kenar boşlukları ve dolguları ile geliyor, bu yüzden bu değeri ayarlamam gerekiyordu.

Umarım bu sizin için yararlıdır! En azından, denemek için basit bir çözüm ve tüm belgede büyük değişiklikler yapmayı içermiyor.

— N. Larrieux
kaynak
Bu soruna her türlü çözümle ilgili sorunlar yaşadım. Bu çözüm, display: noneTeşekkür kullanarak gövde içinde görüntülenen değişir sayfam ile çalışır . Çok güzel ve basit.
— Steve Waring
saatlerce çözüm denedikten sonra sadece iki çalıştı. position: fixed; bottom: 0ve bu. Bu çözüm en iyisidir çünkü altbilgi tabana yapışmaz, ancak kaydırılabilir sayfanın sonunda kalır.
— Hmerman6006
cevabınızı temel almak için, simgesini ayarlayarak başka bir şekilde bakabilirsiniz .footer {max-height: calc(100vh+40px); position: absolute}. Aynı zamanda işe yaradığından, sadece bedeninizin boyutunu bilmelisiniz.
— Hmerman6006
29

IE7'den itibaren

#footer {
    position:fixed;
    bottom:0;
}

Destek için bkz .

— Liam
kaynak
77
Altbilginin ötesinde içerik olduğunda altbilgiyi altta istemiyorum. Yeterli olmadığında altbilginin alta yapışmasını ve daha sonra bir taramadan daha fazla olduğunda normal olarak aşağı doğru genişlemesini istiyorum. Yapışkan altbilgi bunu çözdü.
— Caveatrob
@Caveatrob: Yanlış anlamalardan kaçınmak için bu önemli bilgiyi sorunuza düzenleme özgürlüğünü aldım (gelecekteki okuyucular için bunu muhtemelen çözdünüz :-)).
— sleske
Bu çözüm, altbilgiyi her sayfaya yazdıran tek çözümdür ve çok basittir! Ancak içeriğin ana içerikle örtüşmediğini çalıştıramıyorum. Bunun için bir çözümü olan var mı?
— Hatzen
15

Kullandığım basit bir çözüm IE8 + 'dan çalışıyor

Minimum yükseklik verin: html'de% 100, böylece içerik daha azsa sayfa tam görüntüleme bağlantı noktası yüksekliğini ve sayfanın altındaki altbilgi çubuklarını alır. İçerik arttığında, altbilgi içerikle birlikte kayar ve dibe yapışmaya devam eder.

JS keman çalışma Demo: http://jsfiddle.net/3L3h64qo/2/

css

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

Html

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>
— Sanjeev
kaynak
iyi .. ama sadece güncelleme .pageContentWrapper {dolgu-alt: 100px; / * Altbilginin yüksekliği * /}
— Subodh Sharma
Çok teşekkürler. Angular 7
— Carlos Torres
Mümkün olduğunda gereksiz bir kaydırma çubuğu yapmak istemiyorum.
— Константин Ван
14

Yine de, gerçekten basit bir başka çözüm şudur:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}

jsFiddle

İşin püf noktası display:table, tüm belge için ve altbilgi için display:table-rowile birlikte height:0kullanmaktır.

Altbilgi, ekranı olan tek gövde çocuğu olduğundan, table-rowsayfanın alt kısmında görüntülenir.

— Jose Rui Santos
kaynak
Ben css tabloları seviyorum, ama onlar oldukça garip satır aşağı oluşturmak: stackoverflow.com/questions/24898115/…
— Costa
1
Bu çözüm tam olarak çalışmıyor gibi görünüyor - Firefox altbilgi yüksekliğini 0 göz ardı ediyor. Edge, IE11, Chrome ve mobil safari 0'dan memnun.
— Kitet
Bu çözümü gerçekten çok seviyorum. Ancak bu şekilde düzenimi oluşturduğumda, alt öğelerin tarayıcı hesaplaması zorlaşıyor. Sayfanın üstünde bir kap olmasını istediğimizi height: 100%ve görünüm oranı 1/1 (kare) olduğunda aslında% 100 olması gerektiğini varsayalım . Görüntü alanı genişlediğinde (yatay) yükseklik% 100'den fazla ve daha dar (portre)% 100'den az olacaktır. Yani yükseklik pencerenin genişliği ile orantılıdır. Başka bir sarıcı ile çözmeye çalıştım ama bu işe yaramadı. Birisi bir çözüm buldu ya da bir ipucu olsun ???
— Axel
@Axel Bu sürümde , görünüm alanının genişliğine bakılmaksızın, tüm yüksekliği kaplayan% 100 yükseklikte (altbilgi yüksekliği eksi) mavi bir div ekledim. Sanırım başka CSS'leri karıştırıyor olabilirsiniz. Orijinal jsFiddle'ım temelinde sorununuzun küçültülmüş bir sürümünü oluşturmaya çalışın
— Jose Rui Santos
— Axel
8

Sabit yükseklikleri veya elemanların konumunu değiştirmeyen çok basit bir esnek çözüm.

HTML

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

Tarayıcı Desteği

IE11 ve altı dışındaki tüm büyük tarayıcılar.

Uygun önekler için Otomatik Düzeltici kullandığınızdan emin olun .

Kod snippet'ini göster

— m.spyratos
kaynak
bir cazibe gibi çalıştı! hatta res daha 4 k altbilgi sopa alt altında
— Arpan Banerjee
7

Dikkat edilmesi gereken bir şey, mobil cihazlardır, çünkü görünüm fikrini 'alışılmadık' bir şekilde uygularlar:

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

Gibi, kullanarak position: fixed; (başka yerlerde tavsiye gördüğüm genellikle gitmek için yol değildir. Tabii ki, peşinde olduğunuz tam davranışa bağlıdır.

Kullandığım ve masaüstü ve mobil cihazlarda iyi çalıştığım şey:

<body>
    <div id="footer"></div>
</body>

ile

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

#footer {
    position: absolute;
    bottom: 0;
}
— Ben Jackson
kaynak
6

Bunu yap

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

Ayrıca tüm modern tarayıcılar tarafından desteklenen flex hakkında bilgi edinebilirsiniz

Güncelleme : Flex hakkında okudum ve denedim. Benim için çalıştı. Umarım sizin için de aynısını yapar. İşte nasıl uyguladığım: İşte ana ID değil div

body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    display: block;
    flex: 1 0 auto;
}

Burada flex hakkında daha fazla bilgiyi https://css-tricks.com/snippets/css/a-guide-to-flexbox/

IE'nin eski sürümleri tarafından desteklenmediğini unutmayın.

— Aarth Tandel
kaynak
1
Bu uygulamadaki en iyi cevaptır. flex-grow: 1Altbilginin üzerinde bir şey kullanmak altbilgiyi düzgün bir şekilde altta tutar.
— iBug
5

Ben burada benzer bir soru olarak cevap verdim:

Sabit başlık içeren sayfanın altındaki konum altbilgisi

Web geliştirmede oldukça yeniyim ve bunun zaten yanıtlandığını biliyorum, ama bu onu çözmenin en kolay yolu ve bence bir şekilde farklı. Esnek bir şey istedim çünkü web uygulamamın altbilgisi dinamik bir yüksekliğe sahip, FlexBox ve bir aralayıcı kullandım.

  1. HTML ve vücudunuz için yüksekliği ayarlayarak başlayın
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

columnUygulamamız için bir davranış varsayıyorum , dikey olarak bir başlık, kahraman veya herhangi bir içerik eklemeniz gerekiyorsa.

  1. Spacer sınıfını oluşturma
.spacer {
    flex: 1; 
}
  1. Daha sonra HTML'nizde şöyle bir şey olabilir: 
<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

Burada onunla oynayabilirsiniz https://codepen.io/anon/pen/xmGZQL

— kamuflaj
kaynak
5

Bu yapışkan altbilgi olarak bilinir. Bunun için bir google araması birçok sonuç verir. CSS Yapışkan Altbilgisi başarıyla kullandığım. Ama dahası da var.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}
<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>
Snippet'i genişlet

Bu kod için kaynak

— Paolo Bergantino
kaynak
3

Jquery yöntemim, sayfa içeriği pencere yüksekliğinden düşükse altbilgiyi sayfanın altına koyar veya altbilgiyi içeriğin arkasına koyarsa, aksi takdirde:

Ayrıca, diğer koddan önce kodu kendi muhafazasında tutmak altbilgiyi yeniden konumlandırmak için gereken süreyi azaltır.

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
— Sam Jones
kaynak
3

Bu sorunu kendim araştırıyorum. Oldukça az çözüm gördüm ve her birinin sorunları vardı, genellikle bazı sihirli sayıları içeriyordu.

Çeşitli kaynaklardan en iyi uygulamaları kullanarak bu çözümü buldum:

http://jsfiddle.net/vfSM3/248/

Burada özel olarak elde etmek istediğim şey, ana içeriğin altbilgi ve yeşil alan içindeki başlık arasında ilerlemesini sağlamaktı.

İşte basit bir css:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
header {
    height: 4em;
    background-color: red;
    position: relative;
    z-index: 1;
}
.content {
    background: white;
    position: absolute;
    top: 5em;
    bottom: 5em;
    overflow: auto;
}
.contentinner {
}
.container {
    height: 100%;
    margin: -4em 0 -2em 0;
    background: green;
    position: relative;
    overflow: auto;
}
footer {
     height: 2em;
     position: relative;
     z-index: 1;
     background-color: yellow;
}
— husayt
kaynak
3
Bu şekilde tasarlanmış sitelerden nefret ediyorum. Aynı anda okuyabildiğim metin miktarını neden kısıtlamak istiyorsunuz? Üstbilgi ve altbilgiyi her zaman görmem gerekmiyor, onları istediğim zaman nerede bulacağımı biliyorum.
— Tarmil
1
Bir göz @Tarmil numerics.info . Şimdi bunun ne zaman yararlı olabileceğini görüyor musunuz?
— husayt
3

Aynı sorunu bu şekilde çözdüm

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}
<div class="demo">

  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
Snippet'i genişlet

— Nemus
kaynak
2

Altbilgi bölümünü özelleştirmeniz yeterlidir

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}
 <div class="footer">
   Footer is always bootom
 </div>
— rashedcs
kaynak
Çalışmıyor. Çok büyük bir sayfamız olsa bile her zaman dibe yapışır. Tüm sayfa ile kaydırılamaz, sadece alta yapışır.
— fWd82
Çalışmıyor. Altbilgi içeriğin üstüne geliyor.
— indolentdeveloper
1

İşte benim iki sentim. Diğer çözümlerle karşılaştırıldığında, ekstra kaplar eklemek gerekmez. Bu nedenle bu çözüm biraz daha zariftir. Kod örneğinin altında bunun neden çalıştığını açıklayacağım.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>

            html
            {
                height:100%;
            }

            body
            {
                min-height:100%;
                padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
                margin:0; /*see above comment*/
            }

            body
            {
                position:relative;
                padding-bottom:60px; /* Same height as the footer. */           
            }

            footer
            {
                position:absolute;
                bottom:0px;
                height: 60px;

                background-color: red;
            }

        </style>
    </head>
    <body>
        <header>header</header>


        <footer>footer</footer>
    </body>
</html>

İlk yaptığımız şey, en büyük konteyneri (html)% 100 yapmaktır. Html sayfası sayfanın kendisi kadar büyük. Daha sonra vücut yüksekliğini ayarladık, html etiketinin% 100'ünden daha büyük olabilir, ancak en azından büyük olmalı, bu nedenle en az% 100 yükseklik kullanıyoruz.

Ayrıca bedeni göreceli yaparız. Göreli, blok öğesini orijinal konumundan göreli olarak hareket ettirebileceğiniz anlamına gelir. Bunu burada kullanmıyoruz. Çünkü akrabanın ikinci bir kullanımı vardır. Herhangi bir mutlak öğe ya kök (html) ya da ilk göreceli üst / büyükbaba veya büyükanne için mutlaktır. İstediğimiz budur, altbilginin vücuda, yani tabana göre mutlak olmasını isteriz.

Son adım, altbilgiyi mutlak ve tabana ayarlamaktır: 0, göreceli olan ilk ebeveyn / büyükbaba veya büyükannenin altına (dersin gövdesi) hareket eder.

Şimdi düzeltmemiz gereken bir sorun var, sayfanın tamamını doldurduğumuzda içerik altbilginin altına iniyor. Neden? çünkü, altbilgi artık "html akışı" içinde değildir, çünkü mutlaktır. Peki bunu nasıl düzeltebiliriz? Vücuda dolgu tabanı ekleyeceğiz. Bu, vücudun aslında içeriğinden daha büyük olmasını sağlar.

Umarım sizlere çok açıkladım.

— David
kaynak
1

JQuery kullanarak dinamik bir astar

Karşılaştığım tüm CSS yöntemleri çok katı. Ayrıca, fixedtasarımın bir parçası değilse altbilgiyi olarak ayarlamak bir seçenek değildir.

Test tarihi:

  • Krom: 60
  • FF: 54
  • IE: 11

Bu düzen varsayıldığında:

<html>

<body>
  <div id="content"></div>
  <div id="footer"></div>
</body>

</html>

Aşağıdaki jQuery işlevini kullanın:

$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");

Ne yapar ayarlanır min-heightiçin #contentiçin pencere yüksekliği - altbilgi yüksekliğini hiç o anda ne olabileceğini.

Kullandığımızdan beri min-height, #contentyükseklik pencere yüksekliğini aşarsa, işlev zarif bir şekilde bozulur ve gerekmediği için hiçbir şeyi etkilemez.

Uygulamaya bakın:

$("#fix").click(function() {
  $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
    <button id="fix">Fix it!</button>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>
Snippet'i genişlet

JsFiddle'da aynı snippet

Bonus:

Bunu daha ileriye götürebilir ve bu işlevi aşağıdaki gibi dinamik görüntüleyici yüksekliğine yeniden boyutlandırabiliriz:

$(window).resize(function() {
    $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
  }).resize();
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>
Snippet'i genişlet

— Ben haz kode
kaynak
1

Bunu yapabilirsiniz

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}
— Abdallah Abdillah
kaynak
0

Html, body ve altbilgi dışındaki diğer satırları% 100 olarak ayarlamanız yeterlidir. Örneğin

<body>
<header></header>
<content></content>
<footer></footer>

css olur 

html, body, header, content{
height:100%;
}
— Olatunde G.
kaynak
0 
<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>


#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}
— San Jaisy
kaynak
0

Buna ne dersin:

<div style="min-height: 100vh;"> 
 content
</div>

<footer>
 copyright blah blah
</footer>
— novecentonove
kaynak
Bu kod soruyu cevaplayabilirken, bu kodun soruyu neden ve / veya nasıl cevapladığı konusunda ek bağlam sağlamak uzun vadeli değerini arttırır.
— βε.εηοιτ.βε
-1

Birçok projemde kullandım ve hiçbir sorunum olmadı :)

referans için Kod snippet'te 

* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
  background:green;
}
.footer, .push {
	height: 50px; /* .push must be the same height as .footer */
}

.footer{
  background:gold;
  }
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <div class="wrapper">
    Content Area
    </div>
  
  <div class="push">
    </div>
  
  <div class="footer">
    Footer Area
    </div>
</body>
</html>
Snippet'i genişlet

— Santosh Khalse
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.