Kaydırma çubukları olsa bile div'in sayfanın içeriğinin altında kalmasını sağlayın

261

Lütfen bu bağlantıya bakın, tam tersini istiyorum: İçerik kaydırma çubuklarına taştığında, altbilgimin her zaman sayfanın tam alt kısmında, Yığın Taşması gibi olmasını istiyorum.

Bir div var id="footer"ve bu CSS:

#footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
}

Ancak tek yaptığı, görünüm penceresinin altına gitmek ve aşağı kaydırsanız bile orada kalıyor, bu yüzden artık altta değil.

Resim: Examlple

Açıkça belirtilmediğinde üzgünüm, düzeltilmesini istemiyorum, yalnızca tüm içeriğin gerçek alt kısmında olması için.

— H Bellamy
kaynak

1

deneyin position:fixed, ancak bu tam olarak bunu yapmak için en iyi yol olmayacak

— redDevil

Pozisyonu deneyin: vücut üzerindeki bağıl.

1

kapatmadın; pozisyondan sonra: mutlak. aksi takdirde mükemmel çalıştı!

— AlexHighHigh

545

Bu tam position: fixedolarak şunlar için tasarlanmıştır:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

İşte keman: http://jsfiddle.net/uw8f9/

— Joseph Silber
kaynak

65

Bu çözüm vakaların% 90'ı için iyi değildir. pencerenizi yeniden boyutlandırırsanız, altbilginiz diğer içerikleri

— kaplar

10

@aroth, çünkü bunlar tamamen farklı iki çözüm. Bu çözüm, altbilgiyi her zaman ekranın görsel alanının altında tutar. Alternatif çözüm altbilgiyi, hangisinin daha büyük olduğuna bağlı olarak ekranın altında veya sayfanın altında tutar;

— Kafam Ağrıyor

6

@MyHeadHurts - Kesinlikle haklısın. Yanıtladıktan sonra, OP'nin istediği bu olmadığını fark ettim, ancak basit bir sabit altbilgi arayan insanlar için burada bıraktım. Yorumlardan (ve oylardan) birçok insan bu temel CSS özelliği ile mücadele ediyor gibi görünüyor.

— Joseph Silber

1

@MyHeadHurts - Yeterince adil, param için ikisi de temelde aynı. İçerik fixedyeterli içerik olduğunda altbilginin altına kayar . Bu benim için yeterince iyi. Tabii ki, stackoverflow'da sahip oldukları gibi çok büyük altbilgilerin fixedyaklaşımla iyi çalışmadığını görebiliyorum , ancak temel bir tek satırlık altbilgi için bu yaklaşım bence iyi çalışıyor.

— aroth

@aroth Kabul ediyorum, bu iyi bir çözüm ve her şey ne istediğinize bağlı. Sadece bir çözümün neden diğerinden daha karmaşık olduğunu gösteriyordum -> aynı şeyi yapmıyorlar.

— Kafam acıyor

187

Ne yazık ki, biraz ekstra HTML ekleyerek ve bir parça CSS'ye sahip olmaktan başka bir şeye güvenemezsiniz.

HTML

İlk önce header, footerve #bodybir #holderdiv içine sarmanız gerekir :

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

CSS

Daha sonra alt öğelerde minimum yüksekliği yüzde olarak ayarlayabilmenizi sağlamak height: 100%için htmlve body( #bodydiv değerinize değil gerçek gövde ) olarak ayarlayın.

Şimdi set min-height: 100%üzerinde #holderekranın içeriğini doldurur ve kullanımı bu yüzden div position: absolutealtındaki altbilgi oturup #holderdiv.

Ne yazık ki, herhangi bir içeriğin üzerinde bulunmadığından emin olmak için ile aynı yükseklikte padding-bottomolan #bodydiv'a başvurmanız gerekir :footerfooter

html,body{
    height: 100%
}

#holder{
    min-height: 100%;
    position:relative;
}

#body{
    padding-bottom: 100px;    /* height of footer */
}

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

Çalışma örneği, kısa beden: http://jsfiddle.net/ELUGc/

Çalışma örneği, uzun gövde: http://jsfiddle.net/ELUGc/1/

— Başım ağrıyor
kaynak

neden genişlik:% 100; gereklidir

— Somnath Kharat

4

@sTACKoVERFLOW - Bir width veya her ikisini belirtmezseniz leftve rightsonra değerler olarak ayarlanır autove öğe içeriğine sığacak şekilde kaydırılır . Belirtme width: 100% veya left: 0 ve right:0mutlak olarak konumlanmış eleman muhafaza elemanının tam genişliği alır olmasını sağlar

— Başım ağrıyor

Benzer bir davranış arıyordum, ama benim durumumda #body div "float: left" diyelim. Kısa vücut örneği işe yarar, ancak uzun vücut örneği işe yaramaz. #Body div üzerinde float kullanarak istenen davranışı nasıl alabilirim herhangi bir öneri.

— Jatin

@Ian, bir cevapta çünkü yorum yapmak için yeterli temsilcisi yoktu: Eğer asp.net'te 'Başım ağrıyor' cevabıyla ilgili sorun yaşıyorsanız - ana 'yükseklik:% 100' eklemeniz gerekir bunun için HTML ve BODY etiketlerinin yanı sıra FORM etiketi oluşturdu.

— msouth

Bunun yerine, tüm vücut içinde daha div içinde işe bu olsun çalışıyorsanız, emin belirttiğiniz yapmak height=100%üzerindeki tüm dahil içeren öğelerin <form>elemanları.

— Ben Caine

13

