741

Diberikan HTML berikut:

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Saya ingin #copyrighttetap di bagian bawah #container.

Dapatkah saya mencapai ini tanpa menggunakan penentuan posisi absolut? Jika properti float mendukung nilai 'bawah' tampaknya akan melakukan trik, tetapi sayangnya tidak.

html css Dónal
sumber

211

Situasi ini adalah salah satu alasan mengapa tabel tata letak belum hilang. Melakukan ini dengan sebuah meja adalah sederhana dan bekerja di mana-mana. Melakukan hal ini dalam CSS sangat sulit dan dukungan lintas browser begitu-begitu. Apalagi itu tidak mungkin untuk mengingat bagaimana melakukannya dengan benar.

Tomalak

Saya tidak mengerti pertanyaannya. Mengapa Anda perlu menggunakan penentuan posisi absolut sama sekali? Apakah wadah memiliki ketinggian yang ditentukan, terlepas dari konten yang dikandungnya?

HartleySan

924

Mungkin tidak.

Tetapkan position:relativeke #container, lalu position:absolute; bottom:0;ke #copyright.

#container {
    position: relative;
}
#copyright {
    position: absolute;
    bottom: 0;
}

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Luaskan cuplikan

Pengguna
sumber

11

Jika posisi: relatif pada wadah Anda mematahkan desain Anda, ingatlah bahwa Anda dapat memasukkan div pembungkus ke dalam wadah dengan tinggi 100%, dan tambahkan posisi: relatif terhadap itu.

Jack Shepherd

dan jika itu untuk elemen berulang, yang seharusnya diposisikan di atas satu sama lain?

CRice

6

Elemen yang diposisikan benar-benar mencari orang tua terdekatnya yang mutlak atau posisi relatif untuk menentukan posisi itu. Jika semuanya gagal, ia menggunakan body (window). Jadi karenanya kebutuhan orangtua menjadi relatif.

user17753

1

tambahkan margin-bottom ke #container untuk mencegah hak cipta atas konten halaman

Doc Kodam

1

Pendekatan Flexbox di bawah ini jauh lebih baik.

Woohoo

345

Sebenarnya, jawaban yang diterima oleh @ Pengguna hanya akan berfungsi jika jendelanya tinggi dan kontennya pendek. Tetapi jika kontennya tinggi dan jendelanya pendek, itu akan menempatkan info hak cipta di atas konten halaman, dan kemudian menggulir ke bawah untuk melihat konten akan meninggalkan Anda dengan pemberitahuan hak cipta mengambang. Itu membuat solusi ini tidak berguna untuk sebagian besar halaman (seperti halaman ini, sebenarnya).

Cara paling umum untuk melakukan ini adalah pendekatan "CSS sticky footer" yang ditunjukkan, atau variasi yang sedikit lebih ramping. Pendekatan ini sangat bagus - JIKA Anda memiliki footer tinggi yang tetap.

Jika Anda memerlukan footer tinggi variabel yang akan muncul di bagian bawah jendela jika konten terlalu pendek, dan di bagian bawah konten jika jendela terlalu pendek, apa yang Anda lakukan?

Telan harga diri Anda dan gunakan meja.

Sebagai contoh:

