文本被塞到页脚后面（页边距-底部不工作）

Question

由于某些原因，我不能得到我的利润底部工作我的div和它没有做我希望它会做的。它应该防止隐藏在页脚后面的内容（当屏幕大小被调整时）。有人知道如何防止这种情况发生吗？忽略移动视图，因为我还没有在移动视图中设置此部分的响应性。

null

/* --------------------------------------------------------------------------------------------------------------------------- 
START OF DESIGN-WELCOME-SECTION 
---------------------------------------------------------------------------------------------------------------------------  */

#design-welcome-section {
  margin-left: 15%;
  margin-right: 15%;
  margin-top: 1.5%;
} /* Sets margins of three-nav-section */

/* 104em = 1686px*/
@media (max-width: 1686px) {
  #design-welcome-section {
    margin-left: 5%;
    margin-right: 5%;
  } /* Sets margins of three-nav-section */
}

/* 83em = 1327px*/
@media (max-width: 1327px) {
  #design-welcome-section {
    margin-left: 3%;
    margin-right: 3%;
  } /* Sets margins of three-nav-section */
}

/* 48em = 768px*/
@media (max-width: 768px) {
  #design-welcome-section {
    margin-left: 2.5%;
    margin-right: 2.5%;
  } /* Sets margins of three-nav-section */
}

/* 36em = 577px*/
@media (max-width: 577px) {
  #design-welcome-section {
    margin-left: 2%;
    margin-right: 2%;
  } /* Sets margins of three-nav-section */
}

h1 {
  font-size: 30px;
} /* Sets sizing of design welcome title */

.design-welcome-container p {
  font-size: 21px;
} /* Sets sizing of design welcome text */

.wrapper a {
  text-decoration: none;
} /* Removes underline from the welcome design button */

/* 36em = 577px*/
@media (max-width: 577px) {
  .design-welcome-section {
    text-align: center;
  } /* Sets positioning of welcome section to centre */

  h1 {
    text-align: center;
  } /* Aligns all h1 tags to centre when in mobile view */
}

/* --------------------------------------------------------------------------------------------------------------------------- 
END OF DESIGN-WELCOME-SECTION CONTENT
---------------------------------------------------------------------------------------------------------------------------  */

.center {
  text-align: center;
  background-color: rgb(228, 226, 226);
  padding: 100px;
  margin-top: -1.5%;
}
.center h1 {
  font-size: 40px;
  color: black;
}

.center p {
  font-size: 25px;
  color: rgb(109, 108, 108);
}

/* 36em = 577px*/
@media (max-width: 577px) {
  .center {
    margin-top: 6%;
    text-align: center;
    padding: 30px;
  }
}




.flex-container {
  display: flex;
  flex-direction: row;
}

.flex-left {
  width: 50%;
  height: 40vh;
  margin: 5px;
  padding: 5px;
}

.flex-right {
  width: 50%;
  margin: 5px;
  padding: 5px;
}

.content-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin-bottom: 2.5%;
}

.content-sidebar > *:nth-child(1) {
  flex: 1 1 70%;
  min-width: 25ch;
  background-color: white;
}

.content-sidebar > *:nth-child(1) h2 {
  font-size: 20px;
}

.content-sidebar > *:nth-child(2) {
  flex: 1 1 25%;
  min-width: 20ch;

  background: white;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 20px;

  margin: 0px;
  border-bottom: 1px solid #e0e0e0;
}

.content-sidebar > *:nth-child(2) ul {
  background: white;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
  border-top: 1px solid #969595;
  list-style: none;
  font-size: 25px;
}

.content-sidebar > *:nth-child(2) ul li a {
  display: block;
  padding: 15px 0px 15px 0px;
  border-bottom: 1px solid #969595;
  transition: all 0.3s;
  text-decoration: none;
  color: black;
}

.content-sidebar > *:nth-child(2) ul li a:hover {
  padding-left: 10px;
  transition: all 0.3s;
}

/* 104em = 1686px*/
@media (max-width: 1686px) {
}

