Sayfanın altına altbilgi bastırma, twitter bootstrap

306

Genellikle bir altbilgiyi css kullanarak yıkama tekniğine aşinayım.

Ama Twitter önyükleme için bu yaklaşımı işe almakta sorun yaşıyorum, büyük olasılıkla Twitter önyükleme doğada duyarlı olması nedeniyle. Twitter önyüklemesini kullanarak Altbilginin yukarıdaki blog yayınında açıklanan yaklaşımı kullanarak sayfanın altına akmasını sağlayamıyorum.

css  twitter-bootstrap  footer 
— Calvin Cheng
kaynak
OP o twitter bootstrap.As ile çalışan var isteyen akılda tutmak altındaki tüm cevaplar testi önce buna sebep sadece benim cevap test etmenizi JavaScript enabled.For demek istediği bir zorunluluktur, jQuery ile twitter önyükleme eserler değildir: stackoverflow.com / sorular / 10099422 /…
— HenryW
4
— kullanıcı
1
Bağlantı koptu! Herkes resmi örnek bağlantısını düzeltebilir mi?
— PassionInfinite
1
@PassionInfinite getbootstrap.com/docs/4.0/examples/sticky-footer-navbar 4.0 sanırım gelecekte daha eski bir sürüm olabilir.
— Ammad Khalid

Yanıtlar:

324

Burada parçacıklar bootstrap için gerçekten iyi çalışıyor bulundu

Html:

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
}
— Chuan Yeong
kaynak
Bu şimdiye kadar denediğim en iyi çözüm. Bunu cevap olarak kabul etti.
— Calvin Cheng
Merhaba, ben bu yöntemi uyguladım, harika çalışıyor ama şimdi iphone sayfa görüntüleme ile ilgili bazı sorunlar var (sayfa yakınlaştırılmış). Herhangi bir fikir sorun nedir? İşte bazı ayrıntılar: stackoverflow.com/questions/18621090/…
— pupadupa
94
Bu cevabı okuduysanız ve aşağı kaydırmamanız durumunda diğer cevaplara bakmaya değer
— MattyW
4
— HenryW
1
Bu Bootstrap için bulduğum en iyi yöntem. Aygıtın yanıt verebilmesi için #main ve .footer yüksekliklerini farklı ekran boyutları için güncellemek üzere medya sorgularını kullanmayı unutmayın
— SyntaxGoonoo
467

Bu şimdi Bootstrap 2.2.1'de bulunmaktadır.

Bootstrap 3.x

Gezinme çubuğu bileşenini kullanın ve .navbar-fixed-bottomsınıf ekleyin :

<div class="navbar navbar-fixed-bottom"></div>

Bootstrap 4.x

<div class="navbar fixed-bottom"></div>

Eklemeyi unutmayın, body { padding-bottom: 70px; }aksi takdirde sayfa içeriği kapsanabilir.

Dokümanlar: http://getbootstrap.com/components/#navbar-fixed-bottom

— Sanon
kaynak
35
@ChuanYeong Maalesef hayır navbar-static-bottom.
— Lawrence Woodman
25
@MikeCurry sabit bir altbilgi sormadı, ancak sayfanız altbilginin en altta kalmasını sağlamak için yeterli içeriğe sahip değilse, boş alanı "dolduran" bir altbilgi sordu. Altbilginiz yalnızca bilgi amaçlıysa, sabit bir bilgi yalnızca değerli alan kaplar.
— rdlu
22
Bu yapışkan altbilgi değildir, çünkü pozisyon kullanılır: sabit; bu doğru değil
— Furkat U.Tem
9
Evet, bu çözüm sayfanın alt kısmına değil görünüm penceresinin altına akar. yani altbilgi her zaman görünür durumdadır.
— rism
3
Bu kafa karışıklığı verdiğinden cevabı küçümsemek zorunda kaldı. OP yapışkan bir altbilgi istemiyor.
— HenryW
77

Twitter bootstrap için çalışma örneği STICKY FOOTER DEĞİL

