简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Fragen und Antworten  >  Hauptteil

Die Fußzeile befindet sich am Ende der Seite oder am Ende des Inhalts (je nachdem, welcher Wert niedriger ist).

Ich habe folgende Struktur: 

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

Ich verwende Javascript, um den Inhalt dynamisch in

中的内容。因此，

zu laden. Daher kann sich die Höhe des Blocks

ändern.

Ich möchte, dass sich der


-Block am Ende der Seite befindet, wenn viel Inhalt vorhanden ist, oder am unteren Rand des Browserfensters, wenn nur wenige Zeilen Inhalt vorhanden sind.

Derzeit kann ich mich für das eine oder das andere entscheiden...aber nicht für beides.

Weiß jemand, wie ich das machen kann?


Am unteren Rand der Seite/des Inhalts oder am unteren Rand des Bildschirms einfügen, je nachdem, welcher Wert niedriger ist.
🎜🎜🎜
P粉716228245P粉716228245271 Tage vor440

Antworte allen(2)Ich werde antworten

  • P粉344355715

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

    Ryan Fait 的粘性页脚是一个简单的解决方案，我过去曾多次使用过。

    基本 HTML：

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

*/

    将其翻译为类似于您已经得到的结果，大致如下：

    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 */
}

    只是不要忘记更新包装边距上的负数以匹配页脚和推送 div 的高度。祝你好运！

    Antwort
    0
  • P粉970736384

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

    Ryan Fait 的粘性页脚 是非常好，但是我发现它缺乏基本结构*。

    Flexbox 版本

    如果您足够幸运，可以使用 Flexbox 而无需支持旧版浏览器，那么粘性页脚就会变得非常简单，并且支持动态调整大小的页脚。

    使用 Flexbox 让页脚粘在底部的技巧是让同一容器中的其他元素垂直弯曲。它所需要的只是一个带有 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>

    Antwort
    0
  • StornierenAntwort