* {
    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>

Luaskan cuplikan

Cobalah. Ini akan berfungsi untuk ukuran jendela apa pun, untuk jumlah konten apa pun, untuk ukuran kaki berapa pun, di setiap browser ... bahkan IE6.

Jika Anda merasa ngeri membayangkan menggunakan tabel untuk tata letak, luangkan waktu sejenak untuk bertanya pada diri sendiri mengapa. CSS seharusnya membuat hidup kita lebih mudah - dan memang, secara keseluruhan - tetapi faktanya adalah bahwa setelah bertahun-tahun, itu masih berantakan, kontra-intuitif kekacauan. Itu tidak bisa menyelesaikan setiap masalah. Itu tidak lengkap.

Tabel tidak keren, tetapi setidaknya untuk saat ini, mereka kadang-kadang merupakan cara terbaik untuk memecahkan masalah desain.

Rick Reilly
sumber

80

Sepertinya jawaban terbaik untukku. Selain itu, Anda selalu dapat menggunakan "tabel css" (display: table [-row / -cell]) alih-alih tabel html. Itu memberikan tata letak yang sama tanpa semantik.

chiccodoro

1

Jika Anda memiliki skrip PHP / skrip lain yang menghasilkan halaman Anda, Anda dapat menduplikasi footer Anda, menggunakan salah satunya sebagai "spacer" tersembunyi dan satu diposisikan secara absolut. Footer spacer memastikan bahwa tidak peduli berapa banyak konten yang Anda miliki di footer Anda, itu tidak akan naik halaman.

Tyzoid

20

Bagi yang lain membaca komentar ini: ini tidak ada hubungannya dengan "kebanggaan" atau menjadi "keren". Menggunakan tabel untuk tata letak secara pragmatis bahkan lebih menyakitkan terutama untuk sejumlah besar konten. Pastikan Anda tidak melewatkan td dan memilah-milah begitu banyak markup yang tidak relevan ketika menambahkan konten adalah neraka. Ini menyebalkan karena kita membuat dokumen HTML bukan hanya tata letak, dan jika sebagian besar konten dokumen kita bukan data tabular, lalu mengapa kita meletakkannya di tabel? Jika kita tidak suka menggunakan teknologi web seperti yang dimaksudkan, lalu mengapa menggunakannya? Gunakan aplikasi desktop / seluler untuk mempublikasikan konten sebagai gantinya

gabe

1

@ chiccodoro Saya telah menerapkan setara tabel-kurang yang mengejutkan minimal, periksa jawaban saya di bawah ini

Hashbrown

59

Kesombongan tidak relevan. Tabel tidak boleh digunakan untuk tata letak, karena alasan aksesibilitas. Jika Anda pernah menggunakan pembaca layar, Anda akan tahu mengapa tabel harus digunakan hanya untuk data tabular. Gunakan tabel css sebagai status @chiccodoro.

Matt Fellows

171

Pendekatan flexbox!

Di browser yang didukung , Anda dapat menggunakan yang berikut:

Contoh Di Sini

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

Tampilkan cuplikan kode

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
  flex-direction: column;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  margin-top: auto;
}

<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

Luaskan cuplikan

Solusi di atas mungkin lebih fleksibel, namun, berikut ini adalah solusi alternatif:

Contoh Di Sini

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

Tampilkan cuplikan kode

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  align-self: flex-end;
}

<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

Luaskan cuplikan

Sebagai catatan tambahan, Anda mungkin ingin menambahkan awalan vendor untuk dukungan tambahan.

Josh Crozier
sumber

3

bagaimana dengan column-reverseorang tua, jadi Anda tidak perlu menambahkan apa pun pada anak sama sekali?

Max Waterman

1

Ini mungkin seharusnya jawaban yang diterima - tidak ada peretasan, tidak ada posisi absolut, overflow berfungsi dengan bersih bila diperlukan (itu untuk saya).

Adverbly

114

Ya Anda dapat melakukan ini tanpa absolutememposisikan dan tanpa menggunakan tables (yang mengacaukan markup dan semacamnya).

DEMO
Ini diuji untuk bekerja pada IE> 7, chrome, FF & adalah hal yang sangat mudah untuk ditambahkan ke tata letak yang ada.

<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;
}

Secara efektif melakukan apa yang float:bottomakan, bahkan akuntansi untuk masalah yang ditunjukkan dalam jawaban @Rick Reilly!

Hashbrown
sumber

1

Bagus! Hanya sebuah catatan, IIRC Anda perlu <!DOCTYPE>mengatur agar ini bekerja di IE (<= 8 setidaknya); versi yang lebih lama hanya mendukung display:table-XXXmode "standar". Tetapi mode standar juga akan memecah banyak halaman yang dirancang untuk, katakanlah, IE6.

David

3

Anda juga dapat menggunakan flexbox - stackoverflow.com/questions/526035/…

Josh Crozier

2

