I am trying to make the following layout
-----------------------
|Header |
-----------------------
|A| B |
| | |
| | |
| | |
| | |
| | |
| | |
-----------------------
|Footer |
-----------------------
Where the following applies:
The header and footer stays in place with a fixed height, and full viewport width
A has remaining available height, width can be changed dynamically
B takes remaining available height and width. Reduces width when A is made wider and vice versa
B never flows to next line, no matter how wide the contents. (Instead a scrollbar).
I have tried a lot of table-row based positioning, and searched for similar qustions here on stackoverflow, but have not yet found any solution that works 100%.
Leaving the header and footer out of it, here is some CSS I have tried (B flows below A when making the browser window small, and the toolbar is 100% of the entire window - too high):
div#A {
display: inline-block;
height: 100%;
overflow: hidden;
margin: 0 0 0 0;
float: left;
width: 3.5em;
}
div#A.open {
width: auto;
}
div#B {
display: inline-block;
max-width: 700px;
float: left;
overflow:scroll;
white-space: nowrap;
}
Another approach (better, but B still flows below A instead of getting scrollbars):
div#wrapper {
display: table-row;
height: 100%;
width: 100%;
}
div#A {
display: table-cell;
height: 100%;
overflow: hidden;
margin: 0 0 0 0;
float: left;
width: 3.5em;
}
div#A.open {
width: auto;
}
div#content {
display: table-cell;
max-width: 600px;
float: left;
overflow:scroll;
}
Html
<header></header>
<main>
<div id="a"></div>
<div id="b"></div>
</main>
<footer></footer>
The header and footer stays in place with a fixed height, and full viewport width
//css
header, footer {
width: 5%; //fixed width that stay in place with a fixed height
}
A has remaining available height, width can be changed dynamically
//css
main {
width: 100%;
}
main #a {
float: left;
height: 100%;
width: 30%; //can be any width
}
B takes remaining available height and width. Reduces width when A is made wider and vice versa
/*#b will automatically take the rest of main!
because it has overflow:hidden */
#b {
overflow: hidden;
width: auto;
height: 100%;
}
B never flows to next line, no matter how wide the contents. (Instead a scrollbar).
Here i'm not sure what you want so the fiddle is lacking this part.
Do you want an ----> or
-|
-|
-|
-|
▼
Scrollbar? 1.
Replace overflow:hidden;
with overflow-x: scroll;
or overflow-y: scroll;
or overflow: auto for both ways
Fiddle for example :)
Try something like this:
<html>
<head>
<style>
#header
{
height:10%;
width:100%;
background-color:yellow;
}
#footer
{
height:10%,
width:100%;
background-color:red;
clear:left
}
#A
{
display:inline-block;
float:left;
height: 80%;
width: 5em;
background-color:green;
}
#B
{
display:inline-block
float:left;
height:80%;
background-color:blue;
overflow: scroll;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="A">A</div>
<div id="B">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec imperdiet ipsum, in dapibus nulla. Aenean iaculis lorem urna, at mattis metus ultricies ac. Aliquam sodales rhoncus metus, vitae fermentum ligula ornare nec. Nunc velit justo, ornare nec nulla eget, laoreet lobortis dui. Cras blandit odio dolor, a maximus nisl maximus a. Praesent nunc diam, euismod a iaculis vitae, mattis sed quam. Integer et luctus magna. Vivamus elementum arcu in leo suscipit, at aliquet arcu eleifend. Nunc tincidunt purus non orci feugiat tempor. In dapibus velit sapien, sed egestas erat lobortis sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed non efficitur erat. Nullam iaculis id tellus vel rutrum. Donec porta ultricies vestibulum. Phasellus congue enim ante, vitae posuere augue ornare vitae.
<br />
<br />Pellentesque dolor mi, ullamcorper non odio et, tincidunt rhoncus dolor. Maecenas cursus est nec sem varius fringilla. Praesent tempor sit amet est eget convallis. Nunc tempor tempus mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus sagittis sodales posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas ac lacinia felis. Fusce ultrices semper erat id imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin quis blandit orci. Vivamus pretium viverra ligula ac posuere. Vestibulum commodo, ante sed tempus lobortis, urna est porttitor dui, at dignissim massa nunc sed urna.
<br />
<br />Donec dictum lacus nec libero accumsan, auctor egestas metus sollicitudin. Nam pellentesque, ante quis lacinia tristique, sem dolor imperdiet mi, ornare consectetur tortor dui in mauris. Nulla facilisi. In sed dolor augue. Nulla ullamcorper felis vitae leo posuere posuere sit amet sed dui. Duis iaculis lorem porttitor risus iaculis congue. Mauris malesuada iaculis sapien vitae pulvinar. Nunc ut ipsum nibh. Aliquam vehicula quam eget malesuada lacinia. Curabitur eget magna ut erat pellentesque mattis sit amet eget ante. Cras et auctor felis. Nam justo diam, iaculis vel ligula sed, placerat lobortis lectus. Nulla dui enim, interdum eu posuere vel, sollicitudin non mauris.
<br />
<br />Morbi sit amet ultricies erat, vitae pharetra orci. Maecenas id lacus vestibulum, pellentesque ex eget, sollicitudin velit. Maecenas ultricies facilisis efficitur. Phasellus elementum tortor at ex convallis, in imperdiet nisi vulputate. Cras arcu tortor, faucibus et mattis vitae, aliquet vel ante. Nulla nec ipsum quis ex blandit elementum. In aliquam, elit ac aliquet faucibus, orci turpis tincidunt tortor, id suscipit erat urna at elit. Donec magna purus, vestibulum id erat vitae, iaculis sodales sapien.
<br />
<br />Quisque malesuada nunc vitae augue volutpat laoreet. Nulla egestas, nisi et fermentum congue, tortor neque finibus tellus, vel vulputate tellus tellus ut sapien. Integer fringilla posuere tellus ac mattis. Integer eget ultricies est. Aenean bibendum sapien vitae leo euismod vehicula. Curabitur venenatis ipsum quis porttitor facilisis. Morbi tincidunt condimentum urna, vitae pretium lorem pretium finibus. Vivamus volutpat erat nec tortor convallis mollis. Donec gravida orci ut elementum fringilla. Suspendisse fermentum, turpis id dapibus finibus, leo nulla suscipit sem, non aliquet ipsum est sit amet lacus. In hac habitasse platea dictumst. Aliquam pulvinar, erat in maximus maximus, eros velit blandit orci, id bibendum velit tortor non mi. Nulla risus tortor, semper sit amet nisi id, vestibulum efficitur augue. Ut quis ornare arcu, eu semper lectus.
<br />
<br />Nulla ut rhoncus orci. Duis et nulla commodo, mattis ligula imperdiet, aliquam arcu. Curabitur justo nulla, tristique sagittis convallis sed, convallis at purus. Donec urna nisi, ultrices a condimentum sed, ornare sit amet magna. Sed vel lacus eget lectus elementum efficitur nec vel velit. Sed sodales odio nec neque ornare, ac pulvinar eros tincidunt. Praesent interdum ac ligula non dictum. Vestibulum cursus hendrerit sollicitudin. Maecenas ultricies sapien viverra est aliquam, in pellentesque enim porta. Ut suscipit lorem at molestie malesuada. Aenean fermentum porta dolor, sed sagittis nisl tristique non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut feugiat urna quam, a lacinia arcu placerat cursus. Integer lectus purus, eleifend et aliquam sed, consequat ac quam. Etiam et nisi enim. Quisque egestas pharetra erat et vehicula.
<br />
<br />Aenean convallis, purus at convallis vestibulum, nulla est pulvinar sem, ut varius dui elit et ligula. Donec porttitor rhoncus libero dignissim lacinia. Aenean eu nulla consectetur, mattis est ac, bibendum ante. Suspendisse vehicula nibh et mauris ornare, at finibus nulla aliquet. Aenean in scelerisque neque. Nulla quam lectus, consequat eu purus id, aliquam ultrices dui. Praesent et dolor pulvinar, imperdiet eros nec, lobortis justo. Mauris feugiat nulla a rhoncus aliquet. Cras ut imperdiet ante. Ut quis metus scelerisque, volutpat neque quis, pulvinar tortor. Nam placerat rhoncus lorem, non pharetra lectus auctor eget. Suspendisse in quam vitae augue blandit ultricies. Vivamus vulputate quam est, a pharetra erat porta eu. Quisque metus magna, porta eu euismod sed, porta sed erat. Aenean ornare, ante a scelerisque condimentum, ante velit aliquet arcu, vitae dictum nulla mi at massa. Quisque quis vestibulum velit, et placerat risus.
<br />
<br />Morbi cursus nibh eu ipsum mollis, non molestie leo auctor. Duis bibendum, neque eu tincidunt dignissim, nulla sem tincidunt metus, a lacinia risus libero eu nisl. Cras lobortis volutpat felis, in sollicitudin turpis tristique vel. Aliquam erat volutpat. Cras velit quam, tristique sit amet felis quis, consequat finibus nunc. Vivamus tempor nunc nec nibh mollis vulputate. Mauris pulvinar nibh ac eros fermentum luctus. Ut at orci ut est luctus pellentesque a quis nisl. Nunc posuere tellus ex, in porta felis vulputate vel. Donec rutrum faucibus risus. Donec sapien dui, porta quis volutpat eu, tincidunt eu quam. Sed eleifend pellentesque magna, vel tempus enim dictum tincidunt. Vestibulum nisl lorem, commodo vel ipsum quis, semper sodales leo.
<br />
<br />Vestibulum leo urna, sollicitudin eget ultricies at, scelerisque a lectus. Donec tellus sem, elementum et elit eget, lacinia posuere elit. In lacus ex, vehicula sit amet lacus et, dapibus molestie mauris. Donec ac justo metus. Sed eget faucibus dolor. Mauris sollicitudin vehicula augue, nec molestie est fringilla sed. Vivamus non neque arcu. Proin rhoncus justo in ex vehicula mollis. Nam at commodo neque. Sed consequat lacinia augue, ac iaculis enim cursus vitae. Aliquam varius augue ac condimentum vehicula. Vestibulum quis eros vitae elit maximus varius non eu ipsum. Nullam mollis urna nulla, et sagittis dolor mollis sit amet. Ut ut purus ac augue laoreet facilisis ac non lectus.
<br />
<br />Nulla tincidunt non diam nec posuere. Phasellus sodales bibendum magna iaculis ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies magna ac metus mollis tincidunt. Aenean dignissim egestas odio, id vestibulum ex ultricies in. Aliquam faucibus arcu eu enim maximus, vel hendrerit ipsum aliquet. Vestibulum posuere urna a tortor dapibus malesuada. Curabitur feugiat magna id dolor fringilla, quis suscipit lacus pellentesque. Pellentesque tristique sem urna, ut luctus erat mollis ut. Vivamus eget ultrices est, nec facilisis nisl. Integer cursus auctor lorem ut imperdiet. Vestibulum finibus odio sit amet sapien pulvinar egestas. Nunc tincidunt mi sed ex faucibus dictum. In sed tempor libero. Donec tortor nulla, malesuada vel urna laoreet, commodo interdum velit.</div>
<div id="footer">Footer</div>
</body>
</html>
overflow: scroll gives you the scroll bar and white-space: nowrap takes away the word wrapping.
Related
I'm building a react app with flexbox and I'm struggling getting all the pieces as I want them.
I want a fixed header at the top with a body that has its content centered and that can be scrolled (the scrollbar has to start in the body, not the header). This body can't go to the edges of the page so I'm using max-width to prevent this. The problem is that when I use the max-width, the scrollbar gets placed next to the body and it looks awful. I want it to stay at the far right of the page. Finally I want some space between the end of the body and the page (a bit of padding, if you will) so the content doesn't look like it's getting cut with the end of the site.
I've done this mockup in Photoshop
I mostly got the code working, minus the max-width and bottom padding. Here's what I got:
html, body {
margin: 0;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
}
header {
background: white;
height: 50px;
}
main {
flex: 1;
overflow: auto;
}
<div id="container">
<header>top</header>
<main>
...
</main>
</div>
I understand that this question has been asked in multiple ways a lot of times, but I've been looking for a while and I can't find the right one that fixes every thing I need.
Thank you for the help.
What you can do is add another element within the <main> tag. I use a <div> tag in my example, but it could be whatever you want. Keep the
overflow: auto;
on the <main> tag, so when the inner div overflows, you can scroll the <main> tag to move the <div>
Here's an example where I added some background color to show separation and some Lorem Ipsum text:
html, body {
margin: 0;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
}
header {
background: white;
height: 50px;
text-align: center;
}
#stuff {
border-radius: 5px;
background: pink;
padding: 5px;
margin: 20px;
flex: 1;
}
main {
overflow: auto;
}
<div id="container">
<header>top</header>
<main>
<div id="stuff">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec magna porta, commodo magna ut, porta erat. Phasellus tristique leo vitae ante efficitur, sed fermentum mi auctor. In condimentum mi a urna cursus vestibulum. Nunc posuere metus turpis, faucibus viverra purus aliquam nec. Curabitur ultrices, sem nec aliquet congue, ligula justo sagittis arcu, quis blandit urna sem nec sem. Cras accumsan, turpis ac placerat porta, libero ex semper tellus, non mattis dui ligula id odio. Cras lobortis ex in ex consequat, eu viverra nibh luctus. Nulla facilisi. Nulla odio arcu, suscipit eu dui eget, cursus sodales ipsum. Nulla vestibulum nisl eget ante pellentesque, vel porttitor magna dapibus. Suspendisse at ligula nunc. Phasellus scelerisque urna sit amet scelerisque pharetra. Quisque risus metus, tincidunt vitae ultricies in, convallis tempus justo. Sed finibus laoreet dolor sit amet tincidunt. Sed efficitur volutpat aliquet.
Suspendisse condimentum euismod quam id tempor. Vestibulum rhoncus metus eu tortor rhoncus eleifend. Nam sagittis ex ex, eget varius ante semper a. Aenean vulputate eget ligula vel sodales. Vivamus vel nisi dignissim, eleifend sem non, bibendum dolor. Ut pulvinar malesuada nisi sit amet suscipit. Sed ultrices maximus tellus, nec congue felis.
Duis urna orci, consequat et lacinia lobortis, varius sed sem. Ut auctor congue augue quis interdum. Morbi erat justo, venenatis ac imperdiet sit amet, cursus eget tellus. Quisque accumsan nibh a dui vulputate tincidunt. Aenean accumsan diam lorem, ac rutrum magna ullamcorper et. Proin volutpat dolor tristique scelerisque tempus. Donec eu neque non purus pulvinar bibendum sed vitae justo. Suspendisse luctus dolor neque, eu convallis tortor condimentum ac. Aliquam sollicitudin ex ut sollicitudin sagittis. Aliquam imperdiet, diam vel hendrerit iaculis, neque ex accumsan neque, in hendrerit risus massa convallis ante. Cras urna velit, cursus sed dignissim vitae, porttitor faucibus est. Vestibulum ut dolor aliquam, malesuada velit ut, vestibulum nibh. Maecenas at convallis ex, a aliquam dui. Mauris at eros sit amet leo gravida pulvinar.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc faucibus laoreet ipsum, facilisis facilisis quam ultrices et. Vivamus interdum ut tortor sit amet sollicitudin. Cras rhoncus blandit lectus sed maximus. Integer ac dui nec metus dignissim lobortis vel vel erat. Cras in dignissim arcu. Nunc vulputate mi turpis, at dignissim turpis ullamcorper vitae. Cras neque justo, sagittis ut tempus vitae, pellentesque a mi.
Duis vehicula eros erat, vel tincidunt ante aliquet eget. Ut malesuada, est a sollicitudin tincidunt, magna ante varius est, vitae pulvinar arcu neque sit amet magna. Sed sit amet erat fermentum, bibendum ex sed, dictum lorem. Ut aliquam nibh vitae tellus convallis, sed condimentum augue suscipit. Nunc ac tellus sem. Maecenas vitae finibus lorem. Ut et fringilla lacus. Morbi neque lacus, rhoncus non odio et, sodales ultrices erat. Pellentesque molestie et felis sit amet pharetra. Curabitur id lacinia dolor. Curabitur non dignissim lorem, eleifend posuere lorem. Aliquam orci felis, vulputate vel felis molestie, vestibulum tempor tellus. Quisque mollis mauris blandit posuere tincidunt. Suspendisse condimentum est at enim interdum condimentum.
Aliquam a risus cursus, pretium dui nec, consectetur elit. Sed sollicitudin consectetur magna id accumsan. Quisque interdum tristique diam, at porta orci condimentum ut. Curabitur in metus purus. Donec diam orci, volutpat eu rhoncus in, accumsan sed neque. Nam egestas vestibulum vestibulum. Mauris fringilla, enim in finibus hendrerit, metus urna finibus lacus, in dictum eros eros vel orci. Aliquam blandit elit sem, vel fringilla libero commodo eu. Cras euismod a mauris non malesuada. Aliquam luctus malesuada nisl sed efficitur. Mauris suscipit convallis venenatis. Ut varius velit vitae scelerisque fermentum. Donec luctus convallis hendrerit. Sed vestibulum, diam at euismod lacinia, dolor eros commodo lacus, vitae pellentesque dui metus vel leo.
In hac habitasse platea dictumst. Nam massa lectus, fermentum non dolor eu, auctor luctus ex. Duis posuere sit amet lorem ut commodo. Pellentesque ultrices in tortor vel dignissim. Quisque lorem nibh, ullamcorper in sem nec, rhoncus posuere tortor. Aenean vitae feugiat nisi. Proin elementum sollicitudin iaculis. Morbi nec erat volutpat, posuere augue quis, porttitor erat. Aliquam dignissim blandit laoreet. Donec consectetur a risus et varius. Suspendisse quis vulputate tellus.
Nunc eget erat id lacus dictum viverra. Vivamus vel vehicula ipsum. Fusce convallis leo diam, sed consectetur nulla sagittis rutrum. Curabitur nec ligula convallis ex rutrum fermentum. Donec auctor, erat quis euismod maximus, sem massa fermentum tortor, non scelerisque nibh nisi at arcu. Vivamus sodales fermentum nisi quis tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst.
Nunc et lacus ac augue tincidunt pellentesque. Sed at odio at sem lobortis vestibulum. Sed cursus augue et sapien eleifend tempor. Etiam suscipit mi non est vehicula tincidunt a vitae libero. In blandit fringilla lectus non dignissim. In interdum, nisl non suscipit sagittis, sem erat sagittis ex, quis egestas lorem tellus nec metus. Suspendisse suscipit ultrices nunc eget vulputate. Donec mollis condimentum massa. Suspendisse potenti. Fusce eget urna ut dui fringilla faucibus et id justo.
Suspendisse posuere justo eget bibendum venenatis. Pellentesque sollicitudin nisi augue. Nunc sed justo ac mi ultrices elementum sit amet non lorem. Maecenas accumsan vehicula urna, sit amet posuere dolor malesuada at. Morbi vitae mi sed est suscipit euismod. Aliquam erat volutpat. Nulla elit purus, elementum at odio eget, tempor efficitur leo. Nunc dapibus erat nec faucibus rhoncus. Curabitur accumsan nibh sit amet sagittis placerat. Donec mollis metus eu metus eleifend ornare.
</div>
</main>
</div>
I was wondering if there is a way to make a div with position fixed immobile, so if the user scrolls the div will be immobile to the initial position. I need it because I have a toast spawning inside another div, and I need this toast in foreground otherwise it will spawn inside the div (with scrollbar and partially visible).
That's an example image to explain better:
With position absolute:
With position fixed (the desired effect):
That's my component code (it's a child component):
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position:absolute; z-index:999; left:80%; width:300px;opacity:1;cursor:unset !important" *ngIf="!isCollapsed && onlyOnePopup == dataItem.Id">
<div class="toast-header" style="background-color: #00549F;">
<strong class="mr-auto" style="color:#fff;"></strong>
<button (click)="onlyOnePopup = null && isCollapsed = true" type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true" class="close" style="color:white;">×</span>
</button>
</div>
<div class="toast-body" style="font-family:Font; white-space:pre-line; color:black; cursor:unset">
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</div>
</div>
Use position: fixed, and then set the exact position that you want. Here's a snippet showing you an example of how to do it.
body {
height: 2000px;
background-color: aqua;
}
.fixed-div {
width: 200px;
heigth: 200px;
background-color: white;
padding: 50px;
position: fixed;
top: 0px;
right: 0px;
margin-right: 20px;
margin-top: 20px;
}
<html>
<head></head>
<body>
<div class="fixed-div">
Fixed Div
</div>
</body>
</html>
Instead of left: 80% try bottom: 0; right: 0 along with position: fixed; and then set right-margin accordingly.
the main thing is to set the height of html as 100vh (veriable height) and width to 100vw(veriable width). this will set your page to 100% of the space available in the browser window regardless of size. then set the toast div to fixed with the right and bottom set where you like (0 for bottom and right puts it in the lower right corner completly)
you cannot set a fixed point with no reference to what it should be fixed to. so by setting the html page size explicitly, the fixed position can be set based off that.
html {
height: 100vh;
width: 100vw;
}
.toast {
position: fixed;
right: 1rem;
bottom: 1rem;
background-color: rgb(0, 255, 255, 0.8);
padding: 1rem;
height: 2.5rem;
width: 15rem;
}
.display-content {
max-height: 100vh;
overflow-y scroll;
}
<div class="display-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur efficitur felis neque, et viverra tellus fermentum eget. Quisque nunc tellus, pulvinar id felis sed, sodales iaculis magna. Morbi sodales pellentesque sapien, nec dignissim augue. Integer odio enim, posuere et convallis et, ultricies in odio. Curabitur felis libero, iaculis et elit in, feugiat tempor augue. Duis finibus mattis leo eu facilisis. In faucibus tincidunt dui. Nullam pulvinar est vel mauris rhoncus euismod. Praesent vel pharetra neque, vitae sollicitudin enim. Nunc placerat sagittis malesuada. Suspendisse potenti. In tempus risus eget dapibus semper. Vestibulum vitae elit congue, tempor quam at, ultricies mauris.
</p>
<p>
Suspendisse ut ullamcorper libero. Quisque consectetur gravida nisi, non faucibus turpis iaculis nec. Phasellus vulputate, tellus sed dapibus dapibus, turpis mauris facilisis eros, eu sagittis quam ante eget felis. In nec nisl at lorem tincidunt vulputate vel eu est. Phasellus ipsum velit, placerat quis pulvinar non, auctor at ex. Nam pharetra dolor a semper feugiat. In sed commodo mauris. Aenean in turpis sed orci molestie efficitur quis id orci. Duis laoreet leo a nulla interdum hendrerit. Suspendisse molestie tristique semper. Vestibulum convallis purus et orci mollis sodales. Praesent ut lectus laoreet, suscipit velit nec, pharetra neque.
</p>
<p>
Morbi placerat metus a eros viverra, luctus ultricies eros fringilla. Nunc mollis lorem at lacus lobortis, vitae blandit ex condimentum. Maecenas et ultricies tortor, sit amet ornare risus. Nunc id nisl et ligula commodo vehicula in et risus. Pellentesque molestie et risus quis lacinia. Quisque quis risus laoreet, venenatis enim nec, hendrerit nisl. Nulla facilisi. Pellentesque pretium turpis vestibulum urna auctor sodales. Vivamus mattis sem eu tellus scelerisque tempus. Sed venenatis felis in mollis suscipit. Sed quis felis ac erat facilisis pellentesque eget nec purus. Phasellus libero odio, semper sed auctor at, ultrices non nibh. Proin consectetur metus sed ultrices aliquam. Pellentesque placerat, nibh vitae semper sodales, mauris elit vestibulum mauris, sit amet condimentum odio est tincidunt neque. Quisque metus lacus, ullamcorper non accumsan nec, placerat et lectus.
</p>
<p>
Vestibulum nec sem ex. Pellentesque volutpat quam eget justo rhoncus congue. Etiam in lorem pellentesque, pulvinar turpis non, dignissim nibh. Etiam eget urna congue, sodales nulla eget, fringilla lorem. Aliquam suscipit dapibus augue eget mollis. Phasellus feugiat sagittis massa, in posuere odio ultrices eu. Aliquam erat volutpat. Morbi eleifend augue vel sagittis pellentesque. Cras auctor interdum purus non fermentum. Aliquam erat volutpat. Integer elit mi, molestie vitae pulvinar vel, elementum et dui. Pellentesque leo risus, elementum eu accumsan nec, pharetra non massa. Phasellus pulvinar mollis aliquam.
</p>
<p>
Sed elementum facilisis erat, in molestie tortor varius ut. Vestibulum dapibus dolor quis mi malesuada, id venenatis ante vulputate. Aliquam fermentum viverra ante, sit amet rhoncus turpis laoreet vel. Vestibulum a vestibulum dolor. Mauris ut efficitur nunc. Donec sit amet consectetur orci. Ut at erat non sem mattis dictum. Aliquam vestibulum nulla nunc, nec varius est vestibulum sit amet.
</p>
<p>
Aenean imperdiet eros non eleifend molestie. Nullam venenatis nibh non pellentesque imperdiet. Quisque volutpat eros non odio convallis ultricies. Etiam convallis facilisis libero, a commodo tellus condimentum quis. Curabitur congue erat ut tincidunt eleifend. Donec tincidunt ullamcorper consequat. Etiam iaculis elementum fermentum.
</p>
<p>
Fusce vehicula libero nisl. Aliquam tempor sem at lacinia facilisis. Donec vestibulum sit amet augue non rhoncus. Nulla sagittis leo elit, a interdum metus dapibus in. Nulla in mattis nunc. Sed sit amet est in tellus vehicula molestie vel tempor nisl. Donec dignissim est lectus, ac pharetra neque bibendum nec.
</p>
<p>
Sed porta dui eget turpis scelerisque rutrum. Aliquam eu diam nec nunc ultrices hendrerit. Quisque convallis metus vitae tellus fermentum finibus. Cras id ullamcorper nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed gravida lorem non blandit porta. Aliquam ac dui laoreet, interdum dui vel, pellentesque arcu. Aenean gravida nunc sit amet arcu rhoncus mollis. Nullam sit amet risus at urna dictum pharetra. Nunc maximus condimentum dui, sed hendrerit metus pretium et. Curabitur eu sollicitudin lorem, et luctus magna. Donec tincidunt id purus sed placerat. Proin vel tristique velit. Donec ornare nisi at laoreet luctus. Integer id metus molestie, fermentum massa non, porta diam.
</p>
<p>
Quisque at volutpat augue. Maecenas porttitor ornare scelerisque. Ut pretium sapien a placerat dapibus. Fusce vel urna eu sem blandit euismod. In imperdiet eros sit amet quam tempor aliquam. Morbi volutpat tincidunt massa, non convallis dui pharetra nec. Ut velit odio, pellentesque mollis sodales et, eleifend ac libero. Curabitur orci ante, varius ac congue id, rutrum id leo. Pellentesque massa massa, lacinia pretium sapien ut, dignissim congue ipsum. Aliquam commodo leo in nisl pharetra, sed viverra est auctor.
</p>
</div>
<div class="toast">This is a toast</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 have a simple page in which I want a sticky header and a sticky sidebar. Here is a fiddle and here is the same code:
#top {
position: sticky;
top: 0;
border: 1px solid red;
width: 100%;
}
.container {
display: grid;
grid-gap: 50px;
grid-template-columns: max-content 1fr;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
max-width: 900px;
}
.sidebar {
border: 1px solid blue;
position: sticky;
top: 0;
}
.content {
border: 1px solid green;
}
<div id="top">
sticky header
</div>
<div class="container">
<div class="sidebar">
sticky sidebar
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at ipsum mi. Integer laoreet a nisl quis imperdiet. Etiam sed ligula rutrum, viverra arcu vitae, mattis lectus. Aliquam rutrum eros id quam sodales volutpat. Suspendisse sed neque ut mauris
luctus hendrerit. Suspendisse auctor aliquam rutrum. Sed sodales placerat est. Donec vel elit vitae ipsum ultrices tristique. Nulla auctor, dolor at porta laoreet, ex nisi auctor orci, in posuere enim arcu at tortor. Etiam sed ante mattis sem pharetra
condimentum. Nullam a eros nec metus feugiat tincidunt vel sed lectus. Nunc accumsan nisi sit amet auctor rhoncus. Vestibulum diam risus, sodales non diam a, tristique ullamcorper erat.
</p>
<p>
Aliquam posuere libero at felis maximus, quis pulvinar diam dictum. Integer id nisi non turpis bibendum suscipit. Duis pellentesque leo vitae elit mollis malesuada. Duis eget magna et odio mattis bibendum. Ut et rutrum diam, quis luctus mi. Duis in molestie
elit. Nullam consequat turpis velit, sit amet venenatis tellus bibendum non. Etiam iaculis luctus sem, et aliquam nisl commodo et. In consectetur ac nibh ac porttitor. Nulla euismod facilisis faucibus. Phasellus sed risus convallis, elementum est
nec, euismod lorem. Nulla sodales auctor dapibus. Curabitur euismod neque dolor, at sagittis arcu congue ultrices. Morbi nec finibus tortor.
</p>
<p>
Aliquam vestibulum dictum nisi non sollicitudin. Integer ac magna viverra, cursus lorem quis, interdum ex. Phasellus id neque pulvinar, dignissim augue ut, lobortis leo. Duis sed elit et ipsum auctor convallis. Donec non orci suscipit, eleifend tellus
pretium, vehicula turpis. Mauris et justo et est cursus accumsan et vel elit. In egestas lobortis imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Etiam dictum vel lorem in varius. Etiam accumsan nibh at ex mollis, id porta leo sodales. Suspendisse mauris urna, faucibus in turpis et, porttitor lobortis lectus. Cras facilisis feugiat tortor sed laoreet. Nam
cursus malesuada lorem sed bibendum. Sed dapibus, mi vel elementum vehicula, augue massa pulvinar erat, vitae rutrum eros nisi sed neque.
</p>
<p>
Nulla sodales lectus vitae urna ullamcorper, eu mattis lacus iaculis. Praesent eleifend eu sem nec aliquet. Pellentesque consequat nisl ac odio efficitur, vitae interdum sapien gravida. Proin sed commodo leo. Quisque sem sem, euismod id sapien eget, fermentum
consectetur turpis. Praesent aliquam eros id ipsum vehicula, aliquam pellentesque massa pellentesque. Etiam nec elit arcu. Donec eget ullamcorper nisl, in porta nibh. In non ante id elit tincidunt convallis. Suspendisse sit amet dictum sapien, vel
lobortis mi. Mauris eu pharetra ante. Morbi vestibulum orci at augue pulvinar iaculis. Vestibulum quis dui et odio tristique laoreet eget id augue.
</p>
<p>
Nulla finibus lorem in risus efficitur, at cursus nunc molestie. In pellentesque quis quam et sollicitudin. Mauris at turpis felis. Nulla facilisi. Cras pellentesque malesuada felis, sit amet dapibus lectus efficitur auctor. Mauris dictum eu nisl non
commodo. Quisque at risus eget quam dictum aliquet. Curabitur malesuada magna et efficitur bibendum. Curabitur ultrices luctus lorem. Vivamus sodales elit quis metus mattis, pretium semper mi finibus.
</p>
</div>
</div>
The sticky header works fine.
The sticky sidebar does not work. The sidebar is in a containing element that sets the CSS grid, and is centered with a max-width. I have read that sticky sticks to its nearest scrolling ancestor, so I assume this is not working because the body is scrolling and not the container div, but I'm not sure what to do about this.
If I do something like height: 100px on the container div I end up with a scrollbar on that div rather than the body. I want the scroll on the body.
If I used a fixed position on the sidebar, the grid breaks (the content div now spans 100% of the container) and I would have to know the height of the top sticky bar in order to set the offset on the scrollbar. If the height of the top bar varies this won't work.
What is the solution to this?
You can add align-self: flex-start to override the default stretch behaviour of sidebar( because it is a grid item)
Now you can explicitly set 100vh height to the sidebar - see demo below without grid-gap and / or margin or padding
#top {
position: sticky;
top: 0;
border: 1px solid red;
width: 100%;
}
.container {
display: grid;
/*grid-gap: 50px;*/
grid-template-columns: max-content 1fr;
/* margin-top: 50px;*/
margin-left: auto;
margin-right: auto;
max-width: 900px;
}
.sidebar {
border: 1px solid blue;
position: sticky;
top: 0;
/* ADDED */
align-self: flex-start; /* override the default stretch */
height: 100vh; /* set a fixed height */
}
.content {
border: 1px solid green;
}
<div id="top">
sticky header
</div>
<div class="container">
<div class="sidebar">
sticky sidebar
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at ipsum mi. Integer laoreet a nisl quis imperdiet. Etiam sed ligula rutrum, viverra arcu vitae, mattis lectus. Aliquam rutrum eros id quam sodales volutpat. Suspendisse sed neque ut mauris
luctus hendrerit. Suspendisse auctor aliquam rutrum. Sed sodales placerat est. Donec vel elit vitae ipsum ultrices tristique. Nulla auctor, dolor at porta laoreet, ex nisi auctor orci, in posuere enim arcu at tortor. Etiam sed ante mattis sem pharetra
condimentum. Nullam a eros nec metus feugiat tincidunt vel sed lectus. Nunc accumsan nisi sit amet auctor rhoncus. Vestibulum diam risus, sodales non diam a, tristique ullamcorper erat.
</p>
<p>
Aliquam posuere libero at felis maximus, quis pulvinar diam dictum. Integer id nisi non turpis bibendum suscipit. Duis pellentesque leo vitae elit mollis malesuada. Duis eget magna et odio mattis bibendum. Ut et rutrum diam, quis luctus mi. Duis in molestie
elit. Nullam consequat turpis velit, sit amet venenatis tellus bibendum non. Etiam iaculis luctus sem, et aliquam nisl commodo et. In consectetur ac nibh ac porttitor. Nulla euismod facilisis faucibus. Phasellus sed risus convallis, elementum est
nec, euismod lorem. Nulla sodales auctor dapibus. Curabitur euismod neque dolor, at sagittis arcu congue ultrices. Morbi nec finibus tortor.
</p>
<p>
Aliquam vestibulum dictum nisi non sollicitudin. Integer ac magna viverra, cursus lorem quis, interdum ex. Phasellus id neque pulvinar, dignissim augue ut, lobortis leo. Duis sed elit et ipsum auctor convallis. Donec non orci suscipit, eleifend tellus
pretium, vehicula turpis. Mauris et justo et est cursus accumsan et vel elit. In egestas lobortis imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Etiam dictum vel lorem in varius. Etiam accumsan nibh at ex mollis, id porta leo sodales. Suspendisse mauris urna, faucibus in turpis et, porttitor lobortis lectus. Cras facilisis feugiat tortor sed laoreet. Nam
cursus malesuada lorem sed bibendum. Sed dapibus, mi vel elementum vehicula, augue massa pulvinar erat, vitae rutrum eros nisi sed neque.
</p>
<p>
Nulla sodales lectus vitae urna ullamcorper, eu mattis lacus iaculis. Praesent eleifend eu sem nec aliquet. Pellentesque consequat nisl ac odio efficitur, vitae interdum sapien gravida. Proin sed commodo leo. Quisque sem sem, euismod id sapien eget, fermentum
consectetur turpis. Praesent aliquam eros id ipsum vehicula, aliquam pellentesque massa pellentesque. Etiam nec elit arcu. Donec eget ullamcorper nisl, in porta nibh. In non ante id elit tincidunt convallis. Suspendisse sit amet dictum sapien, vel
lobortis mi. Mauris eu pharetra ante. Morbi vestibulum orci at augue pulvinar iaculis. Vestibulum quis dui et odio tristique laoreet eget id augue.
</p>
<p>
Nulla finibus lorem in risus efficitur, at cursus nunc molestie. In pellentesque quis quam et sollicitudin. Mauris at turpis felis. Nulla facilisi. Cras pellentesque malesuada felis, sit amet dapibus lectus efficitur auctor. Mauris dictum eu nisl non
commodo. Quisque at risus eget quam dictum aliquet. Curabitur malesuada magna et efficitur bibendum. Curabitur ultrices luctus lorem. Vivamus sodales elit quis metus mattis, pretium semper mi finibus.
</p>
</div>
</div>
Adding back the grid-gap, margin and padding - you can adjust the explicit height set on the sidebar - see demo below:
#top {
position: sticky;
top: 0;
border: 1px solid red;
width: 100%;
}
.container {
display: grid;
grid-gap: 50px;
grid-template-columns: max-content 1fr;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
max-width: 900px;
}
.sidebar {
border: 1px solid blue;
position: sticky;
top: 0;
/* ADDED */
align-self: flex-start; /* override the default stretch */
height: calc(100vh - 30px); /* set a fixed height */
padding-top: 20px;
}
.content {
border: 1px solid green;
}
<div id="top">
sticky header
</div>
<div class="container">
<div class="sidebar">
sticky sidebar
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at ipsum mi. Integer laoreet a nisl quis imperdiet. Etiam sed ligula rutrum, viverra arcu vitae, mattis lectus. Aliquam rutrum eros id quam sodales volutpat. Suspendisse sed neque ut mauris
luctus hendrerit. Suspendisse auctor aliquam rutrum. Sed sodales placerat est. Donec vel elit vitae ipsum ultrices tristique. Nulla auctor, dolor at porta laoreet, ex nisi auctor orci, in posuere enim arcu at tortor. Etiam sed ante mattis sem pharetra
condimentum. Nullam a eros nec metus feugiat tincidunt vel sed lectus. Nunc accumsan nisi sit amet auctor rhoncus. Vestibulum diam risus, sodales non diam a, tristique ullamcorper erat.
</p>
<p>
Aliquam posuere libero at felis maximus, quis pulvinar diam dictum. Integer id nisi non turpis bibendum suscipit. Duis pellentesque leo vitae elit mollis malesuada. Duis eget magna et odio mattis bibendum. Ut et rutrum diam, quis luctus mi. Duis in molestie
elit. Nullam consequat turpis velit, sit amet venenatis tellus bibendum non. Etiam iaculis luctus sem, et aliquam nisl commodo et. In consectetur ac nibh ac porttitor. Nulla euismod facilisis faucibus. Phasellus sed risus convallis, elementum est
nec, euismod lorem. Nulla sodales auctor dapibus. Curabitur euismod neque dolor, at sagittis arcu congue ultrices. Morbi nec finibus tortor.
</p>
<p>
Aliquam vestibulum dictum nisi non sollicitudin. Integer ac magna viverra, cursus lorem quis, interdum ex. Phasellus id neque pulvinar, dignissim augue ut, lobortis leo. Duis sed elit et ipsum auctor convallis. Donec non orci suscipit, eleifend tellus
pretium, vehicula turpis. Mauris et justo et est cursus accumsan et vel elit. In egestas lobortis imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Etiam dictum vel lorem in varius. Etiam accumsan nibh at ex mollis, id porta leo sodales. Suspendisse mauris urna, faucibus in turpis et, porttitor lobortis lectus. Cras facilisis feugiat tortor sed laoreet. Nam
cursus malesuada lorem sed bibendum. Sed dapibus, mi vel elementum vehicula, augue massa pulvinar erat, vitae rutrum eros nisi sed neque.
</p>
<p>
Nulla sodales lectus vitae urna ullamcorper, eu mattis lacus iaculis. Praesent eleifend eu sem nec aliquet. Pellentesque consequat nisl ac odio efficitur, vitae interdum sapien gravida. Proin sed commodo leo. Quisque sem sem, euismod id sapien eget, fermentum
consectetur turpis. Praesent aliquam eros id ipsum vehicula, aliquam pellentesque massa pellentesque. Etiam nec elit arcu. Donec eget ullamcorper nisl, in porta nibh. In non ante id elit tincidunt convallis. Suspendisse sit amet dictum sapien, vel
lobortis mi. Mauris eu pharetra ante. Morbi vestibulum orci at augue pulvinar iaculis. Vestibulum quis dui et odio tristique laoreet eget id augue.
</p>
<p>
Nulla finibus lorem in risus efficitur, at cursus nunc molestie. In pellentesque quis quam et sollicitudin. Mauris at turpis felis. Nulla facilisi. Cras pellentesque malesuada felis, sit amet dapibus lectus efficitur auctor. Mauris dictum eu nisl non
commodo. Quisque at risus eget quam dictum aliquet. Curabitur malesuada magna et efficitur bibendum. Curabitur ultrices luctus lorem. Vivamus sodales elit quis metus mattis, pretium semper mi finibus.
</p>
</div>
</div>
I am creating a website in which the minimum height of the page is 200vh. I have a full page image, followed by text content below that. I want to prevent the text from overflowing out of the container. Here is an example:
* {
margin: 0;
padding: 0;
}
.container {
position: absolute;
width: 100%;
min-height: 200vh;
background: red;
}
.full-page-image {
background-image: url("https://i.ytimg.com/vi/xC5n8f0fTeE/maxresdefault.jpg");
background-size: cover;
position: absolute;
height: 100vh;
width: 100%;
}
.content {
position: relative;
top: 100vh;
left: 10vw;
width: 80vw;
}
.content p {
font-size: 1.4em;
}
<div class="container">
<div class="full-page-image">
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum leo at hendrerit pulvinar. Integer non lacus dapibus, dictum ipsum sed, gravida erat. Quisque fermentum fermentum arcu, ac sollicitudin est. Mauris nec pulvinar mi, eu eleifend nisi. Cras lorem ligula, condimentum eget dictum quis, dapibus et est. Quisque tincidunt libero sit amet odio tincidunt, quis bibendum neque malesuada. Proin elementum nulla diam, ac porta est sodales at. Cras ac tortor in odio scelerisque scelerisque. Vestibulum eu ligula semper, lacinia purus ac, auctor orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Vestibulum aliquam nisi ligula, scelerisque imperdiet ante consequat ut. Proin est dolor, egestas a sapien vitae, ultricies euismod ex. Nam eget euismod ante. Praesent finibus sed nisi tincidunt pretium. Vestibulum porta laoreet sapien, et congue odio posuere eu. Proin nec lectus vel libero vestibulum tincidunt. In dapibus a nisl eu imperdiet. Donec faucibus odio a metus sagittis, et vulputate dui dapibus. Etiam non ex libero. Duis ultricies dignissim nulla, in mollis sem condimentum vitae. Etiam tincidunt sed dolor vitae venenatis. Maecenas volutpat felis eu vehicula pharetra. Donec a turpis lacus. Aenean tortor justo, iaculis ut erat eu, rhoncus sagittis elit. Nullam non sapien purus. In at consectetur augue, sit amet mollis justo.
Suspendisse feugiat quam vitae massa tempor luctus. Duis aliquam commodo dolor et commodo. Aenean sit amet nisl vitae quam tincidunt molestie id ac enim. Fusce eu ante imperdiet, viverra lacus at, efficitur risus. Vestibulum placerat, libero quis luctus faucibus, diam nisl tempor justo, eu tempus mauris ligula in libero. Pellentesque ut odio quis orci interdum gravida vitae ut neque. In hac habitasse platea dictumst. Ut finibus mi vitae enim euismod auctor. Integer libero dui, laoreet vel euismod vitae, eleifend mattis urna. Praesent convallis sodales elit, vel elementum purus dapibus nec. Curabitur euismod ullamcorper dolor, a egestas nibh porttitor rhoncus. Nam elementum bibendum elementum.
Fusce non nibh quis odio tempor lobortis ut et lorem. Quisque volutpat dapibus mauris, vitae varius ipsum sollicitudin malesuada. Etiam ultricies sapien tortor, et vehicula ipsum volutpat sollicitudin. Nulla id nisl nunc. Sed sit amet iaculis lacus. Nulla egestas ex purus, eget elementum nibh molestie et. Vivamus sodales rhoncus varius. Donec malesuada, quam et pharetra aliquet, odio erat gravida nunc, nec vehicula tellus diam in purus. Curabitur feugiat tempor nulla, euismod ornare lorem consequat at. Nam rutrum arcu porta nulla convallis viverra. Mauris pharetra velit arcu, ac placerat quam ornare ut. Morbi vitae diam quis turpis fringilla ornare at in urna. Nulla elit lectus, molestie sit amet risus nec, pretium vehicula diam. Morbi velit massa, accumsan eget iaculis eget, pharetra at ex. Duis purus eros, iaculis nec enim at, dignissim pellentesque purus. Nulla convallis, erat quis elementum posuere, metus libero malesuada erat, eu pharetra mauris libero id lacus.
Curabitur placerat accumsan hendrerit. Proin vel mauris eget justo fringilla volutpat eget a libero. Nullam iaculis varius fringilla. Morbi in urna mi. Pellentesque sit amet lacinia odio. Nunc vel dolor aliquet, vulputate magna non, consequat purus. Mauris non malesuada est, nec congue ante. Sed sit amet vestibulum nunc, id hendrerit urna. Ut porta eget risus a tincidunt. Aliquam ut dui elit. Nulla quis varius sapien, vulputate auctor mi. Phasellus rhoncus vestibulum purus, vestibulum porttitor libero mattis in. Aenean elit velit, ultrices in lacinia et, lobortis id tortor. Quisque dapibus cursus lorem, et consequat tellus pretium eu. Maecenas vitae magna bibendum mi placerat pellentesque.
</p>
</div>
</div>
How can I prevent the text from going outside of the red background?
You can prevent text overflowing a container by either 1. expanding the container to fit the text, or 2. hiding the overflowing text beyond the container.
1:
a. In your case, usage of top: 100vh will not change the height of the element, but will push the entire element downwards 100vh. Therefore it will overflow the parent/container element (the red background) by 100vh. The text inside this element will reach to the bottom, also overflowing by 100vh. Use margin-top: 100vh instead, to let the element start 100vh from the top, but end within it's parent element.
2:
a. Ensure the container is the desired height. Use dev tools to view/highlight the height of an element.
b. Set overflow: scroll; or overflow: hidden; see css overflow This will hide the text beyond the container height, with either scrollbars or not. Note: overflow: auto will (should) not show scrollbars if there is no overflow.
Pretty sure this what you are looking for:
.container {
position: absolute;
width: 100%;
min-height: 200vh;
overflow-y: auto;
background: red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow