Html 网格，所以我可以适应整个移动屏幕，无需滚动

我的最终目标是能够将我的网格完美地放在两列中，这样它就可以放在我的移动设备上的整个屏幕上。现在，我仍然需要向下滚动一点，但是这不是我想要的。我希望我的屏幕不可滚动，但图像/屏幕完全符合我的要求。可能要去掉两列之间的空格。现在我的屏幕看起来有点不对劲，需要稍微滚动一下。底部的两张图片不合适，需要像图片上所示滚动

Swiper演示
html，
身体{
位置：相对位置；
身高：100%；
}
.swiper容器{
宽度：100%；
身高：100%；
}
.滑梯{
排名：0；
左：0；
排名：0；
底部：0；
右：0；
溢出y：自动；
身高：100%；
宽度：100%；
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
身体{
保证金：0；
填充：0；
背景色：白色；
字体：10px/13px“Lucida Sans”，无衬线；
}
.包裹{
溢出：隐藏；
利润率：10px；
}
.盒子{
浮动：中心；
位置：相对位置；
宽度：200%；
垫底：100%；
}
伯森尔先生{
位置：绝对位置；
左：50px；
右：-5px；
顶部：-10px；
底部：10px；
溢出：隐藏；
}
.固定{
位置：绝对位置；
左：30px；
右：10px；
顶部：-10px；
底部：10px；
溢出：隐藏；
}
.boxInner img{
宽度：79%；
身高：75%
}
.boxInner img.img2{
宽度：100%；
身高：50%
}
body.no-touch.boxInner:hover.titleBox，
body.touch.boxInner.touchFocus.titleBox{
保证金底部：100；
}
@仅介质屏幕和（最大宽度：480px）{
/*智能手机视图：1个平铺*/
.topnav a:不是（：第一个孩子）{
显示：无；
}
.topnav a.icon{
浮动：对；
显示：块；
}
.盒子{
宽度：50%；
垫底：30%；
}
}
托普纳夫先生{
溢出：隐藏；
背景色：#66CDAA；
}
.topnav a{
浮动：中心；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：10px 16px；
文字装饰：无；
字号：17px；
}
.topnav a:悬停{
背景色：#98FB98；
颜色：白色；
}
.topnav.icon{
显示：无；
}
.校长1{
保证金：自动；
浮动：中心；
填充：15px；
字体大小：20px；
}
你的肤色是什么？


var swiper=新的swiper（“.swiper容器”{
分页：'.swiper分页'，
paginationClickable:true，
下一个按钮：'.swiper按钮下一个'，
prevButton:“.swiper button prev”，
间隔：30
});
$（函数（）{
//看看这是不是一个触摸设备
如果（'ontouchstart'在窗口中）{
//设置正确的身体等级
$（'body'）.removeClass（'no-touch'）.addClass（'touch'）；
//添加触摸切换以显示文本
$（'div.boxInner img'）。单击（函数（）{
$（this）.closest（'.boxInner'）.toggleClass（'touchFocus'）；
});
}
});

这是因为您的“swiper container”的高度为100%，但由于上面的元素，它开始下降33像素。如果需要，可以尝试

calc（）

css，使其100%的高度减去上面元素的高度。比如：

height: calc(100% - 33px);