html - 文本被隐藏在页脚后面（边距底部不起作用）
问题描述
出于某种原因，我无法让我的保证金底部在我的 div 上工作，并且它没有做我希望它会做的事情。它应该防止内容从后面隐藏在页脚后面（调整屏幕大小时）。有谁知道如何防止这种情况发生？忽略移动视图，因为我尚未在移动视图中设置此部分的响应能力。
/* ---------------------------------------------------------------------------------------------------------------------------
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 -->解决方案
我已经意识到问题所在了。我为 flex-left 设置了 40vh 的高度。只需将其删除以使边距正常工作。
推荐阅读
- java - 错误“包 com_atlassian_clover 不存在”
- visual-studio - Xamarin Forms 应用程序构建问题缺少 DLL
- javascript - MongoDB - Mongoose 查询 findOneAndUpdate() 不更新/复制数据库
- swift - 需要通用 FetchedResultsController 构建器（Swift）
- oauth-2.0 - Google OAuth“错误”：“invalid_grant”响应请求交换一次身份验证代码以进行刷新和访问令牌
- c++ - 初学者制作没有 cins 的乐透程序，不知道如何比较所有数字
- java - Public Arraylist size shows different in 2 places in Android Java
- javascript - 如何在不显示“NaN”的情况下为多个属性复制此代码？
- amazon-web-services - S3 最终一致性：在对象存在未完成副本的情况下删除对象是否安全？
- nativescript - 当我运行更新的 NS 5.0 应用程序时，如何摆脱 Android 中的错误消息？