Divimi kabının altına nasıl yerleştirebilirim?

741

Aşağıdaki HTML verildiğinde:

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>
Snippet'i genişlet

#copyrightDibine bağlı kalmak istiyorum #container.

Mutlak konumlandırma kullanmadan bunu başarabilir miyim? Şamandıra özelliği 'alt' değerini destekliyorsa, bu hile yapacak gibi görünüyor, ancak maalesef öyle değil.

html  css 
— Donal
kaynak
211
Bu durum, düzen tablolarının henüz gitmemesinin nedenlerinden biridir. Bunu bir tablo ile yapmak çok basittir ve her yerde çalışır. Bunu CSS'de yapmak çok zor ve çapraz tarayıcı desteği de öyle. Bırakalım bunu nasıl doğru yapacağınızı hatırlamak imkansız.
— Tomalak
Soruyu anlamıyorum. Neden mutlak konumlandırma kullanmanız gerekiyor? Kap, içerdiği içeriğe bakılmaksızın belirli bir yüksekliğe sahip mi?
— HartleySan

Yanıtlar:

922

Muhtemelen hayır.

Ata position:relativeiçin #container, ve sonra position:absolute; bottom:0;için #copyright.

#container {
    position: relative;
}
#copyright {
    position: absolute;
    bottom: 0;
}
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>
Snippet'i genişlet

— kullanıcı
kaynak
10
Konteynerinize göre konum: göreli tasarımınızı bozarsa, yalnızca kabın içine% 100 yükseklikte bir sargı bölmesi ekleyebileceğinizi ve bunun yerine konum: ekleyebilirsiniz.
— Jack Shepherd
ve tekrarlayan elemanlar içinse, aksi takdirde birbirinin üzerine yerleştirilir?
— CRice
6
Kesin olarak konumlandırılmış bir eleman, konumunu belirlemek için mutlak veya nispeten pozisyon olan en yakın ebeveyni arar. Hepsi başarısız olursa vücuda başvurur (pencere). Dolayısıyla ebeveynin göreli olması gerekir.
— user17753
1
sayfa içeriği üzerinde telif hakkını önlemek için #container 'a kenar boşluğu ekleyin
— Doc Kodam
1
Aşağıdaki Flexbox yaklaşımı çok daha iyi.
— woohoo
345

Aslında, @User tarafından kabul edilen cevap sadece pencere uzunsa ve içerik kısasa çalışır. Ancak içerik uzunsa ve pencere kısaysa, telif hakkı bilgilerini sayfa içeriğinin üzerine koyar ve içeriği görmek için aşağı kaydırdığınızda kayan bir telif hakkı bildirimi kalır. Bu, bu çözümü çoğu sayfa için işe yaramaz hale getirir (aslında bu sayfa gibi).

Bunu yapmanın en yaygın yolu, gösterilen "CSS yapışkan altbilgi" yaklaşımı veya biraz daha ince bir çeşitlemedir. Bu yaklaşım harika çalışıyor - Sabit bir yükseklik altbilginiz varsa.

İçerik çok kısaysa pencerenin altında ve pencere çok kısaysa içeriğin altında görünecek değişken bir yükseklik altbilgisine ihtiyacınız varsa ne yaparsınız?

Gururunuzu yutun ve bir masa kullanın.

Örneğin:

* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
}

#container {
    height: 100%;
    border-collapse: collapse;
}
<!DOCTYPE html>
<html>
<body>
    <table id="container">
        <tr>
            <td valign="top">
                <div id="main">Lorem ipsum, etc.</div>
            </td>
        </tr>
        <tr>
            <td valign="bottom">
                <div id="footer">Copyright some evil company...</div>
            </td>
        </tr>
    </table>
</body>
</html>
Snippet'i genişlet

Denemek. Bu, herhangi bir pencere boyutu için, herhangi bir miktarda içerik için, herhangi bir boyut altbilgisi için, her tarayıcıda bile çalışır ... hatta IE6.

Düzen için bir tablo kullanma düşüncesinden eminseniz, kendinize nedenini sormak için bir saniye ayırın. CSS'nin hayatlarımızı kolaylaştırması gerekiyordu - ve genel olarak - ama gerçek şu ki, bunca yıldan sonra bile, hala kırık, karşı sezgisel bir karmaşa. Her sorunu çözemez. Tamamlanmadı.

