I am building a webapp where I have different sticky elements in a flexbox that is scrollable.
In the middle container of the flexbox you can scroll through content that is contained in a new div starting at the header/bottom of the other div. The problem is that I need the div-container for the content to resize responsively according to the viewport. Currently, it is not, the content container is always 100vh, even if the image does not fill up the whole viewport.
How do I make it so the container div's height is not bigger than the image height? I can't get it working without making the sticky functions breaking.
You can see what I mean in the jsfidle here (it is the white space between the next header in the scroll that i want to remove): 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>The problem was that the content had a "hidden" margin. Writing margin:-1vh; fixed the issue :)