Ratina 5K / 4K屏幕中页脚下方的多余空间（与最大宽度有关）

Question

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

但是，当我将容器的宽度设置为常规宽度而不是最大宽度时，该空间消失了，但是我想在启用整个页面布局的同时保持最大宽度。我不明白的是，由于页脚没有明确的宽度或高度，因此应该不会影响页脚吗？当使用常规容器而不是容器流体时，在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

您想要的是“圣杯”布局，其中页脚始终固定在底部。为此，您需要flexbox扩展中间部分以填充空间。我添加了一个包装器，但是如果没有其他可能与之混淆的样式，可以将.holy-grail-layout的样式应用于主体。另外，我用div设置为flex-grow的东西将所有内容都包裹在页眉和页脚之外：

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