<script>
$(document).ready(function() {

    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;

    if (footerTop < docHeight)
        $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>

Kullanıcının aygıtları açması veya yeniden boyutlandırması durumunda her zaman güncellenen sürüm.

<script>
    $(document).ready(function() {
        setInterval(function() {
            var docHeight = $(window).height();
            var footerHeight = $('#footer').height();
            var footerTop = $('#footer').position().top + footerHeight;
            var marginTop = (docHeight - footerTop + 10);

            if (footerTop < docHeight)
                $('#footer').css('margin-top', marginTop + 'px'); // padding of 30 on footer
            else
                $('#footer').css('margin-top', '0px');
            // console.log("docheight: " + docHeight + "\n" + "footerheight: " + footerHeight + "\n" + "footertop: " + footerTop + "\n" + "new docheight: " + $(window).height() + "\n" + "margintop: " + marginTop);
        }, 250);
    });
</script>

En az bir öğeye ihtiyacınız var. #footer

İçerik ekrana sığacaksa kaydırma çubuğunun istenmemesi durumunda 10 değerini 0 olarak değiştirin. İçerik ekrana sığmazsa
kaydırma çubuğu görünecektir.

— HenryW
kaynak
9
Evet, ben de bununla gittim. CSS bazen çok aptalca olabilir. Bu imkansız değil, ancak genel amaçlı çözümlerin gelmesi zor olabilir ve bu tür sinir bozucu şeyleri mizanpajlarımızda düzeltmek, yığın alışverişi, çoklu gist revizyonları, çapraz tarayıcı testi ve sonunda basit bir JS'ye teslim olmak için yolculuk yapmamalıdır. hile. Evet, biraz kirli hissediyorum, ama en azından işe yarıyor.
— meecect
3
baktığım her çözüm yanlış. Bu SADECE yapması gereken şeyi yapar - tarayıcı yeniden boyutlandırılırsa herhangi bir içeriği gizlemeden altbilgiyi sayfanın altına yapıştırın.
— Dave
13
benim için beklendiği gibi sessiz işe yaramadı, yine de, daha iyi cevaplardan biri $('#footer').height();ile değiştirerek $('#footer').outerHeight();
— sorunumu giderdim
3
Mükemmel cevap! Burada geliştirmek düşünüyorum birkaç uyarlamaları vardı: stackoverflow.com/a/36385654/8207
— Cory
6
Bulduğum en iyi cevap. Pencerenin yeniden boyutlandırılmasından sonra çalışmasını istiyorsanız, ana kodu içerideki cevaba koyun ve sayfa yüklendiğinde ayarlamayı $(window).resize(function() {//main code goes here});çağırın $(window).resize();.
— Szymon Sadło
36

Bunu resmi sayfadan nasıl uygulayacağınız aşağıda açıklanmıştır:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Hemen şimdi test ettim ve harika çalışıyor! :)

HTML

<body>

    <!-- Part 1: Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Sticky footer</h1>
        </div>
        <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
      </div>

      <div id="push"></div>
    </div>

    <div id="footer">
      <div class="container">
        <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
      </div>
    </div>
</body>

İlgili CSS kodu şudur:

/* Sticky footer styles
-------------------------------------------------- */
html,
body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -30px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
    height: 30px;
}

#footer {
    background-color: #f5f5f5;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
    #footer {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}
— Leniel Maccaferri
kaynak
7
Bunu yayınladığınız için teşekkürler, kesinlikle benim projem için en iyi çözümdü (işe yarayan tek şeyden bahsetmiyorum) ve tabii ki doğrudan projenin kendisinden olması güzel.
— Cory W.
1
Anlaşmanın ne olduğunu bilmiyorum, ama sayfalara kaydırma eklemeden işe yarayamadım. Min. Yüksekliği "calc (100% - 120px)" olacak şekilde .wrapper CSS'sini değiştirdim ve burada 120px altbilgimin yüksekliği oldu ve <div id = "push"> </div> html'den kaldırıldı çünkü ihtiyacım olmayan sayfaya yükseklik eklemekten başka bir şey yapmıyor gibiydim.
— jammyman34
36

İçin Sabit Altbilgi biz ikisini kullanmak DIV'stemel HTML'de yapışkan altbilgi etkisi. Bunun gibi yaz:

HTML

<div class="container"></div>

<div class="footer"></div>

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}
— sandeep
kaynak
7
Twitter Bootstrap kullandığını söyledi. HTML'yi tamamen yeniden yazmadan bunu Bootstrap'e entegre etmenin en kolay yolu nedir?
— Cody Gray
1
OP Yapışkan Altbilgi efekti elde etmek istiyorsa, o zaman onun MarkUp değiştirmek zorunda
— sandeep
Teşekkür ederim! Bu aslında Bootstrap kullanan bir ASP.NET MVC5 sitesinde benim için çalışan tek yöntem oldu. +1
— Yann Duran
19

Ve ben bir karışımı buldum navbar-innerve navbar-fixed-bottom

<div id="footer">
 <div class="navbar navbar-inner  navbar-fixed-bottom">
    <p class="muted credit"><center>ver 1.0.1</center></p>
 </div>
</div>

İyi görünüyor ve benim için çalışıyor

resim açıklamasını buraya girin

İçindeki örneğe bakın Fiddle

— Maxim Shoustin
kaynak
2
en basit ve en zarif çözüm. Bootstrap ile geriye dönük olarak uyumlu olmayacağından, kendi css kodunuzu
— biraraya getirmenin tadını çıkarın
Bunu kullandım ve ekrandan daha kısa sayfalarla eski bir android (froy belki?) Aksi takdirde FF, Chrome, IE11, iPhone, nexus 7'de iyi çalıştı.
— bnieland
Mükemmel ve son derece basit!
— ramires.cabral
18

Bootstrap 4.3'ün en son sürümünde bu, .fixed-bottomsınıf kullanılarak yapılabilir . 

<div class="fixed-bottom"></div>

Altbilgi ile nasıl kullanacağım: 

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

Konum belgelerinde daha fazla bilgiyi burada bulabilirsiniz .

— Mohamed Ali JAMAOUI
kaynak
1
Bu hala resmi 4 sürümü serbest bırakıldı.
— klewis
Getbootstrap.com/docs/4.1/examples/sticky-footer adresindeki örneğin , altbilgi öğesinde satır yüksekliği = 60 piksel stili olduğunu unutmayın. Bu sadece gereksiz olmakla kalmaz, aynı zamanda bir veya daha fazla div öğesinin üst öğesi ise altbilginin düzgün çalışmasını da önler.
— ScottyB
13

HenryW'nin cevabı iyi, ancak istediğim şekilde çalışması için birkaç ince ayar yapmam gerekiyordu. Özellikle aşağıdakiler de ele alınır:

  • Önce görünmez olarak işaretleyerek ve javascript'te görünür olarak ayarlayarak sayfa yükünün "zıplamaması" ndan kaçınma
  • Tarayıcı ile başa çıkmak zarifçe yeniden boyutlandırılır
  • Ayrıca, tarayıcı küçüldükçe ve altbilgi sayfadan büyük hale geldiğinde altbilginin sayfayı yedeklemesi
  • Yükseklik fonksiyonu ayarları

İşte bu ince ayarlarla benim için işe yarayan şey:

HTML:

<div id="footer" class="invisible">My sweet footer</div>

CSS:

#footer {
    padding-bottom: 30px;
}