Tablolar havalı değil, ama en azından şimdilik, bazen bir tasarım problemini çözmenin en iyi yolu.

— Rick Reilly
kaynak
80
Bana en iyi cevap gibi görünüyor. Ayrıca, html tabloları yerine her zaman "css tabloları" (display: table [-row / -cell]) kullanabilirsiniz. Bu, semantik olmadan aynı düzeni sağlar.
— chiccodoro
1
Sayfanızı oluşturan bir PHP komut dosyanız / başka bir komut dosyanız varsa, birini gizli bir "boşluk bırakıcı" olarak ve diğerini kesinlikle konumlandırarak altbilginizi çoğaltabilirsiniz. Aralayıcı altbilgisi, altbilginizde ne kadar içeriğiniz olursa olsun, sayfanın yukarı gitmemesini sağlar.
— Tyzoid
20
Bu yorumları okuyan başkaları için: "gurur" ya da "havalı" olmakla hiçbir ilgisi yoktur. Düzen için tablo kullanmak, özellikle büyük miktarlarda içerik için pragmatik olarak daha da acı vericidir. Bir td'yi kaçırmadığınızdan emin olun ve içerik eklerken çok alakasız işaretlemeyi eleyin. Bu sadece mizanpajlar değil, HTML dokümanları oluşturmamızın da acı verici bir nedeni ve belgemizin içeriğinin çoğu tablo verisi değilse neden tablolara koyuyoruz? Web teknolojilerini amaçlandığı gibi kullanmayı sevmiyorsak neden kullanıyoruz? Bunun yerine içerik yayınlamak için masaüstü / mobil uygulamaları kullanın
— gabe
1
@chiccodoro Şaşırtıcı derecede minimal bir tablo olmadan eşdeğer uyguladım, aşağıdaki cevabımı kontrol et
— Hashbrown
59
Gurur ilgisiz. Erişilebilirlik nedeniyle tablolar mizanpaj için kullanılmamalıdır. Daha önce bir ekran okuyucu kullandıysanız, tabloların neden yalnızca tablo verileri için kullanılması gerektiğini bilirsiniz. @ Chiccodoro durumları olarak css tablolarını kullanın.
— Matt Fellows
171

Flexbox yaklaşımı!

In desteklenen tarayıcılar , aşağıdakileri kullanabilirsiniz:

Buraya Örnek

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

Kod snippet'ini göster

Yukarıdaki çözüm muhtemelen daha esnektir, ancak burada alternatif bir çözüm vardır:

Buraya Örnek

.parent {
  display: flex;
}
.child {
  align-self: flex-end;
}

Kod snippet'ini göster

Yan not olarak, ek destek için satıcı önekleri eklemek isteyebilirsiniz.

— Josh Crozier
kaynak
3
column-reverseebeveyne ne dersin , çocuğa hiçbir şey eklemene gerek yok mu?
— Max Waterman
1
Bu muhtemelen kabul edilen cevap olmalıdır - kesmek yok, mutlak konumlandırma yok, taşma gerektiğinde temiz çalışıyor (benim için).
— Adverbly
114

Evet bunu absolutekonumlandırma olmadan ve tables (işaretleme ve benzeri vidalı) kullanmadan yapabilirsiniz.

DEMO
IE> 7, chrome, FF üzerinde çalışmak için test edilmiştir ve mevcut düzeninize eklemek gerçekten kolay bir şeydir.

<div id="container">
    Some content you don't want affected by the "bottom floating" div
    <div>supports not just text</div>

    <div class="foot">
        Some other content you want kept to the bottom
        <div>this is in a div</div>
    </div>
</div>
#container {
    height:100%;
    border-collapse:collapse;
    display : table;
}

.foot {
    display : table-row;
    vertical-align : bottom;
    height : 1px;
}

float:bottomSorunu muhasebeleştirmek bile @Rick Reilly'nin cevabında etkili bir şekilde yapıyor !

