html - 水平滚动的移动页面不会限制为 100vh
问题描述
我需要整个网站的宽度超过视口而不是高度。我正在使用 flexbox 对齐两个 100vw 的 div,因此用户可以水平滚动。我已将主体设置为 100vh 高度,以及两个 div 的父容器(.tab-content),但我仍然有很多高度超过 100vh。我已经检查并将所有元素限制为 100vh,但空白仍然存在。我在 Firefox 和 Chrome 上进行测试并得到相同的结果 - 在 iPhone 7/8 视图上。只有当我删除第二个 div (#about) 时,这种多余的才会消失。以下是多余的显示方式:
HTML:
<body class="col">
<div class="control">
<p id="pause">▌ ▌</p>
<p id="audio">♩</p>
</div>
<nav class="nav-container">
<div class="mobile__header-controls">
<div class="mobile__nav">
<button class="mobile__more">+</button>
<div class="mobile__process-nav">
<a href="#show" data-tab-target="#show" class="mobile__tab">Show</a>
<a href="#about" data-tab-target="#about" class="mobile__tab">About</a>
<a href="#researchFilm" data-tab-target="#researchFilm" class="mobile__tab">Research Film</a>
<a href="#stills" data-tab-target="#stills" class="mobile__tab">Stills</a>
<a href="#lookbook" data-tab-target="#lookbook" class="mobile__tab">Lookbook</a>
</div>
<div class="mobile__main-nav">
<a class="mabtn" style="text-decoration: underline;" href="/MA.html">MA</a>
<a class="capbtn" href="/capsule.html">Capsule</a>
<a class="babtn" href="/BA.html">BA</a>
</div>
</div>
<a href="/index.html" class="info-back">Back</a>
</div>
</nav>
<main>
<div class="tab-content animate__animated animate__fadeIn">
<div id="show" data-tab-content>
<div class="video-wrapper">
<video id="catwalk" playsinline autoplay loop preload="metadata">
<source src="/img/BA/Samson Leung Dear you, he said - CSM BA Fashion.mp4" type="video/mp4">
</video>
</div>
</div>
<div id="about">
</div>
</div>
</main>
<script defer src="/js/collections.js"></script>
</body>
</html>
CSS:
body {
width: 100%;
height: 100vh;
max-height: -webkit-fill-available;
text-rendering: optimizeLegibility;
box-sizing: border-box;
}
.col {
overflow: hidden;
}
.col::-webkit-scrollbar {
display: none;
}
.nav-container {
position: fixed;
margin: 0px;
}
.mobile__header-controls {
display: block;
}
.mobile__header-controls a {
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: 1.5rem;
text-decoration: none;
color: black;
text-transform: uppercase;
transition: all 1s;
}
.mobile__more {
font-size: 3rem;
margin: 2rem;
font-weight: bold;
background-color: rgba(255, 255, 255, 0.904)
}
.mobile__process-nav {
display: flex;
flex-direction: column;
justify-content: space-evenly;
height: 30vh;
background-color: rgba(255, 255, 255, 0.904);
color: black;
border: 2px solid black;
opacity: 0;
transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
}
.mobile__process-nav.fade {
opacity: 1;
}
.mobile__process-nav a {
margin-left: 2rem;
margin-right: 2rem;
}
.mobile__main-nav {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-evenly;
height: 20vh;
position: absolute;
margin-left: 5vw;
margin-top: 35vh;
margin-bottom: 0;
}
.mobile__main-nav a {
background-color: rgba(255, 255, 255, 0.904)
}
.info-back {
position: absolute;
margin-left: 80vw;
margin-top: 50vh;
margin-bottom: 0;
background-color: rgba(255, 255, 255, 0.904)
}
.tab-content {
position: absolute;
left: 0;
top: 0;
z-index: -10;
scroll-behavior: smooth;
overflow-x: visible;
overflow-y: hidden;
display: flex;
/* flex: row nowrap;
justify-content: flex-start; */
}
.control {
position: absolute;
height: 100px;
left: 5vw;
color: white;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 2rem;
z-index: 200 !important;
}
#audio {
font-size: 1.3rem;
border: none;
color: #ffffff;
background: transparent;
cursor: pointer;
transition: all 1s;
}
#pause {
cursor: pointer;
transition: all 1s;
}
#show {
width:100vw;
height: 100vh;
}
video-wrapper {
width: 100vw;
height: 100vh;
}
#catwalk {
object-fit: cover;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
}
#about {
width: 100vw;
height: 100vh;
max-width:100%
}
下拉 + 按钮的 JavaScript:
if (window.matchMedia("(max-device-width: 850px)").matches) {
morebtn.addEventListener('click', () => {
processMenu.classList.toggle('fade');
let menuOpen = processMenu.classList.contains('fade');
if (!menuOpen) {
console.log(menuOpen)
processMenu.style.pointerEvents = "none";
} else {
processMenu.style.pointerEvents = "all";
}
})
// document.querySelector('.back-img').style.display = "none";
} else {}
解决方案
推荐阅读
- javascript - 在 req.body 中包含表
- spring-mvc - EL1007E: 在 null 上找不到属性或字段“fieldName”
- node-red - node-red 拆分、重新排序和连接输出字符串
- python - Python - 在 != 中使用多个单词
- go - 致命错误:所有 goroutine 都处于休眠状态 - 死锁!当通道没有缓冲时
- r - 如何根据 r 中元素的第一个数字保留行?
- scala - 方法覆盖、继承和对象
- r - 模型包含多项式时的新预测
- android - 我在地方自动完成片段中收到错误 13
- python - Elastic Beanstalk Flask 应用程序 - 未找到静态文件