JavaScript:

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', (docHeight - footerTop) + 'px');
    } else {
        $('#footer').css('margin-top', '');
    }
    $('#footer').removeClass('invisible');
}
$(document).ready(function() {
    setFooterStyle();
    window.onresize = setFooterStyle;
});
— Cory
kaynak
11

Bu benim için mükemmel çalıştı.

Bu sınıfı navbar sabit dipli altbilgiye ekleyin.

<div class="footer navbar-fixed-bottom">

Ben böyle kullandım:

<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>

Ve tam genişliğin altına iner.

Düzenleme: Bu, altbilgiyi her zaman görünür olacak şekilde ayarlayacaktır, dikkate almanız gereken bir şeydir.

— sp_omer
kaynak
10

.container-fluidYapışkan altbilginizin çalışması için div'inizi sarmanız gerekir , ayrıca .wrappersınıfınızda bazı özellikler eksik . Bunu dene:

Kaldır padding-top:70pxsenin dan bodysenin onu etiketi ve dahil .container-fluidşöyle yerine:

.wrapper > .container-fluid {
    padding-top: 70px;
}

Bunu yapmak zorundayız çünkü navbar'ı yerleştirmek için bodyaşağı itmek, altbilgiyi görünüm penceresinden biraz daha ileriye (70 piksel daha fazla) iterek bir kaydırma çubuğu elde edeceğiz. .container-fluidBunun yerine div'i iterek daha iyi sonuçlar alıyoruz .

