我正在我的第一个网站上工作，当我减小浏览器的宽度时，我的内容和页脚之间会出现一个空白区域。在全尺寸一切都很好。有没有办法不出现缝隙？
如果代码超出要求，我深表歉意，因为这是我第一次为网站编写代码，而且我是自学的。
非常感谢任何帮助
** 编辑** 我已经找到了问题的原因。页脚上方 div 中的图像正在缩小以保持其比例，从而在 div 中创建空白区域。我能够通过从 html 文件中的 div 中删除图像来解决该问题。我将图像添加到 div 作为 CSS 中的背景，并使用以下样式来解决问题
.locally-img {
width: 60vw;
height: 60vh;
background: url(./images/rsz_1locally.png);
background-size: 100% 100%;
}
答案 0 :(得分：0)
要准确理解您的意思有点困难，但是您的代码中通常存在两个问题：
max-height、height、padding-top 的地方太多。将其与溢出相结合也应该受到限制。.item2、.item2 等选择器，而是创建一个像 .item 这样的通用选择器。 .item2 p 也是如此。如果 p 中的 .item2 需要特殊，那很好，但是如果所有 p 元素都应该以相同的方式设置样式，只需创建一个选择器链接 p {...}。< /li>
padding) 上的 margin 或 p 设置为百分比很难控制。改用 em。我在这里做了一些修改，但可能也破坏了一两件事。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {}
.main-body {}
/* nav bar */
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
/* background: #b0b6a5; */
background: #cfe1b9;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 50%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: black;
font-weight: bold;
text-decoration: none;
letter-spacing: 3px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: black;
margin: 5px;
}
@media screen and (max-width: 768px) {
body {}
.nav-links {
position: absolute;
right: 0px;
top: 8vh;
/* background: #b0b6a5; */
background: #cfe1b9;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
/* nav bar end */
/* Background image*/
.background {
background: url(./images/microgreens.jpeg);
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-attachment: fixed;
}
.background-image {
color: #fff;
}
.b-text {
text-transform: capitalize;
font-size: 3rem;
text-shadow: 0 0 5px rgb(44, 44, 43), 0 0 10px rgb(44, 44, 43), 0 0 15px rgb(44, 44, 43);
/* text-shadow: 0 0 5px #f00, 0 0 10px #f90, 0 0 15px #f00; */
font-weight: 900;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
/* Background image end */
/* Intro */
.intro {
text-align: center;
margin-left: 5vh;
margin-right: 5vh;
}
.intro-head {
margin-top: 10px;
}
.about-farm {
margin-top: 10px;
margin-bottom: 20px;
font-size: larger;
}
/* intro end */
/* Locally grown */
.image {
width: 65%;
}
.image-c1 {
width: 100%;
max-height: 100%;
}
.item-c2 {
width: 35%;
}
.item-c2 h3 {
text-align: center;
letter-spacing: 1.5px;
font-size: 1.5rem;
padding-top: 120px;
}
.item-c2 p {
text-align: justify;
margin: .5em;
line-height: 25px;
font-size: 1.1rem;
}
.container1 {
display: flex;
flex-wrap: wrap;
}
/* locally grown end */
/* Microgreens */
/* microgreens end */
/* Mushrooms */
.image3 {
width: 65%;
}
.mushrooms-img {
width: 100%;
max-height: 100%;
}
.item {
width: 35%;
}
.item h3 {
text-align: center;
letter-spacing: 1.5px;
font-size: 1.5rem;
}
.item p {
text-align: justify;
margin: .5em;
line-height: 25px;
font-size: 1.1rem;
}
.mushrooms {
display: flex;
flex: 1;
}
/* mushrooms end */
/* footer */
footer {
background: #cfe1b9;
border-top: 1px solid black;
}
/* */
/* end of home */
/* */
@media screen and (max-width: 768px) {
.footer-c {
display: inline-block;
}
footer {
text-align: center;
}
#newsletter,
.follow-us,
.footer-information {
border-bottom: 1.5px solid black;
width: 100%;
}
}
@media screen and (max-width: 768px) {
/* Locally */
.container {
display: block;
}
.image {
width: 100%;
}
.item-c2 {
width: 100%;
}
.item-c2 h3 {
padding-top: 17%;
}
/* Microgreens */
.microgreens {
display: block;
}
.image2 {}
/* Mushrooms */
.mushrooms {
display: block;
}
.item {
width: 100%;
}
.image3 {}
}<body>
<!-- Navbar -->
<nav>
<div class="logo">
<img src="./images/cropped-logo.png" alt="Company Logo" height="100" />
</div>
<ul class="nav-links">
<li><a href="./index.html">Home</a></li>
<li><a href="./about.html">About Us</a></li>
<li><a href="./shop.html">Shop</a></li>
<li><a href="./contact.html">Contact Us</a></li>
</ul>
<div class="burger">
<div class="line31"></div>
<div class="line2"></div>
<div class="line4"></div>
</div>
</nav>
<!-- Nav bar end -->
<div class="background">
<div class="background-image">
<h1 class="b-text">locally produced farm fresh produce</h1>
</div>
</div>
<!-- Home page Content -->
<!-- Locally Grown -->
<div class="main-body">
<div class="intro">
<h2 class="intro-head">An Fheirm Bheag</h2>
<p class="about-farm">
An Fheirm Beag is a small 20 acre family owned and operated farm. We operate our farm using sustainable practices to help build healthy soil and intergrate habitats for wildlife while producing food that is packed full of flavour and nutrition. We offering
a variety of farm fresh produce including gourmet mushrooms, microgreen and farm fresh eggs. We also grow a beautifull selection of seasonal cut flowers to add colour to your home Check out our shop to see whats available.
</p>
</div>
<div class="container1">
<div class="image">
<img class="image-c1" src="./images/rsz_1locally.png" alt="" />
</div>
<div class="item-c2">
<h3>Locally Grown</h3>
<p class="about-locally">
All of the producer we offer for sale is produced by us on our family farm. All produces is picked within 24-48 hours of sale to ensure our customers get the freshest locally produced food possible.
</p>
</div>
</div>
<!-- Locally Grown Ends -->
<!-- Microgreens -->
<div class="microgreens">
<div class="image2">
<img src="./images/microgreens bowl.jpeg" alt="" class="microgreens-img" />
</div>
<div class="item">
<h3>Microgreens</h3>
<p class="about-micro">
Microgreens are the young shoots of vegetables and herbs. They ar packed full of vitamins and minerals and make great addition to salads and sandwiches. Microgreens can be juiced,blended to make smoothies or used to garnish any dish. They add amazing
flavour and vibrant colour to your dish.
</p>
</div>
</div>
<!-- Microgreens end -->
<!-- mushrooms -->
<div class="mushrooms">
<div class="image3">
<img class="mushrooms-img" src="./images/oyster mushroom2.webp" alt="oyster mushrooms" />
</div>
<div class="item">
<h3>Gourmet Mushrooms</h3>
<p class="about-mushrooms">
Mushrooms are an amazing source of low caloriesource of fiber, protien, vitamins and minerals. Our gourmet mushrooms are a great way to add flavour and texture to your meal while also being low in sodium.
</p>
</div>
</div>
</div>
<!-- Mushrooms End -->
<!-- footer -->
<div class="footer">
<footer>
<div class="footer-c">
<div id="newsletter">
<h3 class="footer-h2">Keep Updated</h3>
<p>Sign up to our news letter</p>
<form action="Newsletter">
<input class="emial" type="email" placeholder="Your Email Address" />
<button>submit</button>
</form>
</div>
<div class="footer-information">
<h3 class="footer-h2">Company Information</h3>
<ul class="header-list">
<li class="header-li"><a href="./about.html"> About Us</a></li>
<li class="header-li">
<a href="./contact.html"> Contact Us</a>
</li>
<li class="header-li"><a href="#"> Delivery Info</a></li>
<li class="header-li">
<a href="./Terms.html">Terms and Conditions</a>
</li>
<li class="header-li">
<a href="./privacy.html">Privacy Policy</a>
</li>
</ul>
</div>
<div class="follow-us">
<h3 class="footer-h2">Follow Us</h3>
<!-- font awsome logos -->
<div class="social-link">
<a href="https://www.facebook.com/An-Fheirm-Bheag-111391803916594" target="_blank"><i class="fab fa-facebook-square"></i
></a>
</div>
<div class="social-link">
<a href="https://www.instagram.com/fheirm_bheag/" target="_blank"><i class="fab fa-instagram"></i
></a>
</div>
<div class="social-link">
<a href="https://www.youtube.com/channel/UCjESt2-mlGHw3rooT_o1SAg"><i class="fab fa-youtube"></i
></a>
</div>
</div>
</div>
<div class="copyright">
<p class="copyr">© Copyright 2021. An Fheirm Bheag</p>
</div>
</footer>
</div>
<!-- footer end -->
<script src="./app.js"></script>
</body>