cari

Rumah  >  Soal Jawab  >  teks badan

Pengaki berada di bahagian bawah halaman atau bahagian bawah kandungan (yang mana lebih rendah)

Saya mempunyai struktur berikut: 

<body>
    <div id="main-wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <footer>
        </footer>
    </div>
</body>

Saya menggunakan javascript untuk memuatkan kandungan secara dinamik dalam

中的内容。因此，

. Oleh itu, ketinggian blok

mungkin berubah.

Saya mahu blok


berada di bahagian bawah halaman apabila terdapat banyak kandungan, atau di bahagian bawah tetingkap penyemak imbas apabila terdapat hanya beberapa baris kandungan.

Pada masa ini saya boleh memilih satu atau yang lain...tetapi bukan kedua-duanya.

Adakah sesiapa tahu bagaimana saya boleh melakukan ini - minta


tampal ke bahagian bawah halaman/kandungan atau bahagian bawah skrin, yang mana lebih rendah.
🎜🎜🎜
P粉716228245P粉716228245397 hari yang lalu495

membalas semua(2)saya akan balas

  • P粉344355715

    P粉3443557152024-01-22 14:23:30

    Footer Sticky Ryan Fait ialah penyelesaian mudah yang telah saya gunakan banyak kali pada masa lalu.

    HTML Asas:

    <div class="wrapper">
    <div class="header">
        <h1>CSS Sticky Footer</h1>
    </div>
    <div class="content"></div>
    <div class="push"></div>
</div>
<div class="footer"></div>

    CSS:

    * {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

    Terjemahkan ini kepada sesuatu yang serupa dengan apa yang telah anda perolehi, kira-kira seperti ini:

    HTML:

    <body>
    <div class="wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <div class="push"></div>
    </div>
    <footer>
    </footer>
</body>

    CSS:

    * {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

    Cuma jangan lupa untuk mengemas kini nombor negatif pada jidar pembalut agar sepadan dengan ketinggian pengaki dan tolak div. Semoga berjaya!

    balas
    0
  • P粉970736384

    P粉9707363842024-01-22 10:09:20

    Footer Sticky Ryan Fait sangat bagus, tetapi saya mendapati ia tidak mempunyai struktur asas*.

    Versi Flexbox

    Jika anda bernasib baik untuk menggunakan Flexbox tanpa menyokong penyemak imbas yang lebih lama, pengaki melekit adalah sangat mudah, dan sokong mengubah saiz pengaki secara dinamik.

    Cara membuat footer melekat pada bahagian bawah menggunakan Flexbox adalah dengan membuat elemen lain dalam bekas yang sama membengkok secara menegak. Apa yang diperlukan hanyalah elemen adik beradik dengan display: flex 的全高包装元素和至少一个 flex 值大于 0: <子>CSS: 

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

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

    html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#main-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
}
article {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}
    <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

    balas
    0
  • Batalbalas