Daha sonra .wrapperdiv'inizin dışındaki sınıfı kaldırmalı .container-fluidve div'inizi #mainbununla sarmalıyız, şöyle:

<div class="wrapper">
    <div id="main" class="container-fluid">
        <div class="row-fluid">...</div>
        <div class="push"></div>
    </div>
</div>

Tabii ki altbilginiz .wrapperdiv dışında olmalıdır, bu yüzden onu .wrapper div'den çıkarın ve şöyle yerleştirin:

<div class="wrapper">
    ....
</div>
<footer class="container-fluid">
    ....
</footer><!--END .row-fluid-->

Her şey tamamlandıktan sonra .wrapper, aşağıdaki gibi negatif bir kenar boşluğu kullanarak altbilginizi sınıfınıza doğru bir şekilde itin :

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -43px;
}

Ve bu işe yaramalı, ancak ekran yeniden boyutlandırıldığında, .wrappersınıftaki yüksekliği sıfırlamak gibi, çalışmasını sağlamak için muhtemelen birkaç şeyi değiştirmeniz gerekecek :

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}
— Andres Ilich
kaynak
9

Twitter Bootstrap ve yeni navbar sabit alt sınıf ile bunu yapmanın doğru yolu: (bunu aramak için ne kadar zaman harcadığım hakkında hiçbir fikrin yok)

CSS:

html {
  position: relative;
  min-height: 100%;
}
#content {
  padding-bottom: 50px;
}
#footer .navbar{
  position: absolute;
}

HTML:

<html>
  <body>
    <div id="content">...</div>
    <div id="footer">
      <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
          <div class="container">
            <ul class="nav">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
— Régis B.
kaynak
9

Bootstrap 4'te bulunan esnek yardımcı programları kullanın! İşte çoğunlukla Bootstrap 4 yardımcı programlarını kullanıyorum.

<div class="d-flex flex-column" style="min-height: 100vh;">
  <header></header>
  <div class="container flex-grow-1">
    <div>Some Content</div>
  </div>
  <footer></footer>
</div>
  • .d-flex ana div'ı esnek bir kap yapmak için
  • .flex-column ana bölmede esnek öğelerinizi bir sütunda düzenlemek için
  • min-height: 100vh görünümü dikey olarak doldurmak için bir stil özelliğine sahip veya CSS'nizde ana div'e
  • .flex-grow-1 ana içerik kabının görünüm alanı yüksekliğinde kalan tüm alanı kaplaması için öğe.
— EGhost57
kaynak
Yerine Bootstrap dan sınıfında kullanılabilir. min-height: 100vhmin-vh-100
— ikonuk
Bu çözüm, @ikonuk'un min-vh-100 önerisini de içeren harika çalıştı
— TGR
4

Navbar bileşenini kullanın ve .navbar-fixed-bottom sınıfı ekleyin:

<div class="navbar navbar-fixed-bottom"></div>

beden ekle 

  { padding-bottom: 70px; }
— Yönetici Dosyası3
kaynak
3

genişlik kısıtlaması mizanpajlarını işlemek için, köşeleri yuvarlatılmaması ve gezinme çubuğunuzun uygulamanın kenarlarıyla aynı hizada olması için aşağıdakileri kullanın

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <div class="width-constraint clearfix">
            <p class="pull-left muted credit">YourApp v1.0.0</p>

            <p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
        </div>
    </div>
</div>

yüksekliği, yazı tipini ve rengi ayarlamak üzere bootstrap sınıflarını geçersiz kılmak için css kullanabilirsiniz

    .navbar-fixed-bottom {
      font-size: 12px;
      line-height: 18px;
    }
    .navbar-fixed-bottom .navbar-inner {
        min-height: 22px;
    }
    .navbar-fixed-bottom .p {
        margin: 2px 0 2px;
    }
— 1-14x0r
kaynak
3

Bunu işlemek için jQuery kullanabilirsiniz:

