Ratina 5K/4K 屏幕页脚下方的额外 space（与最大宽度相关）

Question

我经常遇到这个问题，但从来没有解决过。问题是每次我在 2560 宽度或更大屏幕（如 4k 或 5k）（在本例中为 iMac 5K）中打开时，我都会在页脚下方发现一个额外的 space。

但是，当我将容器的宽度设置为常规宽度而不是最大宽度时，space 消失了，但我想在启用完整页面布局的同时保持最大宽度。我不明白的是，由于页脚没有明确的宽度或高度，它不应该影响页脚，对吧？当使用常规容器而不是容器流体时，Bootstrap 也会出现此问题。

解决此问题的最佳方法是什么？

谢谢。

/* Reset */
* {
  margin: 0;
  padding:0;
  box-sizing: border-box;
}

/* Main Styling */
html,body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.7em;
}

a {
  color: #333;
  text-decoration: none;
}

h1, h2, h3 {
  padding-bottom: 20px;
}

p {
  margin: 10px 0;
}

/* Utility Classes */
.container {
  margin: auto;
  max-width: 1100px;
  width:100%;
  overflow: auto;
  padding: 0 20px;
}

.text-primary {
  color: #f7c08a;
}

.lead {
  font-size: 20px;
}

.btn {
  display: inline-block;
  font-size: 18px;
  color: #fff;
  background: #333;
  padding: 13px 20px;
  border: none;
  cursor: pointer;
}

.btn:hover {
  background: #f7c08a;
  color: #333;
}

.btn-light {
  background: #f4f4f4;
  color: #333;
}

.bg-dark {
  background: #333;
  color: #fff;
}

.bg-light {
  background: #f4f4f4;
  color: #333;
}

.bg-primary {
  background: #f7c08a;
  color: #333;
}

.clr {
  clear: both;
}

.l-heading {
  font-size: 40px;
  line-height: 1.2;
}

/* Padding */
.py-1 { padding: 10px 0; }
.py-2 { padding: 20px 0; }
.py-3 { padding: 30px 0; }

/* Navbar */
#navbar {
  background: #333;
  color: #fff;
  overflow: auto;
}

#navbar a {
  color: #fff;
}

#navbar .logo {
  float: left;
  padding-top: 20px;
}

#navbar ul {
  list-style: none;
  float: right;
}

#navbar ul li {
  float: left;
}

#navbar ul li a {
  display: block;
  padding: 20px;
  text-align: center;
}

#navbar ul li a:hover, 
#navbar ul li a.current {
  background: #444;
  color: #f7c08a;
}

/* Showcase */
#showcase {
  background: url('../img/showcase.jpg') no-repeat center center/cover;
  height: 600px;
}

#showcase .showcase-content {
  color: #fff;
  text-align: center;
  padding-top: 170px;
}

#showcase .showcase-content h1 {
  font-size: 60px;
  line-height: 1.2em;
}

#showcase .showcase-content p {
  padding-bottom: 20px;
  line-height: 1.7em;
}

/* Home Info */
#home-info {
  height: 450px;
} 

#home-info .info-img {
  float: left;
  width: 50%;
  background: url('../img/photo-1.jpg') no-repeat;
  min-height: 100%;
}

#home-info .info-content {
  float: right;
  width: 50%;
  height: 100%;
  text-align: center;
  padding: 50px 30px;
  overflow: hidden;
}

#home-info .info-content p {
  padding-bottom: 30px;
}

/* Features */
.box {
  float: left;
  width: 33.3%;
  padding: 50px;
  text-align:center;
}

.box i {
  margin-bottom: 10px;
}

/* About Info */
#about-info .info-right {
  float: right;
  width: 50%;
  min-height: 100%;
}

#about-info .info-right img {
  display: block;
  margin: auto;
  width: 70%;
  border-radius: 50%;
}

#about-info .info-left {
  float: left;
  width: 50%;
  min-height: 100%;
}

/* Testimonials */
#testimonials {
  height: 100%;
  background: url('../img/test-bg.jpg') no-repeat center center/cover;
  padding-top: 100px;
}

#testimonials h2 {
  color: #fff;
  text-align: center;
  padding-bottom: 40px;
}

#testimonials .testimonial {
  padding: 20px;
  margin-bottom: 40px;
  border-radius: 5px;
  opacity: 0.9;
}

#testimonials .testimonial img {
  width: 100px;
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}

/* Contact Form */
#contact-form .form-group {
  margin-bottom: 20px;
}

#contact-form label {
  display: block;
  margin-bottom: 5px;
}

