html - 调整窗口大小时阻止 DIV 向上移动
问题描述
我正在设计一个简单的响应式网站,并且我有一个“特殊”的 DIV,它是唯一占用 100% 身体宽度的 DIV。当我上下调整浏览器的大小时,该 DIV 向上移动并覆盖上面的 DIV。这只发生在我添加响应式 CSS 时。
我的代码:
header {
width: 80%;
margin: 0 auto;
height: calc(100vh - 60px);
}
/* Header content */
.header-content {
text-align: center;
margin-top: 8%;
padding: 5%;
padding-top: 0;
}
.header-content img {
width: 64%;
height: auto;
}
.header-content h6 {
font-size: 1.6em;
font-weight: 300;
margin-top: 3%;
line-height: 1.5em;
}
.stores {
display: inline-block;
width: 100%;
margin: 0 auto;
text-align: center;
margin-top: 6%;
}
.badges {
display: inline-block;
}
.badges img {
width: 40%;
height: auto;
}
/* Header Device */
.header-device {
text-align: center;
margin-top: 4%;
}
.header-device img {
width: 50%;
height: auto;
}
/* :::: Image Call:::: */
.image-call {
width: 100vw;
height: 450px;
position: relative;
background: linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../img/people.jpg);
background-size: cover;
z-index: 100;
}
.image-call h5 {
text-align: center;
font-size: 3em;
font-weight: 200;
color: #fff;
margin-top: 10%;
}
/* MY RESPONSIVE CODE */
@media (max-width: 991.98px) {
body {
background-color: #ececec;
}
/* Header */
header {
height: calc(100vh - 60px);
}
/* Image Call */
.image-call {
margin-top: -10%;
height: 356px;
}
.image-call h5 {
margin-top: 12%;
}
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- /Bootstrap 4 -->
<!-- HEADER -->
<header>
<div class="row">
<div class="header-content col-lg col-sm-12">
<img src="img/logo-simplecash.svg" alt="Logo SimpleCash">
<h6>text here</h6>
<div class="col-12">
<div class="row">
<div class="stores">
<div class="badges col-lg-12 col-sm-12">
<a href="#"><img src="img/google-play-badge.svg" alt="Google Store"></a>
<!--a href="#"><img src="img/app-store-badge.svg" alt="App Store"></a-->
</div>
</div>
</div>
</div>
</div>
<div class="header-device col-lg col-sm-12">
<img src="img/screen-home.png" alt="App Simple Cash">
</div>
</div>
</header>
<!-- / HEADER -->
<!-- IMAGE CALL -->
<div class="row">
<div class="image-call col-12">
<h5>text here text here <br /> text here text here
</h5>
</div>
</div>
<!-- / IMAGE CALL -->
解决方案
查看我的代码后,我发现了导致此问题的原因。
基本上,我更改了响应式 CSS 的这一部分:
header {
height: auto;
}
在我最初的 CSS 中,它是这样设置的(这样它将占用窗口高度的 100%):
header {
height: calc(100vh - 60px);
}
推荐阅读
- python - 确保我在每个请求中得到的推文在 twitter API 中是不同的?
- python - 正则表达式忽略特殊字符,但我需要连续四位数字,中间没有特殊字符
- date - Grails dataBinding 在默认编组 grails 日期上不起作用
- winforms - 如何使用 CefSharp winforms 接收拖动移动和拖放事件
- android - 尝试从图像视图导航到片段时应用程序崩溃
- c - 单纯形算法的数值稳定性
- sql - 按 ID/季度发行的 SQL 组
- docker - Docker 撰写卷容器附件的问题
- string - 批处理文件 - 名称
- javascript - 无法将属性设置为 null