$(function() {
    /**
     * Read the size of the window and reposition the footer at the bottom.
     */
    var stickyFooter = function(){
        var pageHeight = $('html').height();
        var windowHeight = $(window).height();
        var footerHeight = $('footer').outerHeight();

        // A footer with 'fixed-bottom' has the CSS attribute "position: absolute",
        // and thus is outside of its container and counted in $('html').height().
        var totalHeight = $('footer').hasClass('fixed-bottom') ?
            pageHeight + footerHeight : pageHeight;

        // If the window is larger than the content, fix the footer at the bottom.
        if (windowHeight >= totalHeight) {
            return $('footer').addClass('fixed-bottom');
        } else {
            // If the page content is larger than the window, the footer must move.
            return $('footer').removeClass('fixed-bottom');
        }
    };

    // Call when this script is first loaded.
    window.onload = stickyFooter;

    // Call again when the window is resized.
    $(window).resize(function() {
        stickyFooter();
    });
});
— DucCuong
kaynak
2

Benim için çalışan tek kişi !:

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}
— Ricardo
kaynak
2

En basit teknik muhtemelen Bootstrap'ı navbar-static-bottomana kapsayıcı div'ı height: 100vh(yeni CSS3 görünüm bağlantı noktası yüzdesi ) ile ayarlamakla birlikte kullanmaktır . Bu, altbilgiyi alta doğru temizler.

<main class="container" style="height: 100vh;">
  some content
</main>      
<footer class="navbar navbar-default navbar-static-bottom">
  <div class="container">
  <p class="navbar-text navbar-left">&copy; Footer4U</p>
  </div>
</footer>
— Pan Wangperawong
kaynak
2

İle test edildi Bootstrap 3.6.6.

HTML

<div class="container footer navbar-fixed-bottom">
  <footer>
    <!-- your footer content here -->
  </footer>
</div>

CSS

.footer {
  bottom: 0;
  position: absolute;
}
— Dušan Maďar
kaynak
1 
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}

Altbilgi yüksekliği, sarma öğesinin alt girintisinin boyutuyla eşleşir.

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}
— Sharpless512
kaynak
1

İşte Flexbox kullanarak Bootstrap'ın en yeni sürümü (yazma sırasında 4.3) için bir çözüm.

HTML:

<div class="wrapper">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex-grow: 1;
}

Ve bir kodlama örneği: https://codepen.io/tillytoby/pen/QPdomR

— Tom T
kaynak
1

Başına Bootstrap 4.3 örneğin , benim yaptığım gibi durumda aklı kaybediyorsun, bu aslında çalışır:

  • Altbilgi div öğesinin tüm ebeveynlerinin height: 100%( h-100sınıf) olması gerekir
  • Altbilginin doğrudan üst öğesinin display: flex( d-flexsınıf) olması gerekir
  • Altbilginin margin-top: auto( mt-autosınıf) olması gerekir

Sorun şu ki, modern ön uç çerçevelerde genellikle bu elemanların etrafında ek sargılar var.

Örneğin, benim durumumda, Angular ile, görünümü ayrı bir uygulama kökünden, ana uygulama bileşeninden ve altbilgi bileşeninden oluşturdum - bunların hepsi özel öğelerini DOM'ye ekledi.

Bu yüzden, çalışmasını sağlamak için, bu sarmalayıcı öğelere sınıflar eklemek zorunda kaldım: bir ek h-100, d-flexbir düzey aşağı iniyor ve mt-autobir düzey altbilgiden yukarı taşınıyor (yani aslında artık altbilgi sınıfında değil, benim <app-footer>özelimde elemanı) sağlanabilir.

— MrValueType
kaynak
Ben koymak zorunda class="h-100"için <html>çok etiketi.
— Kel Solaar
1

Çalıştığı bootstrap'ta bu kod parçasını kullanın

<div class="navbar fixed-bottom">
<div class="container">
 <p class="muted credit">Footer <a href="http://google.com">Link</a> and <a 
href="http://google.com/">link</a>.</p>
 </div>
 </div>
— sanjay
kaynak
1

Bootstrap v4 + çözümü

HTML yapısının veya dolgu içeren herhangi bir ek CSS numarasının yeniden düşünülmesini gerektirmeyen bir çözüm:

<html style="height:100%;">
  ...
  <body class="d-flex flex-column h-100">
    ...
    <main class="flex-grow-1">...</main>
    <footer>...</footer>
  </body>
  ...
</html>