#contact-form input, 
#contact-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px #ddd solid;
}

#contact-form textarea {
  height: 200px;
}

#contact-form input:focus, 
#contact-form textarea:focus {
  outline: none;
  border-color: #f7c08a;
}

/* Footer */
#main-footer {
  text-align: center;
  background: #444;
  color: #fff;
  padding: 20px;
}

  <header>
    <nav id="navbar">
      <div class="container">
        <h1 class="logo"><a href="index.html">HBT</a></h1>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a class="current" href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </div>
    </nav>
  </header>

  <section id="about-info" class="bg-light py-3">
    <div class="container">
      <div class="info-left">
        <h1 class="l-heading"><span class="text-primary">About</span> Hotel BT</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem veritatis illo, similique labore voluptate nulla animi dolorum eius laborum illum, nesciunt quod reprehenderit dicta autem vel nobis minima sit deleniti!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A velit voluptatem impedit voluptate. Doloribus, voluptas dolore! Cupiditate aliquid sequi deserunt.</p>
      </div>
      <div class="info-right">
        <img src="./img/photo-2.jpg" alt="hotel">
      </div>
    </div>
  </section>

  <div class="clr"></div>

  <section id="testimonials" class="py-3">
    <div class="container">
      <h2 class="l-heading">What Our Guests Say</h2>
      <div class="testimonial bg-primary">
        <img src="./img/person-1.jpg" alt="Samantha">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam eligendi quibusdam, dolorum maxime cum numquam quisquam, deleniti eum incidunt, velit non consectetur. Facere, ipsa maxime, ullam id amet odio laboriosam sit iusto tempore fugit exercitationem, a dolore quo maiores nisi!</p>
      </div>

      <div class="testimonial bg-primary">
          <img src="./img/person-2.jpg" alt="Jen">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam eligendi quibusdam, dolorum maxime cum numquam quisquam, deleniti eum incidunt, velit non consectetur. Facere, ipsa maxime, ullam id amet odio laboriosam sit iusto tempore fugit exercitationem, a dolore quo maiores nisi!</p>
        </div>
    </div>
  </section>

  <footer id="main-footer">
    <p>Hotel BT &copy; 2019, All RIghts Reserved</p>
  </footer>

Answer 1

您想要的是 "Holy Grail" 布局，其中页脚始终附加到底部。为此，您需要 flexbox 扩展中间部分以填充 space。我添加了一个包装器，但如果没有其他元素可能会干扰它，您可以将样式应用于 .holy-grail-layout 到主体。此外，我将页眉和页脚之外的所有内容都包裹起来，并将 div 设置为 flex-grow: 1;

/* Reset */
* {
  margin: 0;
  padding:0;
  box-sizing: border-box;
}

/* Main Styling */
html,body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.7em;
}

a {
  color: #333;
  text-decoration: none;
}

h1, h2, h3 {
  padding-bottom: 20px;
}

p {
  margin: 10px 0;
}

/* Utility Classes */
.container {
  margin: auto;
  max-width: 1100px;
  width:100%;
  overflow: auto;
  padding: 0 20px;
}

.text-primary {
  color: #f7c08a;
}

.lead {
  font-size: 20px;
}

.btn {
  display: inline-block;
  font-size: 18px;
  color: #fff;
  background: #333;
  padding: 13px 20px;
  border: none;
  cursor: pointer;
}

.btn:hover {
  background: #f7c08a;
  color: #333;
}

.btn-light {
  background: #f4f4f4;
  color: #333;
}

.bg-dark {
  background: #333;
  color: #fff;
}

.bg-light {
  background: #f4f4f4;
  color: #333;
}

.bg-primary {
  background: #f7c08a;
  color: #333;
}

.clr {
  clear: both;
}

.l-heading {
  font-size: 40px;
  line-height: 1.2;
}

/* Padding */
.py-1 { padding: 10px 0; }
.py-2 { padding: 20px 0; }
.py-3 { padding: 30px 0; }

/* Navbar */
#navbar {
  background: #333;
  color: #fff;
  overflow: auto;
}

#navbar a {
  color: #fff;
}

#navbar .logo {
  float: left;
  padding-top: 20px;
}

#navbar ul {
  list-style: none;
  float: right;
}

#navbar ul li {
  float: left;
}

#navbar ul li a {
  display: block;
  padding: 20px;
  text-align: center;
}

#navbar ul li a:hover, 
#navbar ul li a.current {
  background: #444;
  color: #f7c08a;
}

/* Showcase */
#showcase {
  background: url('../img/showcase.jpg') no-repeat center center/cover;
  height: 600px;
}