— hashbrown
kaynak
1
Güzel! Sadece bir not, IIRC <!DOCTYPE>bunun IE üzerinde çalışması için set gerekir (en az <= 8); bu eski sürümler yalnızca display:table-XXX"standartlar" modunda desteklenir. Ancak standartlar modu IE6 için tasarlanmış birçok sayfayı da kırar.
— David
3
Flexbox'ı da kullanabilirsiniz - stackoverflow.com/questions/526035/…
— Josh Crozier
2
İle daha fazla şans buldum .foot{display: table-footer-group}. Ben gerek yoktu vertical-align, heightya da border-collapse.
— Jacob Valenta
Bu, #containeryalnızca içeriyorsa #footve başka içerik yoksa çalışır mı ?
— Solace
en azından kırılmayacak bir alana ihtiyacı var gibi görünüyor , @Solace
— Hashbrown
20

Bu eski bir soru, ama bu birkaç durumda yardımcı olabilecek benzersiz bir yaklaşımdır.

Saf CSS, Mutlak konumlandırma olmadan, Yüksekliği Sabitlemeden, Çapraz Tarayıcı (IE9 +)

Check Out Fiddle

Normal akış 'yukarıdan aşağıya' olduğundan, #copyrightdiv'den bir tür kesinlikle konumlandırma yapmadan ebeveyninin altına yapışmasını isteyemeyiz, ancak div'in ebeveyninin #copyrightüstüne yapışmasını istiyorsak, çok basit olacak - çünkü bu normal akış yolu.

Yani bunu kendi yararımıza kullanacağız. divHTML'deki s sırasını değiştireceğiz , şimdi #copyrightdiv en üstte ve içerik hemen takip ediyor. içerik div'inin sonuna kadar uzatılmasını sağlıyoruz (sözde öğeler ve temizleme teknikleri kullanarak)

şimdi sadece bu düzeni görünümde tersine çevirme meselesi. CSS dönüşümü ile kolayca yapılabilir.

Konteyneri 180 derece döndürüyoruz ve şimdi: yukarı-aşağı. (ve tekrar normal görünmesi için içeriği tersine çeviriyoruz)

İçerik alanı içinde bir scroolbar kullanmak istiyorsak, biraz daha fazla CSS büyüsü uygulamalıyız. gösterdi edilebilir Burada [bu örnekte, içerik bir başlık altında - ama aynı fikir]

* {
  margin: 0;
  padding: 0;
}

html,
body,
#Container {
  height: 100%;
  color: white;
}

#Container:before {
  content: '';
  height: 100%;
  float: left;
}

#Copyright {
  background-color: green;
}

#Stretch {
  background-color: blue;
}

#Stretch:after {
  content: '';
  display: block;
  clear: both;
}

#Container,
#Container>div {
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
<div id="Container">
  <div id="Copyright">
    Copyright Foo web designs
  </div>
  <div id="Stretch">
    <!-- Other elements here -->
    <div>Element 1</div>
    <div>Element 2</div>
  </div>
</div>
Snippet'i genişlet

— avrahamcool
kaynak
2
Lütfen hayır, göz render şimdi ne kadar korkunç i.stack.imgur.com/ZP9Hw.png
— GRG
7

divYukarıdaki öğeler için başka bir kap oluşturun #copyright. Telif hakkının hemen üstüne yeni bir tane ekleyin div: Altbilgiyi , göreli konumlandırma ( ) kullanması gibi, her şeyin altında olmaya <div style="clear:both;"></div> zorlar .bottom:0px;

— Rápli András
kaynak
7

Bunu dene;

<div id="container">
  <div style="height: 100%; border:1px solid #ff0000;">
  <!-- Other elements here -->
  </div>
</div>
<div id="copyright" style="position:relative;border:1px solid #00ff00;top:-25px">
   Copyright Foo web designs
</div>

— Gary Green
kaynak
1
@Feelsbadman Lütfen bu tür yanıtlarda diğer insanların kodlarını değiştirmeyin. CSS'yi HTML'den ayırmak istiyorsanız, kodu yanlışlıkla başka bir şeye değiştirdiğinizi, muhtemelen yanıtı geçersiz kıldığını ve posterin niyetini kesinlikle değiştirdiğinizi lütfen unutmayın.
— TylerH
6

Burada verilen cevapların hiçbiri benim özel durumumda geçerli ya da çalışmıyor gibi görünse de, bu düzgün çözümü sağlayan bu makaleye rastladım :

