ส่วนท้ายที่ด้านล่างของหน้าหรือเนื้อหาแล้วแต่จำนวนใดจะต่ำกว่า

Question 1

ฉันมีโครงสร้างดังต่อไปนี้:

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

ฉันโหลดเนื้อหาแบบไดนามิกในการ<article>ใช้จาวาสคริปต์ ด้วยเหตุนี้ความสูงของ<article>บล็อกจึงเปลี่ยนแปลงได้

ฉันต้องการให้<footer>บล็อกอยู่ที่ด้านล่างของหน้าเมื่อมีเนื้อหาจำนวนมากหรือที่ด้านล่างของหน้าต่างเบราว์เซอร์เมื่อมีเนื้อหาเพียงไม่กี่บรรทัด

ในขณะนี้ฉันสามารถทำอย่างใดอย่างหนึ่ง ... แต่ไม่ใช่ทั้งสองอย่าง

ไม่มีใครรู้ว่าฉันทำได้อย่างไร - <footer>ให้ติดที่ด้านล่างของหน้า / เนื้อหาหรือด้านล่างของหน้าจอขึ้นอยู่กับว่าส่วนใดต่ำกว่า

Question 2

ส่วนท้ายที่เหนียวของ Ryan Faitนั้นดีมาก แต่ฉันพบว่าโครงสร้างพื้นฐานนั้นขาด *

เวอร์ชัน Flexbox

หากคุณโชคดีพอที่จะใช้ flexbox ได้โดยไม่จำเป็นต้องรองรับเบราว์เซอร์รุ่นเก่าส่วนท้ายที่ติดหนึบจะกลายเป็นเรื่องง่ายและรองรับส่วนท้ายที่มีขนาดแบบไดนามิก

เคล็ดลับในการทำให้ส่วนท้ายติดกับด้านล่างด้วย flexbox คือให้องค์ประกอบอื่น ๆ ในคอนเทนเนอร์เดียวกันงอในแนวตั้ง สิ่งที่ต้องทำคือองค์ประกอบ Wrapper เต็มความสูงที่มี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>

ขยายข้อมูลโค้ด

หากคุณไม่สามารถใช้ flexbox โครงสร้างพื้นฐานที่ฉันเลือกคือ:

<div class="page">
  <div class="page__inner">
    <header class="header">
      <div class="header__inner">
      </div>
    </header>
    <nav class="nav">
      <div class="nav__inner">
      </div>
    </nav>
    <main class="wrapper">
      <div class="wrapper__inner">
        <div class="content">
          <div class="content__inner">
          </div>
        </div>
        <div class="sidebar">
          <div class="sidebar__inner">
          </div>
        </div>
      </div>
    </main>
    <footer class="footer">
      <div class="footer__inner">
      </div>
    </footer>
  </div>
</div>

ซึ่งไม่ใช่ทั้งหมดที่ห่างไกลจาก:

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

เคล็ดลับในการทำให้ส่วนท้ายติดคือให้ส่วนท้ายยึดกับช่องว่างด้านล่างขององค์ประกอบที่มีอยู่ สิ่งนี้ต้องการให้ความสูงของส่วนท้ายเป็นแบบคงที่ แต่ฉันพบว่าส่วนท้ายมักมีความสูงคงที่

_HTML:

<div id="main-wrapper">
    ...
    <footer>
    </footer>
</div>

_CSS:

#main-wrapper {
    padding: 0 0 100px;
    position: relative;
}

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

แสดงข้อมูลโค้ด

#main-wrapper {
  padding: 0 0 100px;
  position: relative;
}

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

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>

ขยายข้อมูลโค้ด

เมื่อยึดส่วนท้ายไว้#main-wrapperตอนนี้คุณจะต้อง#main-wrapperมีความสูงของหน้าเป็นอย่างน้อยเว้นแต่เด็ก ๆ จะยาวกว่า นี้จะกระทำโดยการ#main-wrapperมีของmin-height 100%คุณต้องจำไว้ว่าพ่อแม่ของมันhtmlและbodyต้องสูงเท่าหน้าด้วยเช่นกัน

_CSS:

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

#main-wrapper {
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

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

แสดงข้อมูลโค้ด

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

#main-wrapper {
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;
}

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

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>

ขยายข้อมูลโค้ด

แน่นอนว่าคุณควรตั้งคำถามกับการตัดสินของฉันเนื่องจากโค้ดนี้บังคับให้ส่วนท้ายหลุดออกจากด้านล่างของหน้าแม้ว่าจะไม่มีเนื้อหาก็ตาม เคล็ดลับสุดท้ายคือการเปลี่ยนรูปแบบกล่องที่ใช้โดย#main-wrapperเพื่อให้min-heightการ100%รวมถึง100pxขยาย

_CSS:

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

#main-wrapper {
    box-sizing: border-box;
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

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

แสดงข้อมูลโค้ด

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

#main-wrapper {
  box-sizing: border-box;
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;
}

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

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>

ขยายข้อมูลโค้ด

และคุณก็มีส่วนท้ายที่มีความเหนียวพร้อมโครงสร้าง HTML ดั้งเดิมของคุณ เพียงตรวจสอบให้แน่ใจว่าfooter's heightเท่ากับ#main-wrapper' padding-bottomและคุณควรตั้งค่า

^{* เหตุผลที่ฉันพบข้อผิดพลาดกับโครงสร้างของ Fait เป็นเพราะมันตั้งค่า.footerและ.headerองค์ประกอบในระดับลำดับชั้นที่แตกต่างกันในขณะที่เพิ่ม.pushองค์ประกอบที่ไม่จำเป็น}

Question 3

ส่วนท้ายเหนียวของ 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 โชคดี!

Question 4

ฉันต้องการแก้ปัญหานี้โดยไม่ต้องเพิ่มมาร์กอัปเพิ่มเติมดังนั้นฉันจึงใช้วิธีแก้ปัญหาต่อไปนี้:

article {
  min-height: calc(100vh - 150px); /* deduct the height or margins of any other elements within wrapping container*/
}

footer {
  height: 50px;
}

header {
   height: 50px;
}

nav {
  height: 50px;
}

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

ขยายข้อมูลโค้ด

คุณต้องทราบความสูงของส่วนหัวการนำทางและส่วนท้ายเพื่อให้สามารถกำหนดความสูงต่ำสุดสำหรับบทความได้ ด้วยเหตุนี้หากบทความมีเนื้อหาเพียงไม่กี่บรรทัดส่วนท้ายจะติดที่ด้านล่างของหน้าต่างเบราว์เซอร์มิฉะนั้นจะอยู่ด้านล่างของเนื้อหาทั้งหมด

คุณสามารถค้นหาสิ่งนี้และโซลูชันอื่น ๆ ที่โพสต์ไว้ด้านบนได้ที่นี่: https://css-tricks.com/couple-takes-sticky-footer/