#showcase .showcase-content {
  color: #fff;
  text-align: center;
  padding-top: 170px;
}

#showcase .showcase-content h1 {
  font-size: 60px;
  line-height: 1.2em;
}

#showcase .showcase-content p {
  padding-bottom: 20px;
  line-height: 1.7em;
}

/* Home Info */
#home-info {
  height: 450px;
} 

#home-info .info-img {
  float: left;
  width: 50%;
  background: url('../img/photo-1.jpg') no-repeat;
  min-height: 100%;
}

#home-info .info-content {
  float: right;
  width: 50%;
  height: 100%;
  text-align: center;
  padding: 50px 30px;
  overflow: hidden;
}

#home-info .info-content p {
  padding-bottom: 30px;
}

/* Features */
.box {
  float: left;
  width: 33.3%;
  padding: 50px;
  text-align:center;
}

.box i {
  margin-bottom: 10px;
}

/* About Info */
#about-info .info-right {
  float: right;
  width: 50%;
  min-height: 100%;
}

#about-info .info-right img {
  display: block;
  margin: auto;
  width: 70%;
  border-radius: 50%;
}

#about-info .info-left {
  float: left;
  width: 50%;
  min-height: 100%;
}

/* Testimonials */
#testimonials {
  height: 100%;
  background: url('../img/test-bg.jpg') no-repeat center center/cover;
  padding-top: 100px;
}

#testimonials h2 {
  color: #fff;
  text-align: center;
  padding-bottom: 40px;
}

#testimonials .testimonial {
  padding: 20px;
  margin-bottom: 40px;
  border-radius: 5px;
  opacity: 0.9;
}

#testimonials .testimonial img {
  width: 100px;
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}

/* Contact Form */
#contact-form .form-group {
  margin-bottom: 20px;
}

#contact-form label {
  display: block;
  margin-bottom: 5px;
}

#contact-form input, 
#contact-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px #ddd solid;
}

#contact-form textarea {
  height: 200px;
}

#contact-form input:focus, 
#contact-form textarea:focus {
  outline: none;
  border-color: #f7c08a;
}

/* Footer */
#main-footer {
  text-align: center;
  background: #444;
  color: #fff;
  padding: 20px;
}

/* Holy Grail Layout */
.holy-grail-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
header, footer {
  flex-grow: 0;
  flex-shrink: 0;
}
.content-wrapper {
  flex-grow: 1;
}

  <div class="holy-grail-layout">
    <header>
      <nav id="navbar">
        <div class="container">
          <h1 class="logo"><a href="index.html">HBT</a></h1>
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a class="current" href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div>
      </nav>
    </header>
  
    <div class="content-wrapper">
      <section id="about-info" class="bg-light py-3">
        <div class="container">
          <div class="info-left">
            <h1 class="l-heading"><span class="text-primary">About</span> Hotel BT</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem veritatis illo, similique labore voluptate nulla animi dolorum eius laborum illum, nesciunt quod reprehenderit dicta autem vel nobis minima sit deleniti!</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A velit voluptatem impedit voluptate. Doloribus, voluptas dolore! Cupiditate aliquid sequi deserunt.</p>
          </div>
          <div class="info-right">
            <img src="./img/photo-2.jpg" alt="hotel">
          </div>
        </div>
      </section>

      <div class="clr"></div>

      <section id="testimonials" class="py-3">
        <div class="container">
          <h2 class="l-heading">What Our Guests Say</h2>
          <div class="testimonial bg-primary">
            <img src="./img/person-1.jpg" alt="Samantha">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam eligendi quibusdam, dolorum maxime cum numquam quisquam, deleniti eum incidunt, velit non consectetur. Facere, ipsa maxime, ullam id amet odio laboriosam sit iusto tempore fugit exercitationem, a dolore quo maiores nisi!</p>
          </div>

          <div class="testimonial bg-primary">
              <img src="./img/person-2.jpg" alt="Jen">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam eligendi quibusdam, dolorum maxime cum numquam quisquam, deleniti eum incidunt, velit non consectetur. Facere, ipsa maxime, ullam id amet odio laboriosam sit iusto tempore fugit exercitationem, a dolore quo maiores nisi!</p>
            </div>
        </div>
      </section>
      
    </div>

    <footer id="main-footer">
      <p>Hotel BT &copy; 2019, All RIghts Reserved</p>
    </footer>
  </div>

Ratina 5K/4K 屏幕页脚下方的额外 space（与最大宽度相关）

Extra space below footer in Ratina 5K/4K screen (max-width related)

html

css

responsive