I'm creating a webpage that will have a long list of questions. I'm separating the questions using divs so that I can get the page to jump to the correct section, including the section at the top of the page. The problem is that the header doesn't scroll with the content like it was before I started adding content. Before adding content, the header would scroll as soon as the page started scrolling. Now, it delays until you get to the Service Time Questions radio buttons. I've searched online to see what would cause a delay in scrolling a header, but haven't found any usable results.
Here's my HTML:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="Layout.css">
<meta charset="UTF-8">
<title>Sample Page</title>
</head>
<body>
<div class="header">
<h1>Sample Page</h1>
</div>
<div class="menu">
<ul>
<li>CMS ID & Auditor Name</li>
<li>Service Time Questions</li>
<li>Narrative Questions</li>
<li>Diagram Questions</li>
<li>Photo Questions</li>
<li>Estimatics Questions</li>
</ul>
</div>
<div class="content">
<div id="cmsID" class="subcontent">
<form action="./audit_submitted.php" method="post">
<h3>CMS ID & Auditor Name</h3>
<br/><br/>
<p> Enter CMS ID:
<input type="text" name="cmsID" size="25" maxlength="25" value=""/>
<br/><br/>
Auditor Name:
<input type="text" name="auditorName" size="25" maxlength="25" value=""/>
<br/><br/>
Select Carrier:
<select name="carrierID" required>
<option value="">Select...</option>
<option value = "0">GAIG/AMIG</option>
<option value = "1">Nat Gen</option>
<option value = "2">SoCal AAA</option>
<option value = "3">QBE</option>
</select>
</p>
</form>
<br/><br/><br/>
</div>
<div class="subcontent" id="serviceTime">
<br/>
<h3>Service Time Questions</h3>
<br/><br/>
<input type="radio" name="answer" value="1"> Yes
<input type="radio" name="answer" value="0"> No
<input type="radio" name="answer" value="1"> N/A
<br/><br/>
</div>
<div class="subcontent" id="narrative">
<br/>
<h3>Narrative Questions</h3>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.
Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.
Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.
Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.
Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
<br/><br/>
</div>
<div class="subcontent" id="diagram">
<br/>
<h3>Diagram Questions</h3>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.
Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.
Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.
Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.
Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
<br/><br/>
</div>
<div class="subcontent" id="photos">
<br/>
<h3>Photo Questions</h3>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.
Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.
Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.
Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.
Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
<br/><br/>
</div>
<div class="subcontent" id="estimatics">
<br/>
<h3>Estimatics Questions</h3>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.
Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.
Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.
Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.
Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
<br/><br/>
</div>
</div>
<div class="footer">
© Sample Company 2016
</div>
</body>
</html>
And here's my CSS:
html, body {
min-height: 100%;
margin: 0%;
width: 98%;
font-family: Arial, Helvetica, sans-serif;
overflow-x: hidden;
}
*{
margin: 0%;
padding: 0%;
}
.header{
color: #FFFFFF;
background-color: #B31220;
font-size: 2em;
padding: 1% 0% 1% 2%;
text-align: center;
width: 98%;
position: absolute;
}
.header img{
float: left;
width: 102px;
height: 100px;
top: 8%;
background: #B31220;
}
.header h1{
position: relative;
top: 10px;
left: 5px;
}
/*The menu class is fixed to the left hand side of the screen and takes up full
vertical space available. It does however show up behind the header bar.*/
.menu{
width: 12%;
height: 100%;
position: fixed;
padding-top: 20%;
z-index: -1;
background-color: #505050;
color: #FFFFFF;
}
.content{
width: 88%;
height: 100%;
font-size: 1em;
float: right;
padding: 1%;
padding-top: 10%;
padding-bottom: 20%;
position: absolute;
z-index: -1;
margin-left: 10%;
background-color: #F8e8d2;
overflow-y: scroll;
}
.subcontent{
margin: 2%;
}
.footer{
position: fixed;
bottom: 0;
width: 98%;
background-color: #B31220;
color: #FFFFFF;
clear: both;
text-align: center;
padding: .5% 1%;
}
/*Experimental Code*/
ul {
list-style-type: none;
margin: 0%;
padding: 0%;
width: 10%;
background-color: #505050;
height: 100%;
position: fixed;
overflow: auto;
}
li a {
display: block;
color: #FFF;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #B31220;
color: white;
border: 0;
}
Made a few adjustments to your stylesheet. Using fixed and absolutes in the positions was causing most of the problem. Give definite heights to each div makes a difference.
html, body {
min-height: 100%;
margin: 0%;
width: 98%;
font-family: Arial, Helvetica, sans-serif;
}
*{
margin: 0%;
padding: 0%;
}
.header{
color: #FFFFFF;
background-color: #B31220;
font-size: 2em;
padding: 1% 0% 1% 2%;
text-align: center;
width: 98%;
height: 120px;
}
.header img{
float: left;
width: 102px;
height: 100px;
top: 8%;
background: #B31220;
}
.header h1{
position: relative;
top: 10px;
left: 5px;
}
/*The menu class is fixed to the left hand side of the screen and takes up full
vertical space available. It does however show up behind the header bar.*/
.menu{
width: 12%;
height: 500px;
float: left;
background-color: #505050;
color: #FFFFFF;
}
.content{
width: 88%;
height: 500px;
font-size: 1em;
float: left;
background-color: #F8e8d2;
overflow-y: scroll;
}
.subcontent{
margin: 2%;
}
.footer{
bottom: 0;
width: 98%;
background-color: #B31220;
color: #FFFFFF;
clear: both;
text-align: center;
padding: .5% 1%;
}
/*Experimental Code*/
ul {
list-style-type: none;
margin: 0%;
padding-top: 20%;
width: 100%;
background-color: #505050;
overflow: auto;
}
li a {
display: block;
color: #FFF;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #B31220;
color: white;
border: 0;
}
IF YOU MARK THIS DUPLICATE, YOU HAD BETTER GIVE ME A LINK TO THE ANSWER I NEED. OTHERWISE, DON'T BOTHER MARKING IT DUPLICATE, COMMENTING OR A
Just change you CSS in the html, body for overflow-x: hidden to overflow: hidden and add #estimatics{margin-bottom: 200px}
Thanks to Jeff, I was able to track down what was wrong. His answer didn't fix the issue, but it made the root cause more obvious.
I had to change the height: 100%; in .content to min-height: 100%;.
I also added display: inline-block; to the end of .content.
Finally, I had to add background-color: #F8e8d2; to the .subcontent section because the subcontents were causing discoloration on the content div.
These updates fixed it so that the header scrolls when I start scrolling the page, and my jump links work perfectly.
Related
The problem: The main-container shows a scrollbar when the content-container overflows. Also the width and height of the content-container can't be hardcoded because it should expand with the remaining space of the main-container.
Expectation: Only the content-container shows the scrollbar when the contents overflows and the width and height of main-container doesn't change.
The below code snippet is what I have tried
.main-container {
background: #364f6b;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
color: white;
}
.container__top {
min-height: 27px;
background: #43dde6;
}
.container__bottom {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}
.sidebar {
min-width: 80px;
width: 80px;
height: 100%;
background: #fc5185;
}
.right-container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.tabbar {
height: 27px;
min-height: 27px;
background: #f0f0f0;
}
.content-container {
height: 100%;
overflow: auto;
}
<div class="main-container">
<diV class="container__top">
</div>
<div class="container__bottom">
<div class="sidebar">
</div>
<div class="right-container">
<div class="tabbar"></div>
<div class="content-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et neque eros. Cras nec nunc nec lectus facilisis varius sed ut arcu. Nulla semper consequat ex sed iaculis. Praesent elementum ante vel tincidunt vulputate. Mauris eleifend nisi ante, egestas
vulputate enim tincidunt sit amet. Cras nec augue sed felis eleifend blandit non eget ex. Maecenas at lacinia libero. Aliquam semper turpis eget mi blandit faucibus. Sed felis tellus, porttitor vitae tincidunt vel, volutpat et lectus. Morbi
blandit arcu id pulvinar convallis. Nulla vehicula ultrices metus, sit amet eleifend nibh rhoncus eu. Aenean gravida lobortis dignissim. Proin tempor mi vel libero vestibulum lacinia. Praesent a tempus quam. Nunc feugiat suscipit nibh eu cursus.
Cras quis nisl suscipit, pharetra dolor suscipit, aliquam arcu. Aenean venenatis, elit in congue mattis, elit urna convallis augue, eu sollicitudin ante tortor eget enim. Nam vitae urna non lacus finibus sagittis vestibulum vitae massa. Vestibulum
nec erat ac nisi ornare aliquet eu eu lectus. Nunc dictum turpis nec sagittis semper. Cras facilisis elit id blandit luctus. Donec at cursus velit. Donec scelerisque tristique orci vitae hendrerit. Nulla facilisi. Nunc sit amet finibus nibh.
Morbi dapibus viverra ante sit amet egestas. Maecenas bibendum tellus in nibh convallis consequat. Sed ac venenatis odio, sit amet sodales arcu. Cras metus ipsum, blandit nec luctus eget, egestas et justo. Aenean accumsan massa sed auctor elementum.
Duis eget elementum dolor. Nunc leo felis, interdum sed condimentum non, ultricies tempus risus. Maecenas at ornare leo. Praesent tristique nec nisl id accumsan. Praesent aliquet diam nec arcu molestie ornare. Nam ut gravida augue, non posuere
lorem. Nulla lacinia ex at felis condimentum convallis. Morbi a eleifend ipsum. Nulla sed magna scelerisque erat lacinia viverra vel ut elit. In molestie, urna vel sodales tristique, risus dui placerat elit, nec dictum lorem orci at nulla. Vestibulum
bibendum cursus tincidunt. Nullam hendrerit tristique diam ut rutrum. Cras vel dui porttitor, faucibus arcu a, volutpat nisi. Pellentesque pretium, orci id luctus egestas, orci quam scelerisque mi, sit amet euismod felis sem et nisi. Sed sodales,
ex vitae rhoncus mattis, massa neque faucibus mi, at egestas dui turpis et metus.
</p>
</div>
</div>
</div>
</div>
This is what I want to achieve
You are almost there - instead of using width and height, just use flex-grow and then for your scroll bar, you can absolutely position a div inside the content container to make it have a height of 100%
body,
html {
height: 100%;
margin: 0;
}
.main-container {
background: #364f6b;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
color: white;
}
.container__top {
min-height: 27px;
background: #43dde6;
}
.container__bottom {
flex-grow: 1;
display: flex;
flex-direction: row;
}
.sidebar {
min-width: 80px;
width: 80px;
background: #fc5185;
}
.right-container {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.tabbar {
height: 27px;
min-height: 27px;
background: #f0f0f0;
}
.content-container {
flex-grow: 1;
position: relative;
}
.overflow-container {
position: absolute;
top: 0;
left: 0;
height: 100%;
overflow: auto;
}
<div class="main-container">
<diV class="container__top">
</div>
<div class="container__bottom">
<div class="sidebar">
</div>
<div class="right-container">
<div class="tabbar"></div>
<div class="content-container">
<div class="overflow-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et neque eros. Cras nec nunc nec lectus facilisis varius sed ut arcu. Nulla semper consequat ex sed iaculis. Praesent elementum ante vel tincidunt vulputate. Mauris eleifend nisi ante, egestas
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et neque eros. Cras nec nunc nec lectus facilisis varius sed ut arcu. Nulla semper consequat ex sed iaculis. Praesent elementum ante vel tincidunt vulputate. Mauris eleifend nisi
ante, egestas Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et neque eros. Cras nec nunc nec lectus facilisis varius sed ut arcu. Nulla semper consequat ex sed iaculis. Praesent elementum ante vel tincidunt vulputate. Mauris
eleifend nisi ante, egestas vulputate enim tincidunt sit amet. Cras nec augue sed felis eleifend blandit non eget ex. Maecenas at lacinia libero. Aliquam semper turpis eget mi blandit faucibus. Sed felis tellus, porttitor vitae tincidunt vel,
volutpat et lectus. Morbi blandit arcu id pulvinar convallis. Nulla vehicula ultrices metus, sit amet eleifend nibh rhoncus eu. Aenean gravida lobortis dignissim. Proin tempor mi vel libero vestibulum lacinia. Praesent a tempus quam. Nunc
feugiat suscipit nibh eu cursus. Cras quis nisl suscipit, pharetra dolor suscipit, aliquam arcu. Aenean venenatis, elit in congue mattis, elit urna convallis augue, eu sollicitudin ante tortor eget enim. Nam vitae urna non lacus finibus sagittis
vestibulum vitae massa. Vestibulum nec erat ac nisi ornare aliquet eu eu lectus. Nunc dictum turpis nec sagittis semper. Cras facilisis elit id blandit luctus. Donec at cursus velit. Donec scelerisque tristique orci vitae hendrerit. Nulla
facilisi. Nunc sit amet finibus nibh. Morbi dapibus viverra ante sit amet egestas. Maecenas bibendum tellus in nibh convallis consequat. Sed ac venenatis odio, sit amet sodales arcu. Cras metus ipsum, blandit nec luctus eget, egestas et justo.
Aenean accumsan massa sed auctor elementum. Duis eget elementum dolor. Nunc leo felis, interdum sed condimentum non, ultricies tempus risus. Maecenas at ornare leo. Praesent tristique nec nisl id accumsan. Praesent aliquet diam nec arcu molestie
ornare. Nam ut gravida augue, non posuere lorem. Nulla lacinia ex at felis condimentum convallis. Morbi a eleifend ipsum. Nulla sed magna scelerisque erat lacinia viverra vel ut elit. In molestie, urna vel sodales tristique, risus dui placerat
elit, nec dictum lorem orci at nulla. Vestibulum bibendum cursus tincidunt. Nullam hendrerit tristique diam ut rutrum. Cras vel dui porttitor, faucibus arcu a, volutpat nisi. Pellentesque pretium, orci id luctus egestas, orci quam scelerisque
mi, sit amet euismod felis sem et nisi. Sed sodales, ex vitae rhoncus mattis, massa neque faucibus mi, at egestas dui turpis et metus.
</p>
</div>
</div>
</div>
</div>
</div>
Alternative way to make the layout
The solution given by #pete works perfectly for what I asked using flexbox.
Another way to make the layout is by using grids. With grid I was able to get rid of extra container divs.
Below code snippet uses grid for the layout. The first column of the grid is set to auto so that I can animate the sidebar. If we hover on the sidebar the grid automatically adjusts with the width of the sidebar.
body {
margin: 0;
height: 100vh;
width: 100vw
}
#root {
height: 100%;
width: 100%;
display: grid;
grid-template-rows: 29px auto 1fr;
grid-template-columns: auto 1fr 300px;
grid-template-areas:
"topbar topbar topbar"
"sidebar tabbar tabbar"
"sidebar content content";
}
#topbar {
grid-area: topbar;
background: #ba53de;
}
#sidebar {
width: 80px;
grid-area: sidebar;
background: #f469a9;
transition: 100ms ease;
}
#sidebar:hover {
width: 150px;
}
#tabbar {
height: 25px;
grid-area: tabbar;
background: #f4fa9c;
}
#content {
grid-area: content;
background: #88bef5;
height: 100%;
width: 100%;
overflow: auto;
}
.story{ padding: 10px; }
<div id="root">
<div id="topbar"></div>
<div id="sidebar"></div>
<div id="tabbar"></div>
<div id="content">
<div class="story">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin tincidunt ex ut rutrum. Ut quis sagittis odio. Integer magna orci, facilisis a porttitor sed, gravida vel tortor. Nulla scelerisque faucibus vehicula. Donec in libero dignissim,
placerat velit a, pretium ante. Donec sed eros orci. Praesent quis neque at mauris facilisis eleifend eget elementum sem. Nam pulvinar mauris odio, sit amet scelerisque mauris porta non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia curae; Maecenas eget tristique lectus. Quisque sed quam felis. Vestibulum sit amet semper dui. Mauris sit amet consectetur nibh. Sed cursus viverra elit quis accumsan. Proin pharetra lorem nec nisl tempus pretium. Cras vel suscipit
odio, in mattis sem. Vivamus finibus odio eu nisl egestas tristique. Mauris posuere gravida pulvinar. Suspendisse a lacus purus. Morbi imperdiet arcu et aliquet cursus. Ut condimentum magna at eleifend vehicula. Nullam interdum fermentum lectus.
Ut vitae molestie dolor. Etiam mollis ut purus vitae tempor. Mauris aliquet ex sit amet vestibulum ultrices. Quisque id leo nec mauris feugiat volutpat non ac diam. Praesent ac eros sed lorem tempor commodo. Donec quam urna, congue nec metus vitae,
vulputate semper ligula. Nunc eleifend pharetra dolor, eget congue nisl mattis non. Integer ultrices ex in dapibus pharetra. Nullam viverra non eros in congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin eu ante malesuada,
pharetra est eget, placerat neque. Quisque et leo cursus, fringilla velit in, posuere nulla. Donec tincidunt augue et arcu lobortis volutpat. Phasellus eu vulputate est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc diam eros,
consectetur id urna id, ullamcorper semper ipsum. Quisque diam mi, condimentum at gravida at, fermentum a velit. Aenean a turpis nec eros imperdiet luctus eget eget erat. Aenean non viverra nisi. Aliquam ligula erat, eleifend vel lacus varius, tincidunt
tristique turpis. Aenean suscipit risus sed diam euismod, sit amet gravida tortor condimentum. Morbi auctor luctus quam, quis vestibulum leo auctor a. Sed convallis, tellus eget lacinia fringilla, massa justo consequat ante, sed aliquam enim felis
ac est. Fusce rutrum ipsum quis imperdiet gravida. Vestibulum facilisis vel est in ultrices. Maecenas rhoncus nisl vitae consectetur pulvinar. Praesent imperdiet, lorem sed dapibus bibendum, velit tortor molestie elit, et ornare mi nisl ut lacus.
Morbi quis vestibulum elit. Donec sed aliquam purus, vitae porta enim. Vivamus finibus dui sed faucibus eleifend. Praesent ac ligula arcu. Aliquam et cursus quam. Aliquam tempor neque leo, ac tincidunt ipsum gravida sit amet. Phasellus ac turpis
sit amet ex gravida auctor. Donec non imperdiet nisl. Donec facilisis mi at diam euismod, eu finibus lacus tincidunt. In cursus scelerisque urna molestie ullamcorper. Sed varius ornare lectus, nec ultricies leo facilisis non. Nulla facilisi. In
hac habitasse platea dictumst. Proin et leo dignissim, tristique libero vitae, lacinia metus. In pulvinar metus vitae arcu consectetur, facilisis pellentesque sem consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Vivamus quis volutpat justo. Praesent ipsum orci, blandit id dignissim in, mattis eget felis. Aenean rutrum est urna, ut laoreet nisi scelerisque quis. Nam augue risus, fermentum venenatis lectus a, malesuada condimentum odio.
</div>
</div>
</div>
In the following example I am trying to create a layout where the navigation will:
Always stay sticky to the top when scrolling down
Always stay left (not all the way left of the browser window) from content which a person is able to read
Prevent any space from being taken up by the actual navigation element's size
header h1 {
text-align: center;
}
main {
display: block;
max-width: 500px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
nav {
border: 1px solid #000;
width: 200px;
position: sticky;
top: 0;
right: 0;
background-color: orange;
}
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
nav ul a {
display: block;
border: 1px solid #000;
margin: 5px 0;
padding: 5px;
}
<div class="some-container">
<header>
<h1>
Some header
</h1>
</header>
<nav>
<ul>
<li>Below</li>
<li>Above</li>
</ul>
</nav>
<main>
<h1>
Below is some content
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius a. Etiam ut dignissim lacus, ut iaculis mi.
Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra. Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et molestie purus sodales. Vestibulum ornare ac nisl ut
dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque tellus quam, suscipit non enim et, pellentesque
varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum, nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus pellentesque accumsan. Duis maximus augue id lacus
tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo, porttitor at faucibus ut, sodales id erat.
</p>
<p>
Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus nec cursus. Nullam ut arcu lacus. Vivamus eleifend
ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
</p>
<p>
Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est, iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus tortor. Fusce in laoreet lacus. Cras dui sapien,
convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget ex.
</p>
<p>
Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam, pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at euismod orci felis sit amet neque. Maecenas fringilla
enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla. Integer imperdiet massa eu orci faucibus
mattis.
</p>
<h1 id="above">Above all</h1>
</main>
</div>
I tried using the right property (on the nav selector) to see if I could use it to make it stick to the container with the actual content inside but it does not do anything at all. Most webpages I could find with a navigation to the sides tend to touch the browsers sides and this is not the solution I am looking for, which makes it difficult for me to find a solution to this problem.
What I intend to make the page look like:
Here is my solution. I wrapped nav and main in an extra container, giving it the class name some-container-inside. In css, I changed all my edits. Hope this is what you need.
header h1 {
text-align: center;
}
main {
display: block;
max-width: 500px;
/*margin-left: auto;*/ /*delete this it*/
/*margin-right: auto;*/ /*delete this it*/
width: 100%;
}
main h1 {
margin-top: 0; /*add this it*/
}
nav {
display: table; /*add this it*/
border: 1px solid #000;
width: 200px;
position: sticky;
top: 0;
right: 0;
background-color: orange;
margin-right: 25px; /*add this it*/
margin-left: 25px; /*add this it*/
}
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
nav ul a {
display: block;
border: 1px solid #000;
margin: 5px 0;
padding: 5px;
}
.some-container-inside {
display: flex; /*add this it*/
justify-content: center; /*add this it*/
}
<div class="some-container">
<header>
<h1>
Some header
</h1>
</header>
<div class="some-container-inside">
<nav>
<ul>
<li>Below</li>
<li>Above</li>
</ul>
</nav>
<main>
<h1>
Below is some content
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius a. Etiam ut dignissim lacus, ut iaculis mi.
Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra. Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et molestie purus sodales. Vestibulum ornare ac nisl ut
dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque tellus quam, suscipit non enim et, pellentesque
varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum, nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus pellentesque accumsan. Duis maximus augue id lacus
tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo, porttitor at faucibus ut, sodales id erat.
</p>
<p>
Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus nec cursus. Nullam ut arcu lacus. Vivamus eleifend
ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
</p>
<p>
Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est, iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus tortor. Fusce in laoreet lacus. Cras dui sapien,
convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget ex.
</p>
<p>
Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam, pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at euismod orci felis sit amet neque. Maecenas fringilla
enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla. Integer imperdiet massa eu orci faucibus
mattis.
</p>
<h1 id="above">Above all</h1>
</main>
</div>
</div>
This code you try .
hope can help you.
i add position property on some class tag.
ex:header h1,nav . and new class some-container.
header h1 {
text-align: center;
position: absolute;
right: 850px;
top: 50px;
}
main {
display: block;
max-width: 500px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
nav {
border: 1px solid #000;
width: 200px;
position: sticky;
z-index: 100;
top: 135px;
left: 480px;
background-color: orange;
}
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
nav ul a {
display: block;
border: 1px solid #000;
margin: 5px 0;
padding: 5px;
}
.some-container {
position: relative;
}
<div class="some-container">
<header>
<h1>
Some header
</h1>
</header>
<nav>
<ul>
<li>Below</li>
<li>Above</li>
</ul>
</nav>
<main>
<h1>
Below is some content
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius a. Etiam ut dignissim lacus, ut iaculis mi.
Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra. Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et molestie purus sodales. Vestibulum ornare ac nisl ut
dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque tellus quam, suscipit non enim et, pellentesque
varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum, nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus pellentesque accumsan. Duis maximus augue id lacus
tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo, porttitor at faucibus ut, sodales id erat.
</p>
<p>
Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus nec cursus. Nullam ut arcu lacus. Vivamus eleifend
ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
</p>
<p>
Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est, iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus tortor. Fusce in laoreet lacus. Cras dui sapien,
convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget ex.
</p>
<p>
Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam, pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at euismod orci felis sit amet neque. Maecenas fringilla
enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla. Integer imperdiet massa eu orci faucibus
mattis.
</p>
<h1 id="above">Above all</h1>
</main>
</div>
Version 1: HTML / CSS
The changes I made in:
HTML: The NAV element is in the MAIN element
CSS: On the NAV element set style margin-left: -230px; and margin-bottom: -130px;
In this version, if you add a new menu item, you must manually set the margin-bottom:
If you want this to be done automatically see Version 2 below in this post
header h1 {
text-align: center;
}
main {
display: block;
max-width: 500px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
nav {
border: 1px solid #000;
width: 200px;
position: sticky;
top: 0;
margin-left: -230px;
margin-bottom: -130px;
background-color: orange;
}
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
nav ul a {
display: block;
border: 1px solid #000;
margin: 5px 0;
padding: 5px;
}
<div class="some-container">
<header>
<h1>
Some header
</h1>
</header>
<main>
<nav>
<ul>
<li>Below</li>
<li>Above</li>
</ul>
</nav>
<h1>
Below is some content
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis
auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius
a. Etiam ut dignissim lacus, ut iaculis mi.
Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra.
Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et
molestie purus sodales. Vestibulum ornare ac nisl ut
dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus
porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque
tellus quam, suscipit non enim et, pellentesque
varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum
rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum,
nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus
pellentesque accumsan. Duis maximus augue id lacus
tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo,
porttitor at faucibus ut, sodales id erat.
</p>
<p>
Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum
velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus
nec cursus. Nullam ut arcu lacus. Vivamus eleifend
ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
</p>
<p>
Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est,
iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus
tortor. Fusce in laoreet lacus. Cras dui sapien,
convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget
ex.
</p>
<p>
Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam,
pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at
euismod orci felis sit amet neque. Maecenas fringilla
enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo
vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla.
Integer imperdiet massa eu orci faucibus
mattis.
</p>
<h1 id="above">Above all</h1>
</main>
</div>
Version 2: HTML / CSS / JS
You can add new items to the navigation and the JS will make the necessary changes so that the navigation is always displayed in the right place.
Important: The JS code must be added at the bottom of the page code
var nav = document.getElementsByTagName('nav')[0];
nav.setAttribute('style', 'margin-bottom:-' + (nav.offsetHeight + 30) + 'px');
header h1 {
text-align: center;
}
main {
display: block;
max-width: 500px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
nav {
border: 1px solid #000;
width: 200px;
position: sticky;
top: 0;
margin-left: -230px;
background-color: orange;
}
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
nav ul a {
display: block;
border: 1px solid #000;
margin: 5px 0;
padding: 5px;
}
<div class="some-container">
<header>
<h1>
Some header
</h1>
</header>
<main>
<nav>
<ul>
<li>Below</li>
<li>Above</li>
<li>Contacts</li>
</ul>
</nav>
<h1>
Below is some content
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis
auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius
a. Etiam ut dignissim lacus, ut iaculis mi.
Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra.
Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et
molestie purus sodales. Vestibulum ornare ac nisl ut
dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus
porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque
tellus quam, suscipit non enim et, pellentesque
varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum
rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum,
nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus
pellentesque accumsan. Duis maximus augue id lacus
tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo,
porttitor at faucibus ut, sodales id erat.
</p>
<p>
Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum
velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus
nec cursus. Nullam ut arcu lacus. Vivamus eleifend
ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
</p>
<p>
Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est,
iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus
tortor. Fusce in laoreet lacus. Cras dui sapien,
convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget
ex.
</p>
<p>
Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam,
pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at
euismod orci felis sit amet neque. Maecenas fringilla
enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo
vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla.
Integer imperdiet massa eu orci faucibus
mattis.
</p>
<h1 id="above">Above all</h1>
</main>
</div>
I have a fixed header at the top of my page, but when I scroll up the content text stays on top of my header. I want the content to go behind the header.
I have tried adjusting the margins and using z-index, but nothing has worked thus far.
.header {
position: fixed;
border-bottom: 1px solid #000000;
width: 90%;
z-index: 1000;
}
.main {
position: relative;
top: 140px;
z-index: 1;
}
<header class="header">
<img src="">
</header>
<div class="main">
<h1>Hello World!</h1>
</div>
Your code is working as intended. However, you forgot to set the background color of your header which means it is transparent.
I did a few modifications to your snippet to make it a bit more obvious from the snippet but the important CSS is the background colour.
.header {
position: fixed;
border-bottom: 1px solid #000000;
width: 90%;
z-index: 1000;
background: #fff;
top: 0; left: 0; right: 0;
width: 100%;
height: 50px;
}
.main {
position: relative;
top: 140px;
z-index: 1;
}
<header class="header">
<img src="">
</header>
<div class="main">
<h1>Hello World!</h1>
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mattis tellus at magna vulputate, sed tempus arcu finibus. Fusce cursus aliquam posuere. Cras sodales dolor vitae massa eleifend bibendum. Nunc pulvinar dui quis hendrerit pulvinar. Nam interdum, justo non tristique hendrerit, leo nibh posuere diam, sed facilisis est mauris id libero. Suspendisse eget lectus augue. Fusce eget justo ut enim convallis ornare. Maecenas tincidunt dui non lectus elementum rhoncus. Nam sed porttitor turpis. Fusce sit amet urna quis tellus tempus tempus vehicula id tortor. Maecenas tincidunt sit amet eros a ultrices.
</p>
<p>
Vivamus pharetra eget tortor ac imperdiet. Nulla vitae mauris a mauris convallis ultricies at non arcu. Sed blandit turpis quis purus dapibus ornare. Cras ultricies dignissim lorem, sed viverra leo elementum eget. Ut condimentum a nunc in auctor. Pellentesque quis tortor blandit, tincidunt sem et, vestibulum sem. Pellentesque tincidunt ligula ac lectus suscipit dictum. Integer ante ex, pulvinar sit amet laoreet ac, lacinia vel nisl.
</p>
<p>
Cras lacinia at nibh ac placerat. Donec ut molestie felis. Quisque non rutrum diam, a laoreet risus. Maecenas vitae cursus massa, ut ultricies ante. Donec sed sem vel lorem luctus consequat. Integer efficitur pulvinar nulla sed malesuada. Curabitur sollicitudin, libero sit amet cursus pharetra, massa risus auctor neque, vel luctus nulla massa sit amet erat. Quisque at vestibulum nulla. Vestibulum porttitor augue nec placerat scelerisque. Nulla sed augue ac est venenatis viverra vitae non enim. Nulla facilisi. Ut tincidunt est nec volutpat vulputate.
</p>
<p>
Aenean quam risus, ornare et lacus eu, ultricies lobortis metus. Sed ut eleifend nisl. Vestibulum sed odio lobortis, eleifend ex ac, lacinia dui. Nullam sagittis varius sollicitudin. Vestibulum vel nisi diam. Aliquam nulla dolor, porta id ultricies eu, vulputate nec ipsum. Suspendisse porta lectus in augue egestas dictum. Nullam felis sapien, pulvinar quis felis non, ultrices accumsan dolor. Curabitur at diam mollis, porttitor orci ut, posuere nulla. Suspendisse nec sapien eros. Sed sit amet cursus est. Etiam ut lectus ut purus dictum ornare vitae eget lacus. Quisque rhoncus auctor sollicitudin. Nulla feugiat est sit amet tristique hendrerit.
</p>
<p>
Praesent vel enim vel est tincidunt aliquet. Nullam feugiat odio id ante consectetur commodo. Nam sagittis accumsan enim, non faucibus lacus lobortis sit amet. Aliquam tellus dui, volutpat sed gravida sit amet, tincidunt nec diam. Ut rhoncus facilisis tortor, et eleifend sem sagittis id. Maecenas sed odio felis. Donec eu iaculis metus. Integer dignissim volutpat lectus, id ultricies nisl hendrerit sit amet. Donec egestas gravida felis. Aenean blandit iaculis elit, nec luctus tortor luctus ut.
</p></div>
</div>
Context
I'm making a website that allows to create csgo bind/config files, so I splited the page in half : on the left, inputs from user, on the right, the configuration result.
I have one button, at the end of the each panel, to compute inputs and to download the file, but I would like to keep them visible all time (currently, they are at the bottom of the page, i need to scroll to find them).
For one panel, we have :
As the title and the button have "known" position, is there a way to extend the lorem ipsum div, pushing the button to the bottom of the panel, without overflowing the screen ?
I don't want to use absolute attributes, in anticipation of an adaptation for smaller screens (at that time, the two panels will be located one below the other).
I have try some stuff with flex-grow, nothing convincing.
I don't have any defined height for the lorem ipsum div; I want to cover the maximum of the panel, without overflowing it.
Here is some simplified code :
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
#wrapper {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
}
.panel {
flex-grow: 1;
min-width: 200px;
max-width: 50%;
padding: 1em;
}
#lorem {
overflow-y: scroll;
}
/* add colors :) */
body {
background-color: lightgreen;
}
#left {
background-color: red;
}
#right {
background-color: purple;
}
#lorem {
background: yellow;
}
#wrapper {
background-color: darkblue;
}
textarea {
resize: none;
}
h2 {
background-color: green;
}
input[type=button] {
border: 1px solid black;
background-color: blue;
}
<h1>Test</h1>
<div id="wrapper">
<div class="panel" id="left">
<div id="title">
<h2>Plic</h2>
</div>
<div id="lorem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra ante sit amet velit rutrum eleifend. Integer efficitur convallis dui, in aliquet augue pellentesque ut. Aenean ut lobortis nibh. Nullam et laoreet arcu, sed consectetur lectus.
Phasellus ut nunc orci. Fusce mauris neque, ullamcorper at auctor vel, mollis vitae dolor. Mauris eget eleifend dui. Donec ut vestibulum ex. Nullam laoreet mi ut augue posuere pellentesque. Curabitur aliquet rutrum leo iaculis aliquet. Donec convallis
ante nunc, nec dictum ex fringilla sit amet.</p>
<p>Nam vel lacus non leo auctor ornare. Integer sit amet lectus in elit tristique eleifend ut a libero. Nam eu mauris in sapien semper venenatis. Integer malesuada fringilla sapien vel blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Nulla pretium sem quis nulla efficitur fermentum. Vestibulum leo nisi, imperdiet ut venenatis sed, consectetur cursus purus. Morbi ac ipsum aliquet, tempor enim bibendum, cursus mi. Phasellus eget semper augue, ut viverra tellus. Nulla lacus nisi,
congue imperdiet imperdiet sed, sollicitudin eu ex. Ut non dapibus elit. Donec at mollis ante. In aliquet pulvinar sollicitudin. Duis ac orci lobortis, pellentesque lacus in, feugiat urna. Suspendisse consectetur, risus ac elementum condimentum,
velit diam convallis ex, id ornare leo arcu at sapien.</p>
<p>Donec bibendum elit id orci rutrum, at eleifend urna porttitor. Vivamus odio quam, gravida at euismod in, vestibulum et dui. Morbi egestas urna eu erat hendrerit, in porttitor libero pharetra. Integer justo mauris, pulvinar tincidunt turpis a, tristique
ullamcorper nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin mollis tincidunt nunc eget tempor. Mauris bibendum pretium quam id pretium.</p>
<p>Phasellus quis nisi vehicula, viverra lacus non, porttitor dui. Suspendisse fringilla ullamcorper finibus. Praesent nec auctor elit. Nulla sit amet risus egestas, lacinia orci feugiat, imperdiet metus. Morbi purus metus, egestas eu massa in, aliquet
ullamcorper lectus. Praesent condimentum vehicula condimentum. Morbi nec neque a massa egestas tempus. Donec a cursus dui. Nullam scelerisque ultricies odio a dictum. Proin at ullamcorper justo, non auctor justo. Morbi id nunc id augue pulvinar
porttitor. Vestibulum congue magna eu odio condimentum rutrum. Pellentesque non pretium nibh.</p>
<p>Nunc ante leo, dapibus sit amet felis id, mattis auctor nisi. Praesent nec lacus posuere, commodo orci in, varius purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus in euismod nibh, nec congue purus. Aenean euismod laoreet
eros, et iaculis mi pharetra vitae. Curabitur eget massa non nibh consectetur pellentesque. In varius pharetra urna, ac tristique sapien lobortis vel.</p>
<p>Quisque eu velit mauris. Nunc sit amet placerat tellus. Praesent in fermentum orci. Sed pulvinar facilisis ornare. Vestibulum et metus eget libero tristique vulputate vitae vitae justo. Duis sit amet malesuada dolor. Etiam semper purus id turpis
ultrices, eu facilisis purus varius. Vivamus interdum elit ligula, eget condimentum purus tincidunt ac. Nullam at mattis arcu. Nunc vitae mi consequat, hendrerit urna et, gravida nulla. Ut ac purus blandit, volutpat leo non, facilisis lorem. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi dignissim porttitor sem et auctor. Praesent rutrum dignissim orci sit amet euismod.</p>
<p>Pellentesque hendrerit, arcu a iaculis semper, nisi libero porta turpis, et suscipit velit ipsum eu eros. Integer ex elit, pretium vel sapien eget, pulvinar sagittis tellus. Etiam non finibus ante, vitae viverra sem. Nulla in purus in lectus varius
pulvinar quis non turpis. Suspendisse sit amet arcu orci. Aliquam erat volutpat. Cras tincidunt enim vitae aliquam commodo. Curabitur non justo viverra, porttitor lorem sed, viverra diam.</p>
<p>Etiam et lobortis quam. Etiam accumsan pharetra lorem, nec sagittis leo vestibulum nec. Aenean pulvinar nisl ac sapien ultricies, eget lacinia neque aliquet. Fusce egestas libero id nisl rutrum, eget egestas turpis interdum. Etiam consectetur convallis
ex. Pellentesque mollis tortor vel dapibus tincidunt. Phasellus varius, nibh non consequat rhoncus, nisi est mollis quam, sed lacinia risus nisl sit amet arcu. Donec id tellus eu justo rutrum dictum. Integer tristique risus ut odio rutrum, quis
dignissim est varius. Cras a tortor semper, accumsan urna sed, mattis dolor. Ut eget placerat purus. Aliquam in sollicitudin tellus. Vestibulum a semper quam, ut hendrerit enim.</p>
<p>Sed et erat consequat, ultrices est quis, sollicitudin lectus. Sed eu semper sapien. Sed suscipit bibendum lacus in semper. Duis mi tellus, gravida a risus id, bibendum tincidunt lectus. Nam consectetur iaculis tempus. Phasellus id consequat felis.
Aenean at ipsum molestie, ornare dui in, mollis turpis. Suspendisse sagittis in sapien ac consequat.</p>
</div>
<div id="button">
<input type="button" value="Press Me">
</div>
</div>
<div class="panel" id="right">
<div>
<h2>Ploc</h2>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="button" value="Press Me">
</div>
</div>
</div>
Make each of you panel elements a column flexbox with height: 100% (also consider border-box to including padding in height).
Now just add min-height: 0 to wrapper element - see demo below:
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
#wrapper {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
min-height: 0; /* added */
}
.panel {
flex-grow: 1;
min-width: 200px;
max-width: 50%;
padding: 1em;
display: flex; /* added */
height: 100%; /* added */
flex-direction: column; /* added */
box-sizing: border-box; /* added */
}
#lorem {
overflow-y: scroll;
}
/* add colors :) */
body {
background-color: lightgreen;
}
#left {
background-color: red;
}
#right {
background-color: purple;
}
#lorem {
background: yellow;
}
#wrapper {
background-color: darkblue;
}
textarea {
resize: none;
}
h2 {
background-color: green;
}
input[type=button] {
border: 1px solid black;
background-color: blue;
}
<h1>Test</h1>
<div id="wrapper">
<div class="panel" id="left">
<div id="title">
<h2>Plic</h2>
</div>
<div id="lorem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra ante sit amet velit rutrum eleifend. Integer efficitur convallis dui, in aliquet augue pellentesque ut. Aenean ut lobortis nibh. Nullam et laoreet arcu, sed consectetur lectus.
Phasellus ut nunc orci. Fusce mauris neque, ullamcorper at auctor vel, mollis vitae dolor. Mauris eget eleifend dui. Donec ut vestibulum ex. Nullam laoreet mi ut augue posuere pellentesque. Curabitur aliquet rutrum leo iaculis aliquet. Donec convallis
ante nunc, nec dictum ex fringilla sit amet.</p>
<p>Nam vel lacus non leo auctor ornare. Integer sit amet lectus in elit tristique eleifend ut a libero. Nam eu mauris in sapien semper venenatis. Integer malesuada fringilla sapien vel blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Nulla pretium sem quis nulla efficitur fermentum. Vestibulum leo nisi, imperdiet ut venenatis sed, consectetur cursus purus. Morbi ac ipsum aliquet, tempor enim bibendum, cursus mi. Phasellus eget semper augue, ut viverra tellus. Nulla lacus nisi,
congue imperdiet imperdiet sed, sollicitudin eu ex. Ut non dapibus elit. Donec at mollis ante. In aliquet pulvinar sollicitudin. Duis ac orci lobortis, pellentesque lacus in, feugiat urna. Suspendisse consectetur, risus ac elementum condimentum,
velit diam convallis ex, id ornare leo arcu at sapien.</p>
<p>Donec bibendum elit id orci rutrum, at eleifend urna porttitor. Vivamus odio quam, gravida at euismod in, vestibulum et dui. Morbi egestas urna eu erat hendrerit, in porttitor libero pharetra. Integer justo mauris, pulvinar tincidunt turpis a, tristique
ullamcorper nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin mollis tincidunt nunc eget tempor. Mauris bibendum pretium quam id pretium.</p>
<p>Phasellus quis nisi vehicula, viverra lacus non, porttitor dui. Suspendisse fringilla ullamcorper finibus. Praesent nec auctor elit. Nulla sit amet risus egestas, lacinia orci feugiat, imperdiet metus. Morbi purus metus, egestas eu massa in, aliquet
ullamcorper lectus. Praesent condimentum vehicula condimentum. Morbi nec neque a massa egestas tempus. Donec a cursus dui. Nullam scelerisque ultricies odio a dictum. Proin at ullamcorper justo, non auctor justo. Morbi id nunc id augue pulvinar
porttitor. Vestibulum congue magna eu odio condimentum rutrum. Pellentesque non pretium nibh.</p>
<p>Nunc ante leo, dapibus sit amet felis id, mattis auctor nisi. Praesent nec lacus posuere, commodo orci in, varius purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus in euismod nibh, nec congue purus. Aenean euismod laoreet
eros, et iaculis mi pharetra vitae. Curabitur eget massa non nibh consectetur pellentesque. In varius pharetra urna, ac tristique sapien lobortis vel.</p>
<p>Quisque eu velit mauris. Nunc sit amet placerat tellus. Praesent in fermentum orci. Sed pulvinar facilisis ornare. Vestibulum et metus eget libero tristique vulputate vitae vitae justo. Duis sit amet malesuada dolor. Etiam semper purus id turpis
ultrices, eu facilisis purus varius. Vivamus interdum elit ligula, eget condimentum purus tincidunt ac. Nullam at mattis arcu. Nunc vitae mi consequat, hendrerit urna et, gravida nulla. Ut ac purus blandit, volutpat leo non, facilisis lorem. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi dignissim porttitor sem et auctor. Praesent rutrum dignissim orci sit amet euismod.</p>
<p>Pellentesque hendrerit, arcu a iaculis semper, nisi libero porta turpis, et suscipit velit ipsum eu eros. Integer ex elit, pretium vel sapien eget, pulvinar sagittis tellus. Etiam non finibus ante, vitae viverra sem. Nulla in purus in lectus varius
pulvinar quis non turpis. Suspendisse sit amet arcu orci. Aliquam erat volutpat. Cras tincidunt enim vitae aliquam commodo. Curabitur non justo viverra, porttitor lorem sed, viverra diam.</p>
<p>Etiam et lobortis quam. Etiam accumsan pharetra lorem, nec sagittis leo vestibulum nec. Aenean pulvinar nisl ac sapien ultricies, eget lacinia neque aliquet. Fusce egestas libero id nisl rutrum, eget egestas turpis interdum. Etiam consectetur convallis
ex. Pellentesque mollis tortor vel dapibus tincidunt. Phasellus varius, nibh non consequat rhoncus, nisi est mollis quam, sed lacinia risus nisl sit amet arcu. Donec id tellus eu justo rutrum dictum. Integer tristique risus ut odio rutrum, quis
dignissim est varius. Cras a tortor semper, accumsan urna sed, mattis dolor. Ut eget placerat purus. Aliquam in sollicitudin tellus. Vestibulum a semper quam, ut hendrerit enim.</p>
<p>Sed et erat consequat, ultrices est quis, sollicitudin lectus. Sed eu semper sapien. Sed suscipit bibendum lacus in semper. Duis mi tellus, gravida a risus id, bibendum tincidunt lectus. Nam consectetur iaculis tempus. Phasellus id consequat felis.
Aenean at ipsum molestie, ornare dui in, mollis turpis. Suspendisse sagittis in sapien ac consequat.</p>
</div>
<div id="button">
<input type="button" value="Press Me">
</div>
</div>
<div class="panel" id="right">
<div>
<h2>Ploc</h2>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="button" value="Press Me">
</div>
</div>
</div>
PS: Adding min-height: 0 is to override the default min-height: auto for flex items in column direction - you can see some examples of this:
Flexbox affects overflow-wrap behavior
Flexbox resize and scrollable overflow
Why don't flex items shrink past content size?
Added the following CSS to your lorem id:
#lorem {
height: 80%;
overflow-y: auto;
}
Also to your panel: max-height: 100%;
Key part here is overflow-y: scroll. This works as long as you have a height defined. Since you want the content of your lorem to be relative to your panel, you can use a % height, in this case 80% seems to fit nicely between your title and button.
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
#lorem {
height: 80%;
overflow-y: scroll;
}
#wrapper {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
}
.panel {
flex-grow: 1;
max-height: 100%;
min-width: 200px;
max-width: 50%;
padding: 1em;
}
/* add colors :) */
body {
background-color: lightgreen;
}
#left {
background-color: red;
}
#right {
background-color: purple;
}
#lorem {
background: yellow;
}
#wrapper {
background-color: darkblue;
}
textarea {
resize: none;
}
h2 {
background-color: green;
}
input[type=button] {
border: 1px solid black;
background-color: blue;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Test</h1>
<div id="wrapper">
<div class="panel" id="left">
<div id="title">
<h2>Plic</h2>
</div>
<div id="lorem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra ante sit amet velit rutrum eleifend. Integer efficitur convallis dui, in aliquet augue pellentesque ut. Aenean ut lobortis nibh. Nullam et laoreet arcu, sed consectetur lectus. Phasellus ut nunc orci. Fusce mauris neque, ullamcorper at auctor vel, mollis vitae dolor. Mauris eget eleifend dui. Donec ut vestibulum ex. Nullam laoreet mi ut augue posuere pellentesque. Curabitur aliquet rutrum leo iaculis aliquet. Donec convallis ante nunc, nec dictum ex fringilla sit amet.</p>
<p>Nam vel lacus non leo auctor ornare. Integer sit amet lectus in elit tristique eleifend ut a libero. Nam eu mauris in sapien semper venenatis. Integer malesuada fringilla sapien vel blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla pretium sem quis nulla efficitur fermentum. Vestibulum leo nisi, imperdiet ut venenatis sed, consectetur cursus purus. Morbi ac ipsum aliquet, tempor enim bibendum, cursus mi. Phasellus eget semper augue, ut viverra tellus. Nulla lacus nisi, congue imperdiet imperdiet sed, sollicitudin eu ex. Ut non dapibus elit. Donec at mollis ante. In aliquet pulvinar sollicitudin. Duis ac orci lobortis, pellentesque lacus in, feugiat urna. Suspendisse consectetur, risus ac elementum condimentum, velit diam convallis ex, id ornare leo arcu at sapien.</p>
<p>Donec bibendum elit id orci rutrum, at eleifend urna porttitor. Vivamus odio quam, gravida at euismod in, vestibulum et dui. Morbi egestas urna eu erat hendrerit, in porttitor libero pharetra. Integer justo mauris, pulvinar tincidunt turpis a, tristique ullamcorper nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin mollis tincidunt nunc eget tempor. Mauris bibendum pretium quam id pretium.</p>
<p>Phasellus quis nisi vehicula, viverra lacus non, porttitor dui. Suspendisse fringilla ullamcorper finibus. Praesent nec auctor elit. Nulla sit amet risus egestas, lacinia orci feugiat, imperdiet metus. Morbi purus metus, egestas eu massa in, aliquet ullamcorper lectus. Praesent condimentum vehicula condimentum. Morbi nec neque a massa egestas tempus. Donec a cursus dui. Nullam scelerisque ultricies odio a dictum. Proin at ullamcorper justo, non auctor justo. Morbi id nunc id augue pulvinar porttitor. Vestibulum congue magna eu odio condimentum rutrum. Pellentesque non pretium nibh.</p>
<p>Nunc ante leo, dapibus sit amet felis id, mattis auctor nisi. Praesent nec lacus posuere, commodo orci in, varius purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus in euismod nibh, nec congue purus. Aenean euismod laoreet eros, et iaculis mi pharetra vitae. Curabitur eget massa non nibh consectetur pellentesque. In varius pharetra urna, ac tristique sapien lobortis vel.</p>
<p>Quisque eu velit mauris. Nunc sit amet placerat tellus. Praesent in fermentum orci. Sed pulvinar facilisis ornare. Vestibulum et metus eget libero tristique vulputate vitae vitae justo. Duis sit amet malesuada dolor. Etiam semper purus id turpis ultrices, eu facilisis purus varius. Vivamus interdum elit ligula, eget condimentum purus tincidunt ac. Nullam at mattis arcu. Nunc vitae mi consequat, hendrerit urna et, gravida nulla. Ut ac purus blandit, volutpat leo non, facilisis lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi dignissim porttitor sem et auctor. Praesent rutrum dignissim orci sit amet euismod.</p>
<p>Pellentesque hendrerit, arcu a iaculis semper, nisi libero porta turpis, et suscipit velit ipsum eu eros. Integer ex elit, pretium vel sapien eget, pulvinar sagittis tellus. Etiam non finibus ante, vitae viverra sem. Nulla in purus in lectus varius pulvinar quis non turpis. Suspendisse sit amet arcu orci. Aliquam erat volutpat. Cras tincidunt enim vitae aliquam commodo. Curabitur non justo viverra, porttitor lorem sed, viverra diam.</p>
<p>Etiam et lobortis quam. Etiam accumsan pharetra lorem, nec sagittis leo vestibulum nec. Aenean pulvinar nisl ac sapien ultricies, eget lacinia neque aliquet. Fusce egestas libero id nisl rutrum, eget egestas turpis interdum. Etiam consectetur convallis ex. Pellentesque mollis tortor vel dapibus tincidunt. Phasellus varius, nibh non consequat rhoncus, nisi est mollis quam, sed lacinia risus nisl sit amet arcu. Donec id tellus eu justo rutrum dictum. Integer tristique risus ut odio rutrum, quis dignissim est varius. Cras a tortor semper, accumsan urna sed, mattis dolor. Ut eget placerat purus. Aliquam in sollicitudin tellus. Vestibulum a semper quam, ut hendrerit enim.</p>
<p>Sed et erat consequat, ultrices est quis, sollicitudin lectus. Sed eu semper sapien. Sed suscipit bibendum lacus in semper. Duis mi tellus, gravida a risus id, bibendum tincidunt lectus. Nam consectetur iaculis tempus. Phasellus id consequat felis. Aenean at ipsum molestie, ornare dui in, mollis turpis. Suspendisse sagittis in sapien ac consequat.</p>
</div>
<div id="button">
<input type="button" value="Press Me">
</div>
</div>
<div class="panel" id="right">
<div>
<h2>Ploc</h2>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="button" value="Press Me">
</div>
</div>
</div>
</body>
</html>
When using flexbox, it's important that you specify exactly what you want for each element. You've said you don't want a height on #lorem but you have to specify a height somewhere in order to get the results you want, I specified it with h1 and #wrapper. I believe this is the result you're looking for, take a look at the fiddle.
body {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
h1 {
height: 20%;
}
#lorem {
overflow-y: scroll;
}
#wrapper {
height: 80%;
display: flex;
flex-direction: row;
}
.panel {
padding: 1em;
width: 50%;
display: flex;
flex-direction: column;
}
You can make use of jquery to identify the dynamic height of the panel.
function resizeElement(id){
var win= window.outerHeight;
var title= $("#title").outerHeight();
var extraPadding= 32;
var height= win- (title+extraPadding);
$("#lorem").css("max-height", height+ "px");
}
resizeElement('left');
resizeElement('right');
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
#wrapper {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
}
.panel {
flex-grow: 1;
min-width: 200px;
max-width: 50%;
padding: 1em;
}
#lorem {
max-height: 50%;
overflow-y: auto;
}
/* add colors :) */
body {
background-color: lightgreen;
}
#left {
background-color: red;
}
#right {
background-color: purple;
}
#lorem {
background: yellow;
}
#wrapper {
background-color: darkblue;
}
textarea {
resize: none;
}
h2 {
background-color: green;
}
input[type=button] {
border: 1px solid black;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="fr">
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Test</h1>
<div id="wrapper">
<div class="panel" id="left">
<div id="title">
<h2>Plic</h2>
</div>
<div id="lorem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra ante sit amet velit rutrum eleifend. Integer efficitur convallis dui, in aliquet augue pellentesque ut. Aenean ut lobortis nibh. Nullam et laoreet arcu, sed consectetur lectus. Phasellus ut nunc orci. Fusce mauris neque, ullamcorper at auctor vel, mollis vitae dolor. Mauris eget eleifend dui. Donec ut vestibulum ex. Nullam laoreet mi ut augue posuere pellentesque. Curabitur aliquet rutrum leo iaculis aliquet. Donec convallis ante nunc, nec dictum ex fringilla sit amet.</p>
<p>Nam vel lacus non leo auctor ornare. Integer sit amet lectus in elit tristique eleifend ut a libero. Nam eu mauris in sapien semper venenatis. Integer malesuada fringilla sapien vel blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla pretium sem quis nulla efficitur fermentum. Vestibulum leo nisi, imperdiet ut venenatis sed, consectetur cursus purus. Morbi ac ipsum aliquet, tempor enim bibendum, cursus mi. Phasellus eget semper augue, ut viverra tellus. Nulla lacus nisi, congue imperdiet imperdiet sed, sollicitudin eu ex. Ut non dapibus elit. Donec at mollis ante. In aliquet pulvinar sollicitudin. Duis ac orci lobortis, pellentesque lacus in, feugiat urna. Suspendisse consectetur, risus ac elementum condimentum, velit diam convallis ex, id ornare leo arcu at sapien.</p>
<p>Donec bibendum elit id orci rutrum, at eleifend urna porttitor. Vivamus odio quam, gravida at euismod in, vestibulum et dui. Morbi egestas urna eu erat hendrerit, in porttitor libero pharetra. Integer justo mauris, pulvinar tincidunt turpis a, tristique ullamcorper nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin mollis tincidunt nunc eget tempor. Mauris bibendum pretium quam id pretium.</p>
<p>Phasellus quis nisi vehicula, viverra lacus non, porttitor dui. Suspendisse fringilla ullamcorper finibus. Praesent nec auctor elit. Nulla sit amet risus egestas, lacinia orci feugiat, imperdiet metus. Morbi purus metus, egestas eu massa in, aliquet ullamcorper lectus. Praesent condimentum vehicula condimentum. Morbi nec neque a massa egestas tempus. Donec a cursus dui. Nullam scelerisque ultricies odio a dictum. Proin at ullamcorper justo, non auctor justo. Morbi id nunc id augue pulvinar porttitor. Vestibulum congue magna eu odio condimentum rutrum. Pellentesque non pretium nibh.</p>
<p>Nunc ante leo, dapibus sit amet felis id, mattis auctor nisi. Praesent nec lacus posuere, commodo orci in, varius purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus in euismod nibh, nec congue purus. Aenean euismod laoreet eros, et iaculis mi pharetra vitae. Curabitur eget massa non nibh consectetur pellentesque. In varius pharetra urna, ac tristique sapien lobortis vel.</p>
<p>Quisque eu velit mauris. Nunc sit amet placerat tellus. Praesent in fermentum orci. Sed pulvinar facilisis ornare. Vestibulum et metus eget libero tristique vulputate vitae vitae justo. Duis sit amet malesuada dolor. Etiam semper purus id turpis ultrices, eu facilisis purus varius. Vivamus interdum elit ligula, eget condimentum purus tincidunt ac. Nullam at mattis arcu. Nunc vitae mi consequat, hendrerit urna et, gravida nulla. Ut ac purus blandit, volutpat leo non, facilisis lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi dignissim porttitor sem et auctor. Praesent rutrum dignissim orci sit amet euismod.</p>
<p>Pellentesque hendrerit, arcu a iaculis semper, nisi libero porta turpis, et suscipit velit ipsum eu eros. Integer ex elit, pretium vel sapien eget, pulvinar sagittis tellus. Etiam non finibus ante, vitae viverra sem. Nulla in purus in lectus varius pulvinar quis non turpis. Suspendisse sit amet arcu orci. Aliquam erat volutpat. Cras tincidunt enim vitae aliquam commodo. Curabitur non justo viverra, porttitor lorem sed, viverra diam.</p>
<p>Etiam et lobortis quam. Etiam accumsan pharetra lorem, nec sagittis leo vestibulum nec. Aenean pulvinar nisl ac sapien ultricies, eget lacinia neque aliquet. Fusce egestas libero id nisl rutrum, eget egestas turpis interdum. Etiam consectetur convallis ex. Pellentesque mollis tortor vel dapibus tincidunt. Phasellus varius, nibh non consequat rhoncus, nisi est mollis quam, sed lacinia risus nisl sit amet arcu. Donec id tellus eu justo rutrum dictum. Integer tristique risus ut odio rutrum, quis dignissim est varius. Cras a tortor semper, accumsan urna sed, mattis dolor. Ut eget placerat purus. Aliquam in sollicitudin tellus. Vestibulum a semper quam, ut hendrerit enim.</p>
<p>Sed et erat consequat, ultrices est quis, sollicitudin lectus. Sed eu semper sapien. Sed suscipit bibendum lacus in semper. Duis mi tellus, gravida a risus id, bibendum tincidunt lectus. Nam consectetur iaculis tempus. Phasellus id consequat felis. Aenean at ipsum molestie, ornare dui in, mollis turpis. Suspendisse sagittis in sapien ac consequat.</p>
</div>
<div id="footer">
<input type="button" value="Press Me 1">
</div>
</div>
<div class="panel" id="right">
<div>
<h2>Ploc</h2>
</div>
<div>
<textarea></textarea>
</div>
<div id="footer">
<input type="button" value="Press Me 2">
</div>
</div>
</div>
</body>
</html>
I'm trying to create a simple modal (popup) window, with the fewer lines of code posible... as basic as possible.
The modal's maximum width is 650px and the height should fit the content. If the content overflows, then the scrollbar takes over.
The following code works perfectly on Chrome. But on Firefox and IE Edge, the modal NEVER fits the content window... it is always 100% height. Why?
HTML
<a href="#" data-modal>open modal here</a>
<div class="modal">
<div class="modal-close">CLOSE</div>
<div class="modal-content">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis cursus pulvinar. Sed tincidunt felis lorem, et semper mi venenatis at. Vivamus eu tincidunt quam. Donec nec interdum neque. Vivamus in porta diam, quis ultrices orci. Morbi vitae
consectetur lectus. Nam eu commodo augue, vitae porttitor turpis. Donec vitae suscipit elit. Maecenas euismod leo eros, sed luctus nisi vestibulum ac. Curabitur dui eros, ornare eu purus ut, viverra auctor neque. Etiam neque enim, condimentum
et aliquam eget, sagittis at ligula. In risus justo, elementum ac tellus id, egestas consequat odio. Maecenas tortor ipsum, porta ornare sapien eu, lobortis pellentesque urna. Sed vel dictum massa, iaculis bibendum orci. Vestibulum at libero dui.
Suspendisse nec nisi quis dui ornare sagittis. Fusce nec congue neque. Proin ullamcorper neque vel est mattis, id ullamcorper metus elementum. Proin vitae odio tincidunt, semper ipsum in, aliquet ex. Aliquam sit amet auctor leo. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla iaculis mi ut sem ultricies commodo. Sed efficitur molestie luctus. Sed lacinia leo orci, mollis dignissim sapien lacinia quis. In ac nulla in diam mattis scelerisque.
Integer eget ipsum turpis. In quis egestas quam, quis ultricies quam. Etiam volutpat posuere massa sed vehicula. Vestibulum condimentum arcu libero, sed commodo lacus facilisis id. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Maecenas vulputate accumsan nulla. Aliquam leo leo, facilisis sed diam in, cursus suscipit nibh. Donec gravida tellus id iaculis facilisis. Aliquam ut ultricies urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut viverra, orci
ac consectetur sagittis, arcu nibh faucibus odio, et iaculis mauris nunc vel libero. Praesent venenatis massa molestie massa malesuada fringilla. Maecenas pharetra dapibus neque, id tincidunt risus commodo luctus. Nulla interdum euismod sapien,
non iaculis tortor rutrum efficitur. Duis mi est, accumsan eu ex eleifend, vulputate vehicula ex. In lacinia felis id aliquam semper. Fusce interdum vestibulum dignissim. Nullam condimentum felis dui, a ultrices tortor fringilla at. Aliquam auctor
magna sit amet aliquam porttitor. Vivamus malesuada aliquam augue a accumsan. Aenean vulputate felis felis, sed interdum nisl aliquam ut. Suspendisse vitae felis interdum, sagittis nisi ut, luctus diam. Integer tempor erat ac lectus tempus convallis.
Curabitur at sollicitudin neque. Vivamus molestie cursus nulla malesuada dictum. Sed ornare ligula eu diam hendrerit consectetur ut eget metus.</p>
</div>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
.modal {
display: none;
z-index: 700;
position: fixed;
/* center */
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/* end- center */
width: calc(100vw - 40px);
max-width: 650px;
height: fit-content;
max-height: calc(100vh - 40px);
overflow: auto;
padding: 40px 20px;
border: 10px solid #000;
background-color: #fff;
}
.modal-close {
position: absolute;
z-index: 700;
top: 10px;
right: 10px;
}
https://jsfiddle.net/97khd8ad/18/
The fit-content keyword is experimental and is not currently supported outside of Chrome (https://developer.mozilla.org/en-US/docs/Web/CSS/height) but you can achieve the same effect by positioning the element at 50% from top and then offsetting it by half its height:
* {
box-sizing: border-box;
}
.modal {
z-index: 700;
position: fixed;
/* center */
left: 0;
right: 0;
top: 50%; /* position half way from top */
transform: translateY(-50%); /* offset by half the element's height */
margin: auto;
/* end- center */
width: calc(100vw - 40px);
max-width: 650px;
max-height: calc(100vh - 40px);
overflow: auto;
padding: 40px 20px;
border: 10px solid #000;
background-color: #fff;
}
.modal-close {
position: absolute;
z-index: 700;
top: 10px;
right: 10px;
}
<div class="modal">
<div class="modal-close">CLOSE</div>
<div class="modal-content">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis cursus pulvinar. Sed tincidunt felis lorem, et semper mi venenatis at.
<!-- UNCOMMENT TO SEE THE OVERFLOW SCROLL WORKING
Vivamus eu tincidunt quam. Donec nec interdum neque. Vivamus in porta diam, quis ultrices orci. Morbi vitae
consectetur lectus. Nam eu commodo augue, vitae porttitor turpis. Donec vitae suscipit elit. Maecenas euismod leo eros, sed luctus nisi vestibulum ac. Curabitur dui eros, ornare eu purus ut, viverra auctor neque. Etiam neque enim, condimentum
et aliquam eget, sagittis at ligula. In risus justo, elementum ac tellus id, egestas consequat odio. Maecenas tortor ipsum, porta ornare sapien eu, lobortis pellentesque urna. Sed vel dictum massa, iaculis bibendum orci. Vestibulum at libero dui.
Suspendisse nec nisi quis dui ornare sagittis. Fusce nec congue neque. Proin ullamcorper neque vel est mattis, id ullamcorper metus elementum. Proin vitae odio tincidunt, semper ipsum in, aliquet ex. Aliquam sit amet auctor leo. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla iaculis mi ut sem ultricies commodo. Sed efficitur molestie luctus. Sed lacinia leo orci, mollis dignissim sapien lacinia quis. In ac nulla in diam mattis scelerisque.
Integer eget ipsum turpis. In quis egestas quam, quis ultricies quam. Etiam volutpat posuere massa sed vehicula. Vestibulum condimentum arcu libero, sed commodo lacus facilisis id. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Maecenas vulputate accumsan nulla. Aliquam leo leo, facilisis sed diam in, cursus suscipit nibh. Donec gravida tellus id iaculis facilisis. Aliquam ut ultricies urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut viverra, orci
ac consectetur sagittis, arcu nibh faucibus odio, et iaculis mauris nunc vel libero. Praesent venenatis massa molestie massa malesuada fringilla. Maecenas pharetra dapibus neque, id tincidunt risus commodo luctus. Nulla interdum euismod sapien,
non iaculis tortor rutrum efficitur. Duis mi est, accumsan eu ex eleifend, vulputate vehicula ex. In lacinia felis id aliquam semper. Fusce interdum vestibulum dignissim. Nullam condimentum felis dui, a ultrices tortor fringilla at. Aliquam auctor
magna sit amet aliquam porttitor. Vivamus malesuada aliquam augue a accumsan. Aenean vulputate felis felis, sed interdum nisl aliquam ut. Suspendisse vitae felis interdum, sagittis nisi ut, luctus diam. Integer tempor erat ac lectus tempus convallis.
Curabitur at sollicitudin neque. Vivamus molestie cursus nulla malesuada dictum. Sed ornare ligula eu diam hendrerit consectetur ut eget metus.--></p>
</div>
</div>
</div>