【发布时间】：2021-01-11 12:09:41
【问题描述】：
我正在构建一个 web 应用程序，其中我在一个可滚动的 flexbox 中有不同的粘性元素。
在 flexbox 的中间容器中，您可以滚动浏览包含在新 div 中的内容，该新 div 从另一个 div 的标题/底部开始。问题是我需要 div 容器来根据视口响应地调整内容的大小。目前不是，内容容器始终是 100vh，即使图像没有填满整个视口。
如何使容器 div 的高度不大于图像高度？ 如果不破坏粘性功能，我将无法使其正常工作。
您可以在这里看到我在 jsfidle 中的意思（它是我要删除的滚动条中下一个标题之间的空白）： https://jsfiddle.net/4w1kjz76/
:root {
/* Variables for header h1*/
--ratio: 15;
--reverse-ratio: 20;
--container-width: 50w;
--container-height: 12.5vh;
--font1-sizeVW: 19vh;
--font1-sizeVH: calc(var(--ratio) * 15vw);
--font2-sizeVW: 6vh;
--font2-sizeVH: calc(var(--ratio) * 6vw);
}
html, body {
margin:0;
padding:0;
-ms-overflow-style: none;
/* IE and Edge */
}
body::-webkit-scrollbar {
display: none;
}
@media(max-width:50em) {
.section {
flex-direction:column
}
}
* {
box-sizing: border-box;
}
main {
max-width: 100vw;
margin: 0px auto;
display: flex;
flex-flow: row wrap;
}
.contentmain {
height: auto;
display: block;
padding: 0px;
flex: 1 1 50%;
}
.sidebarright {
background-color: green;
color: white;
padding: 20px;
height: 100vh;
top: 0;
width: 5%;
position: sticky;
align-self: flex-start;
}
.sidebarleft {
background-color: blue;
height: 100vh;
padding: 20px;
display: inline-block;
flex: 1 1 20%;
top: 0;
position: sticky;
align-self: flex-start;
color: white;
}
h1 {
top:-4.4vh;
color: white;
font-family: arial;
}
.content {
position: relative;
border: 0px solid red;
height: 100vh;
top: 0;
text-align: left;
color: black;
}
.content img {
float: left;
height: auto;
width: 49.75%;
}
.rightimg {
margin-left: 0.5%;
}
.header {
position: sticky;
top: 0;
margin:0;
padding:0;
background-color:black;
height:12.5vh;
}
.bottommenu {
background: orange;
color: white;
width: 100%;
padding: 20px;
height: 9vh;
position:sticky;
bottom:0;
right:0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TRAILBLAZER</title>
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="/script.js" defer></script>
<script src="/js/smoothscroll.min.js"></script>
</head>
<body>
<main id="content">
<div class="sidebarleft">
LEFT-BAR
</div>
<div class="contentmain">
<div class="content">
<header class="header">
<div class="header-bg">
<h1>HEADER 1</h1>
</div>
</header>
<div class="content-inner" id="trigger-1">
<img src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
<img class="rightimg" src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
</div>
</div>
<div class="content">
<header class="header">
<div class="header-bg">
<h1>HEADER 2</h1>
</div>
</header>
<div class="content-inner" id="trigger-2">
<img src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
<img class="rightimg" src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
</div>
</div>
<div class="content">
<header class="header">
<div class="header-bg" id="erika">
<h1>HEADER 3</h1>
</div>
</header>
<div class="content-inner" id="trigger-3">
<img src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
<img class="rightimg" src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
</div>
</div>
<div class="content">
<header class="header">
<div class="header-bg">
<h1>HEADER 3</h1>
</div>
</header>
<div class="content-inner" id="trigger-4">
<img src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
<img class="rightimg" src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
</div>
</div>
<div class="content">
<header class="header">
<div class="header-bg">
<h1>HEADER 4</h1>
</div>
</header>
<div class="content-inner" id="trigger-5">
<img src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
<img class="rightimg" src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
</div>
</div>
<footer class="bottommenu">
STICKY BOTTOM MENU
</footer>
</div>
<div class="sidebarright">
RIGHT-BAR
</div>
</main>
</body>
</html>【问题讨论】：
标签： css flexbox containers responsive viewport