Html 内容和页脚之间的空白

我正在制作我的第一个网站，当我缩小浏览器的宽度时，我的内容和页脚之间会出现一个空白。全尺寸时一切正常。有没有办法使差距不出现

如果那里的代码比要求的多，我表示歉意，因为这是我第一次为网站编写代码，而且我已经自学了

非常感谢您的帮助

**编辑** 我已经找到了问题的原因。页脚上方div中的图像正在缩小，以保持其比例，从而在div中创建了空白。我可以通过从html文件中的div中删除图像来解决此问题。我在CSS中将图像作为背景添加到div中，并使用以下样式解决此问题

.locally-img {
  width: 60vw;
  height: 60vh;
  background: url(./images/rsz_1locally.png);
  background-size: 100% 100%;
}

---

要准确理解您的意思有点困难，但代码中通常存在两个问题：

高度使用过度。将高度指定为

最大高度

，

高度

，

填充顶部

的位置太多。将其与溢出相结合也应该受到限制

当您有重复的代码块时，请尝试使用通用选择器。不要使用诸如

.item2

、

.item2

等选择器。制作一个像

.item

这样的通用选择器。这同样适用于

.item2 p

。如果

.item2

中的

p

需要特殊，这很好，但是如果所有

p

元素的样式都应该相同，只需创建一个选择器链接

p{…}

将文本（

p

）上的

padding

或

margin

设置为百分比很难控制。改用

em

我在这里做了一些修改，但可能也弄坏了一两件事

*{
保证金：0；
填充：0；
框大小：边框框；
}
html，
主体{}
.主体{}
/*导航条*/
导航{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
最小高度：8vh；
/*背景：#b0b6a5*/
背景：#cfe1b9；
}
.导航链接{
显示器：flex；
证明内容：周围的空间；
宽度：50%；
}
.nav链接李{
列表样式：无；
}
.导航链接a{
颜色：黑色；
字体大小：粗体；
文字装饰：无；
字母间距：3px；
}
.汉堡{
显示：无；
光标：指针；
}
.汉堡部{
宽度：25px；
高度：3倍；
背景色：黑色；
保证金：5px；
}
@媒体屏幕和屏幕（最大宽度：768px）{
主体{}
.导航链接{
位置：绝对位置；
右：0px；
顶部：8vh；
/*背景：#b0b6a5*/
背景：#cfe1b9；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
宽度：50%；
转化：translateX（100%）；
过渡：0.5s轻松过渡；
}
.nav链接李{
不透明度：0；
}
.汉堡{
显示：块；
}
}
.导航激活{
转化：translateX（0%）；
}
/*导航杆端*/
/*背景图像*/
.背景{
背景：url（./images/microgreens.jpeg）；
背景尺寸：封面；
显示器：flex；
证明内容：中心；
对齐项目：居中；
文本对齐：居中；
背景附件：固定；
}
.背景图像{
颜色：#fff；
}
.b-text{
文本转换：大写；
字体大小：3rem；
文本阴影：05pxRGB（44,44,43），010pxRGB（44,44,43），0015pxRGB（44,44,43）；
/*文本阴影：0 0 5px#f00，0 0 10px#f90，0 0 15px#f00*/
字号：900；
-webkit文本笔划宽度：1px；
-webkit文本笔划颜色：黑色；
}
/*背景图像结束*/
/*介绍*/
.介绍{
文本对齐：居中；
左边距：5vh；
右边距：5vh；
}
.介绍头{
边缘顶部：10px；
}
.关于农场{
边缘顶部：10px；
边缘底部：20px；
字体大小：较大；
}
/*介绍结束*/
/*本地种植*/
.形象{
宽度：65%；
}
.image-c1{
宽度：100%；
最大高度：100%；
}
.项目-c2{
宽度：35%；
}
.项目c2-h3{
文本对齐：居中；
字母间距：1.5px；
字体大小：1.5rem；
填充顶部：120px；
}
.项目c2-p{
文本对齐：对齐；
边缘：.5em；
线高：25px；
字号：1.1rem；
}
.集装箱1{
显示器：flex；
柔性包装：包装；
}
/*本地生长端*/
/*微绿色*/
/*微绿端*/
/*蘑菇*/
.image3{
宽度：65%；
}
.img{
宽度：100%；
最大高度：100%；
}
.项目{
宽度：35%；
}
.项目h3{
文本对齐：居中；
字母间距：1.5px；
字体大小：1.5rem；
}
.项目p{
文本对齐：对齐；
边缘：.5em；
线高：25px；
字号：1.1rem；
}
.蘑菇{
显示器：flex；
弹性：1；
}
/*蘑菇头*/
/*页脚*/
页脚{
背景：#cfe1b9；
边框顶部：1件纯黑；
}
/*  */
/*家的尽头*/
/*  */
@媒体屏幕和屏幕（最大宽度：768px）{
.footer-c{
显示：内联块；
}
页脚{
文本对齐：居中；
}
#通讯，
.跟我们来，
.页脚信息{
边框底部：1.5px纯黑；
宽度：100%；
}
}
@媒体屏幕和屏幕（最大宽度：768px）{
/*局部*/
.集装箱{
显示：块；
}
.形象{
宽度：100%；
}
.项目-c2{
宽度：100%；
}
.项目c2-h3{
垫面：17%；
}
/*微绿色*/
.微绿色{
显示：块；
}
.image2{}
/*蘑菇*/
.蘑菇{
显示：块；
}
.项目{
宽度：100%；
}
.image3{}
}

本地生产的新鲜农产品
一个Fheirm Bheag

Fheirm Beag是一个20英亩的家庭拥有和经营的小型农场。我们使用可持续的做法经营农场，帮助建立健康的土壤，整合野生动物栖息地，同时生产充满风味和营养的食品。我们提供
多种新鲜农产品，包括美味蘑菇、微绿蘑菇和农场新鲜鸡蛋。我们还种植了一系列美丽的季节性切花，为您的家居装饰增添色彩