/* 83em = 1327px*/
@media (max-width: 1327px) {
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 892px) {
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 577px) {
  .flex-container {
    display: flex;
    flex-direction: column;
  }

  .flex-left {
    width: 100%;
    height: 50vh;
    margin: 0px;
    padding: 0px;
    border: 2px solid red;
  }

  .flex-right {
    width: 100%;
    height: 50vh;
    margin: 0px;
    padding: 0px;
    border: 2px solid green;
  }
}









/* --------------------------------------------------------------------------------------------------------------------------- 
START OF FOOTER
---------------------------------------------------------------------------------------------------------------------------  */

/* STYLES SPECIFIC TO FOOTER  */
.footer {
  width: 100%;
  position: relative;
  height: auto;
  background-color: #fff;
  box-shadow: inset 1px 2px 4px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 3%;
}
.footer .col {
  margin-top: 3%;
  width: 190px;
  height: auto;
  float: left;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.footer .col h1 {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 15px;
  line-height: 17px;
  padding: 20px 0px 5px 0px;
  color: rgba(0, 0, 0, 1);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.25em;
}
.footer .col ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.footer .col ul li {
  color: #999999;
  font-size: 16px;
  font-family: inherit;
  font-weight: bold;
  padding: 5px 0px 5px 0px;
  cursor: pointer;
  transition: 0.2s;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
}

.footer .col ul li:hover {
  color: #000;
  transition: 0.1s;
  -webkit-transition: 0.1s;
  -moz-transition: 0.1s;
}
.clearfix {
  clear: both;
}

@media only screen and (min-width: 1280px) {
  .contain {
    width: 1200px;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1139px) {
  .contain .social {
    width: 1000px;
    display: block;
  }
  .social h1 {
    margin: 0px;
  }
}
@media only screen and (max-width: 950px) {
  .footer .col {
    width: 33%;
  }
  .footer .col h1 {
    font-size: 14px;
    text-align: left;
  }
  .footer .col ul li {
    font-size: 13px;
  }
}
@media only screen and (max-width: 500px) {
  .footer .col {
    width: 50%;
  }
  .footer .col h1 {
    font-size: 14px;
  }
  .footer .col ul li {
    font-size: 13px;
  }
}
@media only screen and (max-width: 340px) {
  .footer .col {
    width: 100%;
  }
}

.mapouter {
  position: relative;
  text-align: left;
  height: auto;
  width: 100%;
}

.gmap_canvas {
  overflow: hidden;
  background: none !important;
  height: 250px;
  width: auto;
  min-width: 150px;
  border: 1px solid #000;
  text-align: center;
  border-radius: 12px;
}

<section id="design-welcome-section" class="design-welcome-section"> <!-- Start of section -->
  <div class="kpm-welcome-container"> <!-- Start of div -->
    
    <div class="center">
        <h1>About Us</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>

<h1>About Us</h1>
<hr>

<!-- MAIN (Center website) -->
<div class="main">



<div class="content flow">
    <div class="content-sidebar">
        <div class="col">
            <div class="flex-container">
                <div class="flex-left">
                    <h1>Owner</h1>
                    <img src="https://images.pexels.com/photos/670720/pexels-photo-670720.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" style="width: 47%; border-radius: 12px; margin-bottom: 2%; margin-top: 2%; border: 1px solid #000;"/>
                    <p>Kay Park Memorials was established by John Bayne in 2008, after a four-year hiatus 
                        following the closure of his father's business: Thomas Bayne and Sons. The business 
                        started on the same grounds, which has been home to the Bayne family for three generations.</p>

                    <h1>Background</h1>
                    <p>For over twenty-years, John worked with his father Freddy in the business, 
                        which was founded by his grandfather Thomas Bayne. After Freddy's retirement, 
                        John and his family moved into the house, and the business was subsequently closed. 
                        However after four years, John finally decided to start back at this family trade, 
                        and Kay Park Memorials was established.</p>
                </div>
                <div class="flex-right">
                    <h1>More Info</h1>
                    <p>Kay Park Memorials is a family-run business consisting of John Bayne, his wife Angela, 
                        and their youngest son, Nathan. For over a decade now, the business has delivered 
                        high-quality headstones, vases, memorial stones. John has been praised for his 
                        approachability, patience and honesty in handling what is best for you and your family.
                        <br><br>
                        Although a small local business, Kay Park Memorials strives to provide a personal and 
                        caring experience for each person that walks in their door.
                    </p>

                    <h1>Our Service</h1>
                    <p>Here at Kay Park Memorials we have options of traditional, modern and bespoke headstones, 
                        with additional memorial services such as added lettering or renovations to existing headstones.
                        If searching for a new memorial, additional inscription, or renovation of an existing headstone, 
                        please feel free to visit our premises to view our selection or discuss your requirements. We 
                        are experienced and happy to provide support through the process of selecting the special memorial 
                        for your loved one. Alternatively, you can contact us to request a brochure, which we can email or 
                        post to your address. Furthermore, additional and unique memorial designs are available at your request.
                    </p>

                    <h1>Opening Times</h1>
                    <p>Our premises are open from 10AM-4.30PM, Monday to Friday, however if these times are unsuitable, out-of-hours 
                        appointments are available by calling us on: 01563 535800.</p>
                </div>
            </div>
        </div>
        <div class="col">
            <h1>Our Services</h1>
            <ul>
                <li><a href="#">New Memorials</a></li>
                <li><a href="#">Additional Inscription</a></li>
                <li><a href="#">Cleaning</a></li>
                <li><a href="#">Free Inspection</a></li>
                <li><a href="#">Refixing</a></li>
                <li><a href="#">Insurance</a></li>
            </ul>
        </div>
    </div>
</div>

</div>

</div> <!-- End of div -->
</section> <!-- This section displays the KPM welcome section -->






<footer class="footer">
  <div class="contain">
  <div class="col">
    <h1>Quick Links</h1>
    <ul>
      <li>Home</li>
      <li>Memorials</li>
      <li>Services</li>
      <li>Other Products</li>
      <li>Materials</li>
      <li>Designs</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </div>
  <div class="col">
    <h1>Nearby Locations</h1>
    <ul>
      <li>Dundonald</li>
      <li>Crosshouse</li>
      <li>Dunlop</li>
      <li>Irvine</li>
      <li>Ayr</li>
      <li>Troon</li>
      <li>Gatehead</li>
      <li>Springside</li>
      <li>Stewarton</li>
      <li>Symington</li>
    </ul>
  </div>
  <div class="col">
    <h1>Search Terms</h1>
    <ul>
      <li>Headstones Near Me</li>
      <li>Memorials Near Me</li>
      <li>Gravestones Near Me</li>
      <li>Nearby Headstones</li>
      <li>Affordable Headstones</li>
      <li>Affordable Memorials</li>
      <li>Memorial Service</li>
      <li>Headstone Service</li>
      <li>Headstone Lettering</li>
      <li>Monumental Sculptors</li>
    </ul>
  </div>
  <div class="col">
    <h1>Resources</h1>
    <ul>
      <li>Robertsons</li>
      <li>Odlings</li>
    </ul>
  </div>
  <div class="col">
    <h1>Web Development</h1>
    <ul>
      <li>Website Development by <a href="http://nathanbayneportfolio.co.uk/">Nathan Bayne</a></li>
    </ul>
  </div>
  <div class="col">
    <h1>Location</h1>
    <ul>
    <li>Address: 2 Grassyards Road, Kilmarnock, KA3 7BD</li>
    <div class="mapouter">
<div class="gmap_canvas">
    <iframe id="gmap_canvas" src="https://maps.google.com/maps?q=2%20Grassyards%20road%20kilmarnock&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" width="100%" height="100%"></iframe>
</div>
</div>  
    </ul>
  </div>
<div class="clearfix"></div>
</div>
</div>
<!-- END OF FOOTER -->

null

Answer 1

我已经意识到问题出在哪里了。我设定了40VH的高度为左曲。它只是必须移除，以使边距正常工作。