Saya menemukan lebih banyak keberuntungan .foot{display: table-footer-group}. Aku tidak perlu vertical-align, heightatau border-collapse.

Jacob Valenta

Apakah ini akan berhasil jika #containerhanya berisi #footdan tidak ada konten lain?

Solace

tampaknya setidaknya membutuhkan ruang non-breaking , @Solace

Hashbrown

20

Ini pertanyaan lama, tetapi ini adalah pendekatan unik yang dapat membantu dalam beberapa kasus.

CSS Murni, Tanpa Penentuan Posisi Absolut, Tanpa Memperbaiki Tinggi, Peramban Silang (IE9 +)

lihat biola yang bekerja itu

Karena aliran normal adalah 'top-to-bottom' kita tidak bisa hanya meminta #copyrightdiv untuk tetap pada bagian bawah orang tuanya tanpa benar-benar memposisikan semacam itu, tetapi jika kita ingin #copyrightdiv untuk menempel pada bagian atas orang tuanya, itu akan sangat sederhana - karena ini adalah cara aliran normal.

Jadi kita akan menggunakan ini untuk keuntungan kita. kami akan mengubah urutan huruf divs dalam HTML, sekarang #copyrightdiv berada di atas, dan konten segera mengikutinya. kami juga membuat div konten membentang sepanjang jalan (menggunakan elemen pseudo dan teknik kliring)

sekarang hanya masalah membalikkan urutan itu kembali ke tampilan. yang dapat dengan mudah dilakukan dengan transformasi CSS.

Kami memutar wadah sebanyak 180 derajat, dan sekarang: naik-turun. (dan kami membalikkan konten agar terlihat normal kembali)

Jika kita ingin memiliki scroolbar di dalam area konten, kita perlu menerapkan sedikit lebih banyak sihir CSS. seperti yang dapat ditunjukkan di sini [dalam contoh itu, konten di bawah tajuk - tetapi gagasan yang sama]

* {
  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>

Luaskan cuplikan

avrahamcool
sumber

2

Harap tidak, lihat bagaimana mengerikan rendering sekarang i.stack.imgur.com/ZP9Hw.png

GRG

7

Buat wadah lain divuntuk elemen-elemen di atas #copyright. Tepat di atas hak cipta, tambahkan yang baru div: <div style="clear:both;"></div> Ini akan memaksa footer berada di bawah segalanya, seperti halnya dalam menggunakan posisi relatif ( bottom:0px;).

Rápli András
sumber

7

Coba ini;

<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
sumber

1

@Feelsbadman Tolong jangan mengubah kode orang lain dalam jawaban seperti itu. Jika Anda bermaksud memisahkan CSS dari HTML, harap dicatat bahwa Anda secara tidak sengaja mengubah kode menjadi sesuatu yang lain, mungkin membatalkan jawaban dan tentu saja mengubah maksud poster.

TylerH

6

Sementara tidak ada jawaban yang diberikan di sini tampaknya berlaku atau berfungsi dalam kasus khusus saya, saya menemukan artikel ini yang memberikan solusi rapi ini:

#container {
  display: table;
}

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

Saya merasa sangat berguna untuk menerapkan desain responsif untuk tampilan seluler tanpa harus menyusun ulang semua kode html situs web, mengatur bodydirinya sendiri sebagai tabel.

Perhatikan bahwa hanya yang pertama table-footer-groupatau yang table-header-groupakan dirender seperti itu: jika ada lebih dari satu, yang lain akan diterjemahkan sebagai table-row-group.

Skippy le Grand Gourou
sumber

6

Kotak CSS

Karena penggunaan CSS Grid meningkat, saya ingin menyarankan align-selfelemen yang ada di dalam wadah grid.

align-selfdapat berisi nilai-nilai: end, self-end, flex-enduntuk contoh berikut.

#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>

Luaskan cuplikan

Manoj Kumar
sumber

5

Anda memang bisa alignkotak ke bottomtanpa menggunakan position:absolutejika Anda tahu heighttentang #containerpenggunaan fitur penyelarasan teksinline-block elemen.

Di sini Anda dapat melihatnya beraksi.