#container {
  display: table;
}

#copyright {
  display: table-footer-group;
}

bodyKendisini bir tablo olarak ayarlayarak, bir web sitesinin tüm html kodunu yeniden düzenlemek zorunda kalmadan mobil ekran için duyarlı tasarım uygulamak için çok yararlı buluyorum .

Yalnızca ilkinin table-footer-groupveya table-header-groupbu şekilde oluşturulacağını unutmayın: Birden fazla varsa, diğerleri olarak oluşturulur table-row-group.

— Skippy le Grand Gourou
kaynak
6

CSS Izgarası

CSS Izgarasının kullanımı arttığından, align-selfbir ızgara kabının içindeki öğeye önermek istiyorum .

align-selfdeğerlerin herhangi birini ihtiva edebilecektir: end, self-end, flex-endörneğin aşağıdaki.

#parent {
  display: grid;
}

#child1 {
  align-self: end;
}

/* Extra Styling for Snippet */

#parent {
  height: 150px;
  background: #5548B0;
  color: #fff;
  padding: 10px;
  font-family: sans-serif;
}

#child1 {
  height: 50px;
  width: 50px;
  background: #6A67CE;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}
<div id="parent">
  <!-- Other elements here -->
  <div id="child1">
    1
  </div>

</div>
Snippet'i genişlet

— Manoj Kumar
kaynak
5

Sen gerçekten edebilir alignkutu bottomkullanmadan position:absolutebiliyorsanız heightait #containerkullanılarak metin hizalama özelliği inline-blockelemanları.

Burada çalışırken görebilirsiniz.

Bu kod:

#container {
    /* So the #container most have a fixed height */
    height: 300px;
    line-height: 300px;
    background:Red;
}

#container > * {
    /* Restore Line height to Normal */
    line-height: 1.2em;
}

#copyright {
    display:inline-block;
    vertical-align:bottom;
    width:100%; /* Let it be a block */
    background:green;
}
— jacmkno
kaynak
5

TranslateY ve top özelliğini kullanma