Bu çözümün, özellikle daraltıldığında içerik kaydırmalı birden çok ekran boyutu için sayfalar tasarlarken kullanışlı olan esnek yüksekliklere sahip altbilgilere izin verdiğini unutmayın.

Bu neden çalışıyor?

  • style="height:100%;"yapar <html>etiket belgenin bütün alanını daraltır.
  • sınıf d-flexsetleri display:flexbizim için <body>etiketi.
  • sınıf flex-columnsetleri flex-direction:columnbizim için <body>etiketi. Onun çocuklar ( <header>, <main>,<footer> ve diğer doğrudan çocuk) artık dikey olarak hizalanmış.
  • sınıf h-100setleri height:100%bizim için <body>etiketi, dikey tüm ekranı kaplayacaktır anlamına gelir.
  • sınıf flex-grow-1setleri flex-grow:1kızımız için <main>etkin böylece bizim daha önce belirlenen% 100 dikey yükseklik tutarında, kalan dikey boşluğu doldurmak için talimat <body>etiketi.

Burada çalışan demo: https://codepen.io/maxencemaire/pen/VwvyRQB

Bkz https://css-tricks.com/snippets/css/a-guide-to-flexbox/ flexbox'a hakkında daha fazla bilgi için.

— Kathandrax
kaynak
h-100sınıf düzgün çalışmıyor, kullanmak daha iyidir min-vh-100.
— ikonuk
@ikonuk "Düzgün çalışmıyor" ile tam olarak ne demek istiyorsun? Lütfen detaylandırın.
— Kathandrax
Çünkü h-100sınıf her zaman üst elemanları yüksekliğine bağlıdır ve düzgün bazı durumlarda çalışmayabilir. Vizörün alt kısmında altbilgi istediğimizden, vizör yüksekliğini kullanmak iyi bir uygulamadır.
— ikonuk
Yine, 'bazı vakaları' tanımlayın. Ebeveyn bağımlılığı hakkındaki argümanınız da aynı şekilde geçerlidir min-width. Bu nedenle HTMLetiketin heightkodda% 100'ü vardır . Örnek çalışıyor ve neden Bootstrap snippet'inin çevirdiği CSS heightözelliği için çapraz tarayıcı desteği vermiyor ?
— Kathandrax
Örneğinin işe yaramadığını söylemedim. Herkes HTMLetiketteki stili kullanmaz . Benim durumumda, HTMLetiketinizdeki stili kullanmayı tercih etmediğim için çözümünüz işe yaramadı . Ve bodyetiketin başka bir ebeveyne değil görünüm penceresine bağlı olmasını istemiyorum . Koymak zorunda değilsiniz style="height:100%;"ve h-100aynı zamanda. min-vh-100Vücuda koymak sadece işi ve daha az kodu yapar.
— ikonuk
0

Görünüşe göre height:100%'zincir' kırılıyor div#main. Eklemeyi deneyin height:100%ve bu sizi hedefinize yaklaştırabilir.

— brains911
kaynak
0

Burada HAML ( http://haml.info ) yaklaşımını üstte navbar ve sayfanın altında altbilgi ile bulacaksınız :

%body
  #main{:role => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER
— Hannes
kaynak
Cevabınızı biraz açıklayabilir misiniz? Yalnızca kod yanıtları genellikle önerilmez.
— Qix - MONICA HAZIRLANMIŞ
1
Tamam, ne bilmek istiyorsun?
— Hannes
Bunu bilmek gerek yok, ama birisi tam olarak bilmiyor olabilir daha sonra bu siteye gelen neden sizin cevabınız kod ne yaptığını yapıyor.
— Qix - MONICA
Muhtemelen silmeliyim. Yeni bir giriş yazdım. :)
— Hannes
0

Basit tutun.

footer {
  bottom: 0;
  position: absolute;
}

Ayrıca margin-bottom, altbilgi yüksekliğine eşdeğer ekleyerek altbilginin yüksekliğini dengelemeniz gerekebilir body.

— obfk
kaynak
0

İşte css3 kullanan bir örnek:

CSS:

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML:

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

Vaktini boşa harcamak

— galip
kaynak
0

başka bir olası çözüm, sadece medya sorgularını kullanarak

@media screen and (min-width:1px) and (max-width:767px) {
    .footer {
    }
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:1120px){
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
— GeorgeWL
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.