Ini kodenya:

#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
sumber

5

Menggunakan translateY dan properti teratas

Cukup atur elemen anak ke posisi: relatif dan daripada memindahkannya ke atas: 100% (itu adalah tinggi 100% dari induk) dan menempel ke bawah induk dengan mentransformasikan: menerjemahkan ((100%)) (itu -100% dari tinggi anak).

Manfaat

Anda tidak mengambil elemen dari aliran halaman
itu dinamis

Tapi masih saja solusinya :(

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

Jangan lupa awalan untuk peramban yang lebih lama.

Samuell
sumber

4

Tautan CodePen di sini .

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>

Luaskan cuplikan

azizarslan
sumber

3

Jika Anda ingin "menempel" ke bawah, terlepas dari ketinggian wadah, maka penentuan posisi absolut adalah cara yang harus dilakukan. Tentu saja, jika elemen hak cipta adalah yang terakhir dalam wadah itu akan selalu ada di bagian bawah.

Bisakah Anda memperluas pertanyaan Anda? Jelaskan dengan tepat apa yang Anda coba lakukan (dan mengapa Anda tidak ingin menggunakan penentuan posisi absolut)?

Jack Sleight
sumber

2

Juga, jika ada ketentuan dengan menggunakan position:absolute;atau position:relative;, Anda selalu dapat mencoba padding orang tua div atau meletakkan margin-top:x;. Bukan metode yang sangat baik dalam banyak kasus, tetapi mungkin berguna dalam beberapa kasus.

Ghost Echo
sumber

1

Mungkin ini membantu seseorang: Anda selalu dapat menempatkan div di luar div lain dan kemudian mendorongnya ke atas menggunakan margin negatif:

<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
sumber

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>

Luaskan cuplikan

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Luaskan cuplikan

Anmol Ratan Mohla
sumber

1

Tidak ingin menggunakan "position: absolute" untuk footer lengket di bagian bawah. Maka Anda bisa melakukan ini:

 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>

Luaskan cuplikan

nilesh pawar
sumber

Hai nilesh; solusi ini sudah disediakan dalam beberapa jawaban. Pastikan untuk membaca semua jawaban yang ada untuk pertanyaan sebelum memberikan yang baru, untuk memastikan tidak ada duplikasi konten!

TylerH

1

Jika Anda tidak tahu ketinggian balok anak:

#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>

Luaskan cuplikan

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

Jika Anda tahu ketinggian blok anak tambahkan blok anak kemudian tambahkan padding-top / margin-top:

#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>

Luaskan cuplikan

zloctb
sumber

0

Hanya karena ini belum disebutkan sama sekali, apa yang biasanya bekerja dengan baik dalam situasi seperti Anda:

Menempatkan div-hak cipta setelah div -wadah

Anda hanya perlu memformat div hak cipta dengan cara yang mirip dengan wadah lain (lebar keseluruhan yang sama, pemusatan, dll.), Dan semuanya baik-baik saja.

CSS:

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

HTML:

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

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

Satu-satunya saat ini mungkin tidak ideal adalah ketika wadah-div Anda dideklarasikan dengan height:100%, dan pengguna harus menggulir ke bawah untuk melihat hak cipta. Tetapi bahkan Anda masih dapat bekerja (misalnya margin-top:-20px- ketika ketinggian elemen hak cipta Anda adalah 20px).

Tidak ada penentuan posisi absolut
Tidak ada tata letak tabel
Tidak ada css gila, yang terlihat berbeda di setiap browser lain (setidaknya IE, Anda tahu)
Pemformatan sederhana dan jelas

Selain itu: Saya tahu OP meminta solusi yang "... menempel pada bagian bawah wadah 'div ..." , dan bukan sesuatu di bawahnya, tetapi ayolah, orang mencari solusi yang baik di sini, dan ini adalah satu!

Orang Lewi
sumber

Dalam kasus OP, solusi ini hanya baik jika #copyright memiliki ketinggian tetap (maka Anda dapat mengatur margin-top: -{element height}.

Gajus

@Gajus: Ini bukan posisi absolut atau tetap. Ini melakukan persis apa yang diinginkan OP (terlepas dari ketinggian hak cipta), dengan satu-satunya pengecualian bahwa div hak cipta bukan DI wadah pertama. OP meminta hak cipta untuk tetap di bagian bawah wadah, bukan halaman !!

Levite

Maaf, maksudku bukan? Wadah # penampung tingginya tetap.

Gajus

Kecuali saya salah sendiri, masalah sebenarnya yang OP coba selesaikan adalah bagian bawah elemen ketika tinggi elemen ditentukan oleh elemen lain, misalnya dengan komentar jsbin.com/acoVevI/3 . Di sini Anda tidak bisa begitu saja meletakkan tombol di luar wadah . Untuk mengilustrasikan masalah lebih lanjut lihat jsbin.com/acoVevI/4 .

Gajus

OP mengatakan: "Saya ingin #copyright menempel pada bagian bawah #container.", Jadi ini tidak sepenuhnya jelas dari pertanyaan. Selain itu, ini adalah contoh yang valid untuk setiap kasus di mana ia harus "menempel pada bagian bawah #container". Solusi ini harus membantu, memiliki pendekatan yang bersih dan bekerja dengan baik untuk banyak tata letak. Misalnya setiap halaman dengan konten gulir, seperti stackoverflow.com ;-)