Öğe alt öğesini şu konuma getirin: göreceli ve üste taşıyın:% 100 (ebeveynin% 100 yüksekliği) ve dönüşümle ebeveynin altına yapışır: translateY (-100%) (yüksekliğinin% -100'ü) çocuk).

Yararları

  • Eğer yok sayfa akışından eleman almak
  • dinamik

Ama yine de sadece geçici çözüm :(

.copyright{
   position: relative;
   top: 100%;
   transform: translateY(-100%);
}

Eski tarayıcı için önekleri unutmayın.

— Samuell
kaynak
4

CodePen bağlantısı buraya .

html, body {
    width: 100%;
    height: 100%;
}

.overlay {
    min-height: 100%;
    position: relative;
}

.container {
    width: 900px;
    position: relative;
    padding-bottom: 50px;
}

.height {
    width: 900px;
    height: 50px;
}

.footer {
    width: 900px;
    height: 50px;
    position: absolute;
    bottom: 0;
}
<div class="overlay">
    <div class="container">
        <div class="height">
            content
        </div>
    </div>

    <div class="footer">
        footer
    </div>
</div>
Snippet'i genişlet

— azizarslan
kaynak
3

Konteynerin yüksekliğine bakılmaksızın tabana "yapışmasını" istiyorsanız, mutlak konumlandırma gitmek için bir yoldur. Elbette, telif hakkı öğesi kaptaki son öğeyse, yine de her zaman en altta olacaktır.

Sorunuzu genişletebilir misiniz? Tam olarak ne yapmaya çalıştığınızı (ve neden mutlak konumlandırma kullanmak istemediğinizi) açıklayın?

— Jack Sleight
kaynak
2

Ayrıca, position:absolute;veya ile ilgili şartlar position:relative;varsa, her zaman padding ebeveyn div veya a koyarak deneyebilirsiniz margin-top:x;. Çoğu durumda çok iyi bir yöntem değildir, ancak bazı durumlarda kullanışlı olabilir.

— Hayalet Yankı
kaynak
1

Belki bu birine yardımcı olur: Div'i her zaman diğer divın dışına yerleştirip negatif kenar boşluğu kullanarak yukarı doğru itebilirsiniz:

<div id="container" style="background-color: #ccc; padding-bottom: 30px;">
  Hello!
</div>
<div id="copyright" style="margin-top: -20px;">
  Copyright Foo web designs
</div>
— DesignConsult
kaynak
1 

 #container{width:100%; float:left; position:relative;}
#copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;}
#container{background:gray; height:100px;}
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>
Snippet'i genişlet

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>
Snippet'i genişlet

— Anmol Ratan Mohla
kaynak
1

Altta yapışkan altbilgi için "konum: mutlak" kullanmak istemiyorum. Sonra şu şekilde yapabilirsiniz:

 html,
        body {
            height: 100%;
            margin: 0;
        }
        .wrapper {
            min-height: 100%;
            /* Equal to height of footer */
            /* But also accounting for potential margin-bottom of last child */
            margin-bottom: -50px;
        }
        .footer{
            background: #000;
            text-align: center;
            color: #fff;
        }
        .footer,
        .push {
            height: 50px;
        }
<html>
<body>
    <!--HTML Code-->
    <div class="wrapper">
        <div class="content">content</div>
        <div class="push"></div>
    </div>
    <footer class="footer">test</footer>
</body>
</html>
Snippet'i genişlet

— nilesh pawar
kaynak
Merhaba nilesh; bu çözüm zaten birden fazla cevapta sunulmaktadır. İçeriğin çoğaltılmamasını sağlamak için, yeni bir soru sağlamadan önce bir soruya verilen tüm yanıtları okuduğunuzdan emin olun !
— TylerH
1

Çocuk bloğunun yüksekliğini bilmiyorsanız:

#parent {
    background:green;
    width:200px;
    height:200px;
    display:table-cell;
    vertical-align:bottom;
}
.child {
    background:red;
    vertical-align:bottom;
}
<div id="parent">
    <div class="child">child
    </div> 
</div>
Snippet'i genişlet

http://jsbin.com/ULUXIFon/3/edit

Alt bloğun yüksekliğini biliyorsanız, alt bloğu ekleyin, ardından dolgu üst / kenar boşluğu üstünü ekleyin:

#parent {
    background:green;
    width:200px;
    height:130px;
    padding-top:70px;
}
.child {
    background:red;
    vertical-align:
    bottom;
    height:130px;
}
<div id="parent">
    <div class="child">child
    </div> 
</div>
Snippet'i genişlet

— zloctb
kaynak
0

Bunun hiç bahsedilmemesi nedeniyle, sizinki gibi durumlarda genellikle işe yarayan şey:

Copy-div öğesinin container-div öğesinden sonra yerleştirilmesi

Copyright-div öğesini yalnızca diğer kaba benzer şekilde biçimlendirmeniz gerekir (aynı toplam genişlik, merkezleme vb.) Ve her şey yolunda.

CSS:

#container, #copyright {
    width: 1000px;
    margin:0 auto;
}

HTML:

<div id="container">
    <!-- Other elements here -->
</div>

<div id="copyright">
    Copyright Foo web designs
</div>

Bunun ideal olmayabileceği tek zaman container-div'ınızla bildirildiğinde height:100%ve kullanıcının telif hakkını görmek için aşağı kaydırması gerektiğidir. Ancak yine de çalışabilirsiniz (örneğin margin-top:-20px, telif hakkı öğenizin yüksekliği 20 piksel olduğunda).

  • Mutlak konumlandırma yok
  • Tablo düzeni yok
  • Hiçbir deli css, diğer tarayıcılarda farklı görünüyor (en azından IE)
  • Basit ve net biçimlendirme

Bir yana: OP'nin "..." konteyner "div'in altına yapıştığı ..." ve altında bir şey olmadığını belirten bir çözüm istediğini biliyorum , ama hadi, insanlar burada iyi çözümler arıyorlar ve bu biridir!