Sadece yukarıdaki örnek benim için hata var (bir yerde hata) gibi başka bir çözüm için çalıştı. Seçilen cevaptan sapma.

html,body {
    height: 100%
}

#nonFooter {
    min-height: 100%;
    position:relative;
    /* Firefox */
    min-height: -moz-calc(100% - 30px);
    /* WebKit */
    min-height: -webkit-calc(100% - 30px);
    /* Opera */
    min-height: -o-calc(100% - 30px);
    /* Standard */
    min-height: calc(100% - 30px);
}

#footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
}

html düzeni için

<body>
    <div id="nonFooter">header,middle,left,right,etc</div>
    <div id="footer"></div>
</body>

Bu şekilde eski tarayıcıyı desteklemeyin, ancak eski tarayıcının altbilgiyi görüntülemek için 30 piksel kaydırması kabul edilebilir

plunker

— Anonim
kaynak

5

Ben bunu 'diğer cevaplara cevap' için kullanmak değil diyor farkındayız ama ne yazık ki uygun cevap (!) Üzerine yorum eklemek için yeterli temsilcisi yok ama ...

Asp.net'te 'Başım Ağrıyor' cevabıyla ilgili sorun yaşıyorsanız - bunun çalışması için ana oluşturulan FORM etiketine ve HTML ve BODY etiketlerine 'height: 100%' eklemeniz gerekir.

— Ian
kaynak

4

Kapatmadın; pozisyondan sonra: mutlak. Aksi takdirde yukarıdaki kod mükemmel çalışır!

#footer {
   position:absolute;
   bottom:30px;
   width:100%;
}

— AlexHighHigh
kaynak

3

Yapabilirsem yorum yapabilirdim, ancak henüz hiçbir iznim yok, bu yüzden bazı android cihazlarda beklenmedik davranışlar için bir cevap olarak bir ipucu göndereceğim:

Konum: Sabit, yalnızca aşağıdaki meta etiketi kullanarak Android 2.1 ile 2.3 arasında çalışır:

<meta name="viewport" content="width=device-width, user-scalable=no">.

bkz. http://caniuse.com/#search=position

— Tarciso Junior
kaynak

2

Bu, yalnızca minimum yüksekliği görünüm alanı yüksekliğinden altbilgi yüksekliğine ayarlayan viewport komutunu kullanan sezgisel bir çözümdür.

html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}

#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}

— Obromios
kaynak

1

Tüm ana içeriğimi ekstra bir div etiketi (id = "dış") içine koyarak benzer bir sorunu çözdüm. Daha sonra id = "footer" ile div etiketi bu son "dış" div etiketinin dışına taşıdım. "Dış" yüksekliğini belirtmek için CSS kullandım ve "altbilgi" genişliğini ve yüksekliğini belirttim. Ayrıca "altbilgi" nin sol ve sol kenar boşluklarını otomatik olarak belirtmek için CSS kullandım. Sonuç, altbilginin sayfamın altına sıkıca oturması ve sayfayla da kaydırılmasıdır (yine de "dış" div'ın içinde görünmesine rağmen, garip görünen ana "içerik" div'in dışında mutlu bir şekilde, ancak istediğim yerde).

— David B
kaynak

1

Sadece eklemek istiyorum - diğer cevapların çoğu benim için iyi çalıştı; ancak, onları çalıştırmak uzun zaman aldı!

Bunun nedeni, ayarın height: 100%yalnızca üst div yüksekliğini almasıdır!

Yani tüm html'niz (vücudun içinde) aşağıdaki gibi görünüyorsa:

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

Sonra aşağıdakiler iyi olacak:

html,body{
    height: 100%
}

#holder{
    min-height: 100%;
    position:relative;
}

#body{
    padding-bottom: 100px;    /* height of footer */
}

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

... "tutucu" yüksekliğini doğrudan "gövde" den alacağı için.

Kafamı Şeref Yaratır, cevabı işe başladığım cevaptı!

Ancak. Html'niz daha fazla iç içe yerleştirilmişse (yalnızca tam sayfanın bir öğesi olduğu veya belirli bir sütunda vb. Olduğu için), her içeren öğenin div'de de height: 100%ayarlandığından emin olmanız gerekir . Aksi takdirde, yükseklik hakkındaki bilgi "gövde" ve "tutucu" arasında kaybolacaktır.

Örneğin, yüksekliğin üstbilgi / gövde / altbilgi öğelerimize kadar ulaştığından emin olmak için her div'e "tam yükseklik" sınıfını eklediğim yer:

<div class="full-height">
    <div class="container full-height">
        <div id="holder">
            <header>.....</header>
            <div id="body">....</div>
            <footer>....</footer>
        </div>
    </div>
</div>

Ve css'deki tam boy sınıfta yükseklik ayarlamayı unutmayın:

#full-height{
    height: 100%;
}

Sorunlarımı düzeltti!

— Tim L
kaynak

0

sabit bir yükseklik altbilginiz varsa (örneğin 712px) bunu js ile şu şekilde yapabilirsiniz:

var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
    bgTop = winHeight - 712;
    document.getElementById("bg").style.marginTop = bgTop+"px";
}

— George Carlin
kaynak

0

position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;

— Praveen Kundu
kaynak

Lütfen cevabınızda, sorunun ne olduğunu ve bu pasajı nasıl çözeceğini açıklayın, başkalarının bu cevabı anlamasına yardımcı olmak için

— FZs

-2

sabit tabanlı bootstrap sınıfını kullan

<div id="footer" class="fixed-bottom w-100">

— Gowtham Sooryaraj
kaynak

OP'nin Bootstrap kullandığına dair bir gösterge yok.

— TylerH