html - 容器上不需要的高度
问题描述
我遇到了一些文本容器的问题,并且它下面有一个很大的空间,我似乎无法删除。起初我以为是因为我给了它的 slideUp 动画,但是当我删除它时,我遇到了同样的问题。
文本的位置是我喜欢的,当页面一直滚动到顶部时(桌面屏幕的右下角,移动设备的中心)但总是有一堆空白空间在桌面视图中向下滚动。知道如何删除它吗?
https://codepen.io/tomogram/pen/RwWMEEz
<div class="content-container">
<div class="cov-box">
<p class="slide-up">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
</div>
</div>
* {
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
body {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
background-color: black;
}
/* Screensize */
/* Mobile */
.cov-box {
color: #ffffff;
line-height: 1.2;
font-weight: 600;
font-size: 1.3rem;
letter-spacing: .2rem;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
margin: 0 15px;
transition: 0.4s ease;
}
.cov-box.move-right {
opacity: 0%;
}
.slide-up {
max-width: 600px;
}
@media (min-width: 559px) {
.cov-box {
font-size: 2rem;
margin: 0 30px;
}
}
@media (min-width: 1150px) {
.cov-box {
width: 900px;
text-align: right;
position: absolute;
font-size: 2.5rem;
padding-top: 300px;
right: 5px;
}
.slide-up {
max-width: 700px;
}
}
@media (min-width: 1250px) {
.cov-box {
font-size: 3rem;
right: 30px;
}
.slide-up {
max-width: 800px;
}
}
@media (min-width: 1450px) {
.cov-box {
right: 100px;
font-size: 3.5rem;
}
.slide-up {
max-width: 900px;
}
}
/* Header Bottom Ani */
.slide-up {
animation-name: slideUp;
animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-delay: .3s;
animation-delay: .3s;
display: inline-block;
animation-fill-mode: both;
}
@keyframes slideUp {
0% {
transform: translateY(200%);
opacity: 0%;
}
100% {
transform: translateY(0%);
opacity: 100%;
}
}
@-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(200%);
}
100% {
-webkit-transform: translateY(0%);
}
}
<div class="content-container">
<div class="cov-box">
<p class="slide-up">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
</div>
</div>
解决方案
推荐阅读
- python - 使用 Python 从 .txt 文件中随机生成加权词列表
- ios - 带有 MVVMCross 的 Xamarin.iOS 仅在 ViewControllers 处调用构造函数
- django - 创建混合大小写或大写的列名时,Django 列不存在错误
- javascript - 输入字段在清除后失效
- python - 在 Pycharm Django 控制台中运行 manage.py shell_plus --print-sql
- python - 在熊猫数据框的每一组中保留公共行
- java - 是否可以从 Java 中的特定异常中抑制堆栈跟踪?
- javascript - JavaScript 构造函数用法
- r - R Shiny - 同时更新 selectInput 和 progressBar 的值
- google-maps-api-3 - 加载页面时如何显示一个 kml 层?