— Levi kabilesinden kimse
kaynak
#Copyright sabit yüksekliği (o zaman ayarlayabilirsiniz eğer OP'ın durumda, bu çözüm sadece iyidir margin-top: -{element height}.
— Gajus
@Gajus: Bu mutlak veya sabit konumlandırma değildir. Bu, OP'nin istediği şeyi yapar (telif hakkı yüksekliği ne olursa olsun), copyright-div'in ilk kapsayıcıda olmaması dışında. OP telif hakkı istedi sayfanın değil, kabın altına yapışmasını istedi !!
— Levite
Maalesef, # kapsayıcısının kabının yüksekliği sabitse demek istemiyorum.
— Ocak'ta Gajus
Kendimi yanılmıyorsam, OP'nin çözmeye çalıştığı asıl sorun, eleman yüksekliği başka bir eleman tarafından dikte edildiğinde elemanın alt kısmıdır , örneğin yorumlarla jsbin.com/acoVevI/3 . Burada düğmeyi kabın dışına koyamazsınız . Sorunu daha fazla açıklamak için bkz. Jsbin.com/acoVevI/4 .
— Ocak'ta Gajus
OP şöyle dedi: "#copyright'ın #container tabanına yapışmasını istiyorum.", Bu yüzden bu sorudan tam olarak anlaşılamıyor. Ayrıca bu, "#container tabanına yapışması" gereken her durum için geçerli bir örnektir. Bu çözüm yardımcı olmalı, temiz bir yaklaşıma sahiptir ve birçok düzen için iyi çalışır. Örneğin, stackoverflow.com ;-) gibi içerik kaydırma içeren herhangi bir sayfa
— Levite
0

Burada, yüksekliği ve genişliği (en azından yaklaşık olarak) bilinen bir öğeyi sağa doğru yüzer ve altta kalırken, diğer öğelere satır içi eleman olarak davranmayı hedefleyen bir yaklaşım vardır. Sağ altta odaklanmıştır, çünkü diğer yöntemlerle kolayca başka bir köşeye yerleştirebilirsiniz.

Yerleşimi bozmadan çubuğun kendisinin düzgün şekilde gerilmesini sağlarken, sağ altta gerçek bağlantıları olan bir gezinme çubuğu ve rastgele kardeş öğeleri yapmam gerekiyordu. Gezinme çubuğunun bağlantılarının alanını işgal etmek için bir "gölge" öğesi kullandım ve kabın alt düğümlerinin sonuna ekledim.

<!DOCTYPE html>
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
  <span id="copyright-s">filler</span>
</div>

<style>
  #copyright {
    display:inline-block;
    position:absolute;
    bottom:0;
    right:0;
  }
  #copyright-s {
    float:right;
    visibility:hidden;
    width:20em; /* ~ #copyright.style.width */
    height:3em; /* ~ #copyright.style.height */
  }
</style>
— Zyox
kaynak
0

float:bottomCSS'de çağrılan bir şey yok . Bu gibi durumlarda konumlandırmayı kullanmanın en iyi yolu:

position:absolute;
bottom:0;
— Touhid Rahman
kaynak
Lütfen cevabınızı açıklayınız.
— Mohit Raj Purohit
0

Kapta sadece bir çocuk olanlar için, table-cellvevertical-align , ebeveyninin alt kısmında tek bir div konumlandırmak için güvenilir bir şekilde çalışan yaklaşımını .

table-footer-groupBelirtilen diğer cevaplar olarak kullanmanın ebeveynin yükseklik hesaplamasını kıracağını unutmayın table.

#container {
    display: table;
    width: 100%;
    height: 200px;
}
#item {
    display: table-cell;
    vertical-align: bottom;
}
<div id="container">
    <div id="item">Single bottom item</div>
</div>
Snippet'i genişlet

— Hai Zhang
kaynak
0

Göre: w3schools.com

Konumu olan bir eleman: mutlak; en yakın konumlandırılmış ataya göre konumlandırılır (sabit gibi görüntü alanına göre konumlandırılmak yerine).

Bu nedenle, üst öğeyi göreceli veya mutlak, vb. Bir şeyle konumlandırmanız ve istenen öğeyi mutlak ve son olarak altta 0 olarak ayarlamanız gerekir.

— Jonas Freire
kaynak
Bu, kabul edilen cevapta (diğerleri arasında) zaten belirtilmiştir.
— TylerH
-1

Stil div position:absolute;bottom:5px;width:100%;, çalışıyor, ama daha fazla kaydırma durumu gerekli.

window.onscroll = function() {
    var v = document.getElementById("copyright");
    v.style.position = "fixed";
    v.style.bottom = "5px";
}
— nicejay
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.