Levite

0

Berikut ini adalah pendekatan yang ditargetkan untuk membuat elemen dengan ketinggian dan lebar yang diketahui (setidaknya kira-kira) melayang ke kanan dan tetap di bagian bawah, sementara berperilaku sebagai elemen sebaris dengan elemen lainnya. Ini difokuskan di kanan bawah karena Anda dapat menempatkannya dengan mudah di sudut lain melalui metode lain.

Saya perlu membuat bilah navigasi yang akan memiliki tautan aktual di kanan bawah, dan elemen saudara kandung acak, sambil memastikan bahwa bilah itu meregang dengan benar, tanpa mengganggu tata letak. Saya menggunakan elemen "bayangan" untuk menempati ruang tautan bilah navigasi dan menambahkannya di akhir simpul anak kontainer.

<!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
sumber

0

Tidak ada yang disebut float:bottomdalam CSS. Cara terbaik adalah menggunakan pemosisian dalam kasus seperti ini:

position:absolute;
bottom:0;

Touhid Rahman
sumber

Tolong jelaskan jawaban Anda.

Mohit Raj Purohit

0

Untuk mereka yang hanya memiliki satu anak dalam wadah, Anda dapat menggunakan table-celldanvertical-align pendekatan yang bekerja andal untuk memposisikan satu div di bagian bawah induknya.

Perhatikan bahwa menggunakan table-footer-groupjawaban lain yang disebutkan akan mematahkan perhitungan tinggi induk 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>

Luaskan cuplikan

Hai Zhang
sumber

0

Menurut: w3schools.com

Unsur dengan posisi: absolut; diposisikan relatif terhadap leluhur diposisikan terdekat (bukan diposisikan relatif terhadap viewport, seperti tetap).

Jadi, Anda perlu memposisikan elemen induk dengan sesuatu yang relatif atau absolut, dll, dan memposisikan elemen yang diinginkan ke absolut dan yang terakhir disetel ke bawah ke 0.

Jonas Freire
sumber

Ini sudah disebutkan dalam jawaban yang diterima (antara lain).

TylerH

-1

Div gaya, position:absolute;bottom:5px;width:100%;bekerja, tetapi diperlukan situasi scrollup lebih.

window.onscroll = function() {
    var v = document.getElementById("copyright");
    v.style.position = "fixed";
    v.style.bottom = "5px";
}

selamat tinggal
sumber

Bagaimana saya bisa menempatkan div saya di bagian bawah wadahnya?

Jawaban:

Pendekatan flexbox!

CSS Murni, Tanpa Penentuan Posisi Absolut, Tanpa Memperbaiki Tinggi, Peramban Silang (IE9 +)

Kotak CSS

Menggunakan translateY dan properti teratas