Дополнительное пространство под нижним колонтитулом на экране 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: 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>