Independent scrolling panels with no body scroll

Independent scrolling panels with no body scroll - css

I'm using bootstrap in my template also its having two or more main panels. i want to set independent scrolling of this panels. panel contents are loaded dynamically and also with no body scroll working with any resolution.
I'm tried this link,but cannot achieve this.
here is my sample code :
<!DOCTYPE html>
<html lang="en">
<head>
<title> Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style type="text/css">
html, body {
overflow: hidden;
height: 100%;
}
section{
height: 85%;
}
header{
width: 100%;background-color: yellow;
height: 80px;
}
footer{
width: 100%;background-color: black;
height: 20px;
clear: both;
position: absolute;
bottom: 0;
}
#one{
float: left;
width: 15%;
background: green;
height: 100%;
overflow: hidden;
}
#left {
float: left;
width: 45%;
background: red;
height: 100%;
overflow-y: scroll;
}
#right {
float: left;
width: 40%;
background: blue;
height: 100%;
overflow-y: scroll;
}
</style>
</head>
<body >
<header>
</header>
<section>
<div id="one">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec lorem mauris. Nulla fermentum tincidunt nulla et dignissim. In porttitor sem id velit lobortis aliquam. Duis et purus ac orci porttitor luctus at quis leo. Mauris vulputate pellentesque est, sit amet egestas tellus facilisis sit amet. Cras sodales bibendum tellus, a gravida tortor hendrerit sed. Pellentesque blandit posuere nisl</p>
<p> tristique nibh venenatis. In id eros sed libero iaculis commodo quis vitae neque. Nulla gravida neque in tortor congue id mattis massa auctor. Cras auctor tincidunt ipsum, in suscipit risus iaculis sed. Nulla at eros nec urna auctor tincidunt eu ac diam. Aenean nulla metus, accumsan eu dignissim vitae, congue sed nisl. Pellentesque ut nunc eget metus malesuada vulputate interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p></div>
<div id="left">
<p> tristique nibh venenatis. In id eros sed libero iaculis commodo quis vitae neque. Nulla gravida neque in tortor congue id mattis massa auctor. Cras auctor tincidunt ipsum, in suscipit rSuspendisse congue fringilla urna vitae dapibus. Phasellus iaculis, velit at ornare feugiat, nunc dolor scelerisque dolor, sed placerat enim magna sit amet magna. Quisque gravida arcu eu neque porttitor rutrum. Donec tempus urna interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p>
<p> commodo enim. Curabitur eu justo non felis tempus fermentum ut vitae augue. Ut cursus ultrices metus eu vehicula. Praesent sem nulla, eleifend eget adipiscing a, tempor sit amet lectus. Suspendisse congue fringilla urna vitae dapibus. Phasellus iaculis, velit at ornare feugiat, nunc dolor scelerisque dolor, sed placerat enim magna sit amet magna. Quisque gravida arcu eu neque porttitor rutrum. Donec tempus urna interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p>
<p> Pellentesque felis erat, tristique nec semper vel, dignissim ut nisl. Donec ac dui purus. Nunc in ligula lacus. In vehicula scelerisque convallis. Ut in ornare ante. Vestibulum ante fringilla urna vitae dapibus. Phasellus iaculis, velit at ornare feugiat, nunc dolor scelerisque dolor, sed placerat enim magna sit amet magna. Quisque gravida arcu eu neque porttitor rutrum. Donec tempus urna interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p>
<p> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam et libero a nibh venenatis tristique vitae vitae ligula. Phasellus vitae tempor ante. Proin neque porttitor rutrum. Donec tempus urna interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p>
<br>
<h1>haridass</h1>
</div>
<div id="right">
<p>tae tempor ante. Proin egestas commodo enim. Curabitur eu justo non felis tempus fermentum ut vitae augue. Ut cursus ultrices metus eu vehicula. Praesent sem nulla, eleifend eget adipiscinggravida arcu eu neque porttitor rutrum. Donec tempus urna interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p>
<p> eget adipiscing a, tempor sit amet lectus. Suspendisse congue fringilla urna vitae dapibus. Phasellus iaculis, velit at ornare feugiat, nunc dolor scelerisque dolor, sed placerat enim magna sit amet magna. Quisque gravida arcu eu neque porttitor rutrum. Donec tempus urna interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p>
<p>Ut in ornare ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam et libero a nibh venenatis tristique vitae vitae ligula. Phasellus vitae te Quisque gravida arcu eu neque porttitor rutrum. Donec tempus urna interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p>
<p>Suspendisse congue fringilla urna vitae dapibus. Phasellus iaculis, velit at ornare feugiat, nunc dolor scelerisque dolor, sed placerat enim magna sit amet magna. Quisque gravida arcu eu neque porttitor rutrum. Donec tempus urna interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p>
<br>
<h1>haridass</h1>
</div>
</section>
<footer></footer>
</body>
</html>

Related

Full width background with full height

First question here; so i hope you can help me! I am sorry in advance if i forgot any info!;)
I have a div with a background in it. The background needs to be scaled to fit the whole width of the screen; this works and the background image does remain its aspect ratio. But the problem is that the screen cuts of the height, i expect a scrollbar to scroll down to see the whole background image.
Can somebody help me with this problem?
#import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
.banner {
background-color: transparent;
position: fixed;
background-repeat: no-repeat;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
color: #333955;
font-size: 23px;
font-family: "Garisman Studio FreudianTwo";
text-align: center;
}
.firstdiv {
text-align: center;
/*background-image: url("Afbeelding Landingspagina.png");*/
background-image: url("https://dummyimage.com/600x400/000/fff");
background-repeat: no-repeat;
background-size: cover;
background-color: #F7F3DE;
color: #2C324D;
font-family: "Garisman Studio FreudianTwo";
}
.body {
padding: 0px;
margin: 0px;
height: 100%;
}
.abouttellus {
text-align: center;
margin-top: 0px;
background-image: url("Images/About Tellus.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: #F7F3DE;
color: #2C324D;
font-family: "Garisman Studio FreudianTwo";
}
<html>
<head>
<title>XXXX</title>
<link rel="stylesheet" type="text/css" href="tellus.css">
</head>
<body class="body">
<div class= "banner">
<p>ONS VErhaal im<strong>p</strong>act CHoco contact </p>
</div>
<div class="firstdiv">Hier wordt de inhoud voor class "firstdiv" weergegeven
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit ligula id lectus faucibus pretium. Vestibulum eget magna tellus. Vestibulum urna tellus, condimentum in ante vitae, viverra volutpat quam. Pellentesque facilisis congue ex, dapibus mattis mi dapibus placerat. Quisque faucibus arcu magna, et laoreet augue ornare sed. Etiam ac molestie augue. Morbi varius scelerisque mauris, a faucibus ligula mattis nec.
Pellentesque imperdiet lobortis vestibulum. Aenean in fringilla lorem, mollis pretium arcu. Ut pulvinar odio euismod, vehicula lectus ut, dictum leo. Cras lacinia metus vitae tellus efficitur vulputate. Donec justo dui, hendrerit a condimentum non, cursus ac lectus. Donec ullamcorper dignissim mi congue eleifend. Donec semper imperdiet turpis. Morbi nec nisi ornare, vulputate diam sit amet, viverra massa. Etiam nec dapibus libero. Cras id diam justo. Vestibulum ac sem egestas dolor viverra condimentum. Integer nunc elit, iaculis ac ultrices ac, euismod ut est. Nunc pellentesque varius velit, vel rutrum justo luctus et. Aliquam hendrerit elit eget tellus vulputate, eget faucibus dolor sodales. Aliquam eros ligula, vulputate eu cursus eget, accumsan nec massa. Sed quis justo congue, malesuada nisi non, sodales lacus.
Pellentesque porta, orci sed dignissim euismod, neque dolor sagittis est, eu vulputate quam odio non ligula. Maecenas id nibh eros. Suspendisse potenti. Fusce eget risus ultricies, elementum leo eu, lobortis sapien. Morbi ut est sed lectus cursus convallis. Suspendisse potenti. Donec et nisl quis erat facilisis dictum et id augue. Sed vel enim lorem. Cras placerat neque arcu, at lacinia mauris lobortis sagittis. Fusce nec suscipit eros. Maecenas quis lectus vel leo tempus suscipit. Pellentesque sit amet mattis dolor, a hendrerit lectus. In eget dapibus orci, eget consequat metus. Suspendisse dapibus euismod ligula tempus congue. Pellentesque convallis, lectus quis tincidunt facilisis, sapien purus mollis libero, non facilisis tortor mi non erat.
Donec nunc eros, ultrices sit amet pulvinar venenatis, semper quis metus. Fusce sed sagittis erat, et euismod nisi. In ac diam sed dui scelerisque dignissim a ut ligula. Maecenas luctus lacus ut tempor semper. Integer semper scelerisque euismod. Integer vel massa non velit commodo placerat. Donec nec nibh imperdiet, ultricies elit vel, interdum mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Suspendisse nibh mauris, pretium ac faucibus sed, tempor ut nunc. Nullam gravida aliquam justo, at tristique ante dictum sed. Vivamus lacinia dui sit amet vehicula ultricies. Nunc volutpat mollis mi vel euismod. Sed quis molestie sapien, sed tincidunt ante. Aliquam nulla risus, sagittis in mi semper, lacinia tincidunt odio. In ut nisl porta, sodales mauris eget, commodo nisi.
Morbi sit amet mattis lacus. Pellentesque non facilisis sapien. Proin quis massa rhoncus, auctor augue in, blandit velit. Mauris pharetra, risus vel tempor convallis, turpis dolor porta elit, sit amet rhoncus eros felis a turpis. Nunc ultrices at nisi sed viverra. Nullam laoreet elementum lectus. Nunc vel lacinia massa, et euismod sem. Quisque sed scelerisque enim, non viverra eros. Maecenas hendrerit egestas elit non congue. Curabitur dictum lobortis ligula, sed facilisis lacus aliquam id. Etiam porttitor, nunc sit amet lacinia blandit, lectus sem efficitur magna, vel dapibus orci ex non arcu. Aenean enim eros, malesuada a bibendum eget, luctus eget lectus. Donec auctor massa eget mauris aliquam vulputate. Maecenas ultricies enim ipsum, ac viverra nisl rhoncus a. Nam molestie eget ex vel faucibus.
Nullam et ultrices elit, vitae elementum turpis. Vestibulum justo nibh, semper sed diam et, malesuada blandit mauris. Suspendisse est massa, tempus vitae rhoncus sit amet, condimentum vitae nisl. Praesent porta malesuada orci ac mattis. Quisque viverra est rhoncus, pretium orci vitae, blandit orci. Donec ut tellus libero. Quisque facilisis tincidunt suscipit. In pharetra augue eu massa scelerisque euismod id ut justo.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque sollicitudin feugiat est. Fusce et dui augue. Praesent iaculis, nunc non dictum luctus, risus metus malesuada metus, eu sollicitudin leo odio nec augue. Pellentesque vehicula iaculis lorem a porta. Proin vulputate, sapien sit amet porta dapibus, risus lacus elementum lorem, porta sodales tellus orci ac libero. In egestas sem ac metus faucibus aliquet.
Curabitur auctor quam in metus sollicitudin consequat. Nunc ut magna purus. Nunc bibendum, lorem non hendrerit laoreet, lectus arcu ultrices metus, at elementum quam purus ut eros. Fusce vitae porttitor velit. Etiam consectetur accumsan suscipit. Morbi vitae est tincidunt, ornare purus sit amet, elementum mi. Aenean maximus eros quis lorem ultricies bibendum. Etiam aliquam rhoncus tincidunt. Donec posuere libero magna, nec volutpat lectus rutrum non. Pellentesque venenatis magna a nulla iaculis, a rutrum erat dignissim. Donec eleifend, dolor vel ullamcorper mollis, lorem ipsum interdum lacus, id ornare ligula nisi a turpis. Etiam sit amet augue in mi finibus dapibus. Aliquam sit amet vulputate elit. Nulla convallis rutrum nisi, quis pulvinar ante congue eget.
Cras ut fermentum est. Curabitur placerat dolor in dolor facilisis, bibendum scelerisque mauris efficitur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis ornare arcu. Sed hendrerit ex nibh, quis pretium nisl fringilla id. Cras id massa lectus. Nulla pharetra odio et aliquam posuere. Vivamus a eros pharetra, accumsan augue id, dictum ante. Nam eu venenatis justo. Nulla auctor sed quam vel elementum. Nullam et interdum enim, sit amet accumsan justo. Vestibulum nunc eros, placerat id convallis quis, convallis at nisi. Ut ultrices vel justo eget dignissim. Morbi augue magna, malesuada nec magna eu, malesuada gravida neque.</div>
</body>
</html>

Use an image tag
<div class="firstdiv"><img src="./Afbeelding_Landingspagina.png"/></div>
remove overflow hidden, add width and height to image
.firstdiv {
overflow: visible;
}
.firstdiv > img {
widht: 100%;
height: 100%;
}
If you want to display text on top of the image without messing up you can use z-index and position: abosolute. For example
.firstdiv > p {
z-index: 999;
position: absolute;
top: 10px;
}

Set your body with height: auto;
Set in your .firstDiv the background-position:center; min-height:100vh; this will make it the whole div height and keeps the image aspect ratio.
#import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
.banner {
background-color: transparent;
position: fixed;
background-repeat: no-repeat;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
color: #333955;
font-size: 23px;
font-family: "Garisman Studio FreudianTwo";
text-align: center;
}
.firstdiv {
text-align: center;
/*background-image: url("Afbeelding Landingspagina.png");*/
background-image: url("https://dummyimage.com/600x600/0011ff/f50e0e");
background-repeat: no-repeat;
background-size: cover;
background-position:center;
background-color: #F7F3DE;
color: #2C324D;
font-family: "Garisman Studio FreudianTwo";
min-height:100vh;
}
.body {
padding: 0px;
margin: 0px;
height: auto;
}
.abouttellus {
text-align: center;
margin-top: 0px;
background-image: url("Images/About Tellus.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: #F7F3DE;
color: #2C324D;
font-family: "Garisman Studio FreudianTwo";
}
<html>
<head>
<title>XXXX</title>
<link rel="stylesheet" type="text/css" href="tellus.css">
</head>
<body class="body">
<div class= "banner">
<p>ONS VErhaal im<strong>p</strong>act CHoco contact </p>
</div>
<div class="firstdiv">Hier wordt de inhoud voor class "firstdiv" weergegeven
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit ligula id lectus faucibus pretium. Vestibulum eget magna tellus. Vestibulum urna tellus, condimentum in ante vitae, viverra volutpat quam. Pellentesque facilisis congue ex, dapibus mattis mi dapibus placerat. Quisque faucibus arcu magna, et laoreet augue ornare sed. Etiam ac molestie augue. Morbi varius scelerisque mauris, a faucibus ligula mattis nec.
Pellentesque imperdiet lobortis vestibulum. Aenean in fringilla lorem, mollis pretium arcu. Ut pulvinar odio euismod, vehicula lectus ut, dictum leo. Cras lacinia metus vitae tellus efficitur vulputate. Donec justo dui, hendrerit a condimentum non, cursus ac lectus. Donec ullamcorper dignissim mi congue eleifend. Donec semper imperdiet turpis. Morbi nec nisi ornare, vulputate diam sit amet, viverra massa. Etiam nec dapibus libero. Cras id diam justo. Vestibulum ac sem egestas dolor viverra condimentum. Integer nunc elit, iaculis ac ultrices ac, euismod ut est. Nunc pellentesque varius velit, vel rutrum justo luctus et. Aliquam hendrerit elit eget tellus vulputate, eget faucibus dolor sodales. Aliquam eros ligula, vulputate eu cursus eget, accumsan nec massa. Sed quis justo congue, malesuada nisi non, sodales lacus.
Pellentesque porta, orci sed dignissim euismod, neque dolor sagittis est, eu vulputate quam odio non ligula. Maecenas id nibh eros. Suspendisse potenti. Fusce eget risus ultricies, elementum leo eu, lobortis sapien. Morbi ut est sed lectus cursus convallis. Suspendisse potenti. Donec et nisl quis erat facilisis dictum et id augue. Sed vel enim lorem. Cras placerat neque arcu, at lacinia mauris lobortis sagittis. Fusce nec suscipit eros. Maecenas quis lectus vel leo tempus suscipit. Pellentesque sit amet mattis dolor, a hendrerit lectus. In eget dapibus orci, eget consequat metus. Suspendisse dapibus euismod ligula tempus congue. Pellentesque convallis, lectus quis tincidunt facilisis, sapien purus mollis libero, non facilisis tortor mi non erat.
Donec nunc eros, ultrices sit amet pulvinar venenatis, semper quis metus. Fusce sed sagittis erat, et euismod nisi. In ac diam sed dui scelerisque dignissim a ut ligula. Maecenas luctus lacus ut tempor semper. Integer semper scelerisque euismod. Integer vel massa non velit commodo placerat. Donec nec nibh imperdiet, ultricies elit vel, interdum mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Suspendisse nibh mauris, pretium ac faucibus sed, tempor ut nunc. Nullam gravida aliquam justo, at tristique ante dictum sed. Vivamus lacinia dui sit amet vehicula ultricies. Nunc volutpat mollis mi vel euismod. Sed quis molestie sapien, sed tincidunt ante. Aliquam nulla risus, sagittis in mi semper, lacinia tincidunt odio. In ut nisl porta, sodales mauris eget, commodo nisi.
Morbi sit amet mattis lacus. Pellentesque non facilisis sapien. Proin quis massa rhoncus, auctor augue in, blandit velit. Mauris pharetra, risus vel tempor convallis, turpis dolor porta elit, sit amet rhoncus eros felis a turpis. Nunc ultrices at nisi sed viverra. Nullam laoreet elementum lectus. Nunc vel lacinia massa, et euismod sem. Quisque sed scelerisque enim, non viverra eros. Maecenas hendrerit egestas elit non congue. Curabitur dictum lobortis ligula, sed facilisis lacus aliquam id. Etiam porttitor, nunc sit amet lacinia blandit, lectus sem efficitur magna, vel dapibus orci ex non arcu. Aenean enim eros, malesuada a bibendum eget, luctus eget lectus. Donec auctor massa eget mauris aliquam vulputate. Maecenas ultricies enim ipsum, ac viverra nisl rhoncus a. Nam molestie eget ex vel faucibus.
Nullam et ultrices elit, vitae elementum turpis. Vestibulum justo nibh, semper sed diam et, malesuada blandit mauris. Suspendisse est massa, tempus vitae rhoncus sit amet, condimentum vitae nisl. Praesent porta malesuada orci ac mattis. Quisque viverra est rhoncus, pretium orci vitae, blandit orci. Donec ut tellus libero. Quisque facilisis tincidunt suscipit. In pharetra augue eu massa scelerisque euismod id ut justo.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque sollicitudin feugiat est. Fusce et dui augue. Praesent iaculis, nunc non dictum luctus, risus metus malesuada metus, eu sollicitudin leo odio nec augue. Pellentesque vehicula iaculis lorem a porta. Proin vulputate, sapien sit amet porta dapibus, risus lacus elementum lorem, porta sodales tellus orci ac libero. In egestas sem ac metus faucibus aliquet.
Curabitur auctor quam in metus sollicitudin consequat. Nunc ut magna purus. Nunc bibendum, lorem non hendrerit laoreet, lectus arcu ultrices metus, at elementum quam purus ut eros. Fusce vitae porttitor velit. Etiam consectetur accumsan suscipit. Morbi vitae est tincidunt, ornare purus sit amet, elementum mi. Aenean maximus eros quis lorem ultricies bibendum. Etiam aliquam rhoncus tincidunt. Donec posuere libero magna, nec volutpat lectus rutrum non. Pellentesque venenatis magna a nulla iaculis, a rutrum erat dignissim. Donec eleifend, dolor vel ullamcorper mollis, lorem ipsum interdum lacus, id ornare ligula nisi a turpis. Etiam sit amet augue in mi finibus dapibus. Aliquam sit amet vulputate elit. Nulla convallis rutrum nisi, quis pulvinar ante congue eget.
Cras ut fermentum est. Curabitur placerat dolor in dolor facilisis, bibendum scelerisque mauris efficitur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis ornare arcu. Sed hendrerit ex nibh, quis pretium nisl fringilla id. Cras id massa lectus. Nulla pharetra odio et aliquam posuere. Vivamus a eros pharetra, accumsan augue id, dictum ante. Nam eu venenatis justo. Nulla auctor sed quam vel elementum. Nullam et interdum enim, sit amet accumsan justo. Vestibulum nunc eros, placerat id convallis quis, convallis at nisi. Ut ultrices vel justo eget dignissim. Morbi augue magna, malesuada nec magna eu, malesuada gravida neque.</div>
</body>
</html>

I changed everything to the IMG solution, as i want the background-image larger then screen this seems to be the better solution.
THis solutions works on most devices; but i still have one problem:
It looks like the second div overflows the first div.
This is how it should be
This is how it looks on bigger screen
<html>
<head>
<link rel="stylesheet" href="tellus.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<div class= "firstdiv"><img src="Afbeelding Landingspagina.png" width="1601" height="1130" alt=""/></div>
<div class= "firstdiv"><img src="Images/About Tellus.png" width="1601" height="1215" alt=""/></div>
</body>
</html>
#import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin:0;
padding:0;
width: 100%;
}
.banner {
background-color: transparent;
position: fixed;
background-repeat: no-repeat;;
color: #333955;
font-size: 23px;
font-family: "Garisman Studio FreudianTwo";
text-align: center;
}
.firstdiv > img {
object-fit: cover;
width: 100%;
max-height; 100%;
}

How to scroll in an undefined height div

I am currently trying to make a clean messaging system, and I have an issue with my interface. Note that I am making it with Materialize, but I can tweak it with custom CSS. I have a list of message on the left side, and the remaining space on the right displays the selected message. Those two items are side by side. Pretty classic.
But I have an issue when there are too many messages on the list, or when the text is too long to fit in the view height, I can't scroll.
I need the page to be non-scrollable, but I also need to be able to scroll the list and the message view.
To so, I tried to do something like that:
.message-view {
height: 40vh;
overflow-y: scroll;
}
It works, but it is not what I want. I want the .message-view div to take the entire remaining height. I could make tricky calculation based on previous elements heights, but I find it pretty annoying, and I am not sure I could get the exact height right on every device that way.
TLDR: I want a div that would be taking the remaining height dynamically to be scrollable using CSS or Materialize. Any idea?
Here is an example of my issue (on the left, the list is scrollable but height is garbage,
arbitrarily set to 80vh because it is approximately the height), and the message-view is not scrollable):
html, body {
width: 100%;
height: 100vh;
overflow: hidden;
}
.content {
width: 100%;
height: 100vh;
display: flex;
justify-content: space-between;
}
.message-list-scroller {
width: 30%;
height: 80vh;
overflow-y: scroll;
}
.message-list {
width: 98%;
height: 100%;
border: 1px solid gray;
}
.message-list-item {
width: 100%;
border-bottom: 1px solid gray;
}
.message-view {
width: 70%;
height: 100%;
padding: 10px;
}
<html>
<body>
<h1>Message page</h1>
<div class="content">
<div class="message-list-scroller">
<div class="message-list">
<div class="message-list-item">
<h3>Title 1</h3>
<p>Preview of the message</p>
</div>
<div class="message-list-item">
<h3>Title 1</h3>
<p>Preview of the message</p>
</div>
<div class="message-list-item">
<h3>Title 1</h3>
<p>Preview of the message</p>
</div>
<div class="message-list-item">
<h3>Title 1</h3>
<p>Preview of the message</p>
</div>
<div class="message-list-item">
<h3>Title 1</h3>
<p>Preview of the message</p>
</div>
</div>
</div>
<div class="message-view">
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a metus vitae risus eleifend vulputate. Etiam porttitor turpis nec massa porta interdum. Maecenas euismod, quam euismod interdum venenatis, metus ex placerat mi, vitae mattis elit tellus id libero. Mauris molestie ac mauris sit amet vulputate. Aenean et dui in turpis facilisis faucibus vitae quis neque. Fusce faucibus scelerisque nunc. In efficitur odio nulla, eu mollis ligula pulvinar non. Phasellus imperdiet nunc velit, eget posuere dui tempus vel. Nullam semper, metus id luctus sollicitudin, nibh tellus volutpat urna, et aliquam tortor velit a arcu. Maecenas mauris dolor, vehicula non tellus eu, luctus molestie libero. Aenean vestibulum et ipsum in ultrices. Pellentesque nec vulputate nisi.
Pellentesque luctus justo erat, pulvinar placerat sapien malesuada sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada dui in quam sagittis varius. Aenean commodo dictum erat sed tincidunt. Nunc hendrerit dapibus neque vitae dictum. Aenean lacinia dolor nec ante imperdiet condimentum. Vestibulum bibendum cursus nibh, elementum tempor magna congue nec. In sed justo vel nulla rhoncus ultrices. Ut porta congue sem semper rutrum. Aenean dapibus massa metus, eu pellentesque nibh congue eu. Morbi efficitur sit amet massa a tincidunt. Praesent maximus quam sit amet nulla mattis, a sagittis velit efficitur.
Aliquam sed lectus accumsan, feugiat nisl nec, vestibulum orci. Maecenas aliquet at dui sed consectetur. Sed ornare et ligula a posuere. Integer elementum quis libero non rutrum. Vestibulum maximus eros in enim ullamcorper, sed maximus libero consectetur. Fusce ut nulla ultrices, malesuada risus eu, fermentum est. Praesent lectus quam, cursus vel lacus vitae, luctus malesuada mauris.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras lacinia fringilla risus, sit amet gravida urna maximus gravida. Etiam tincidunt auctor fermentum. In non vehicula urna. Mauris turpis diam, facilisis vitae congue at, malesuada ac augue. Praesent augue nibh, ullamcorper id ultrices commodo, ornare in nisi. Pellentesque nunc mauris, fringilla eget accumsan sed, congue nec diam. Curabitur viverra erat ipsum, ut cursus dui fermentum vel. Nam luctus tellus non elit tristique vehicula. Sed mattis eu justo a varius. Integer metus lacus, mattis quis elit id, euismod tincidunt est. Mauris porttitor eros nec risus facilisis posuere. Sed pharetra, felis in commodo tincidunt, nisi purus lobortis elit, rutrum varius nisi mauris ac arcu. Mauris nec odio sed mauris condimentum ultrices sit amet quis purus. Mauris dictum metus sit amet ante gravida aliquet eu sit amet mi.
Aliquam erat volutpat. Nullam at arcu sit amet nunc feugiat fermentum. Duis id mi dui. Cras molestie nec quam sit amet convallis. Sed et mauris augue. Curabitur sodales ipsum lacinia convallis vestibulum. Nullam commodo urna eget nibh consequat auctor.
Nulla facilisi. Quisque ultrices rutrum erat, nec pretium nulla. Aliquam vulputate molestie scelerisque. Suspendisse eu interdum erat, quis dapibus neque. Donec ac pellentesque libero. Nulla erat odio, mattis non dolor ac, pellentesque sollicitudin nunc. Nulla ultrices ac ligula a feugiat. Morbi euismod mauris dolor, eu finibus orci condimentum et. Integer ac dui vel mauris ultrices mattis sit amet a magna. Mauris urna neque, faucibus non erat a, mattis molestie odio. Cras in elit tellus. Donec cursus ultricies sollicitudin. Nullam sed mi tincidunt, dignissim dolor at, suscipit tortor. Donec tortor neque, auctor a tincidunt eget, consequat sit amet eros. Nulla interdum, justo in blandit rutrum, urna nisl molestie urna, in lacinia nisi massa in odio. Pellentesque sodales massa nec pulvinar mattis.
Fusce a consectetur mi, nec egestas nibh. Etiam purus nisi, scelerisque sit amet tempus vitae, blandit at risus. Fusce posuere imperdiet viverra. Quisque vel suscipit turpis. Fusce dapibus non sem eget mollis. Morbi tincidunt lorem a mattis pretium. Duis nunc eros, malesuada id mi non, euismod bibendum tortor. Nulla augue lectus, porttitor ac lectus a, placerat congue sem. Vestibulum blandit lectus at urna vestibulum sodales. Curabitur malesuada tempor justo id varius. Pellentesque posuere sed erat ac iaculis.
Sed ac imperdiet mi, sit amet sodales sapien. Morbi enim neque, aliquet eget venenatis vitae, tincidunt vitae lectus. Cras pellentesque condimentum eros vel euismod. Nunc posuere magna augue, sit amet pulvinar orci auctor vitae. In hac habitasse platea dictumst. Pellentesque id auctor enim, nec sollicitudin lectus. In in pharetra odio, nec blandit diam. Integer vulputate lectus id lectus ultricies pellentesque. Donec a ornare leo, vel egestas lacus. Sed in libero laoreet, posuere sapien ac, ornare felis. Curabitur vel facilisis nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum purus sem, bibendum id urna sit amet, iaculis vehicula elit. Cras porttitor urna in diam accumsan eleifend.
Vestibulum magna lectus, venenatis sed venenatis dictum, hendrerit eu arcu. Praesent sed orci id sapien scelerisque ultrices vitae non ante. Donec dignissim magna et rhoncus suscipit. Donec ut hendrerit risus, eget luctus mi. Maecenas vulputate aliquet efficitur. Donec consectetur fermentum magna, a viverra sapien semper ac. Curabitur in lacus eu sapien porta placerat non quis metus. Aenean viverra velit id erat iaculis fringilla. Duis ultrices sollicitudin venenatis. Aliquam id cursus diam.
Curabitur neque lacus, lobortis non massa sed, facilisis luctus ipsum. Nullam eget semper turpis. Sed a lorem vel arcu tempor bibendum. Praesent sem tellus, placerat sit amet est vel, ultrices porttitor sem. Cras egestas pharetra metus, nec aliquam diam consequat vitae. Ut nec ullamcorper tortor. Vestibulum dignissim nisi sit amet interdum rutrum. Integer aliquet lectus id lacus vehicula, sit amet blandit arcu fringilla. Etiam mattis bibendum tristique. Aenean sit amet ultricies odio, eu gravida ante. In vel leo id lacus volutpat accumsan vitae non nulla. Quisque eu rhoncus magna, nec molestie nibh. Nam viverra posuere est ut egestas. Nunc mauris nibh, vulputate sed viverra tincidunt, faucibus condimentum mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque diam velit, suscipit ac nisi sit amet, convallis egestas metus.
</p>
</div>
</div>
</body>
</html>

Sorry for the crass example here - but:
1) create a page container, set to 100vh and overflow:hidden.
2) Use the grid system to make your two columns. Set these also to height:100vh.
3) Inside these cols, place a .scrollable div with a max-height of 100vh.
<div class="messages">
<div class="row">
<div class="col m4">
<ul class="scrollable">...</ul>
</div>
<div class="col m8">
<div class="scrollable">...</div>
</div>
</div>
</div>
.messages {
height:100vh;
background-color: silver;
overflow: hidden;
}
.col.m4 {
background-color: white;
}
.col.m8, col.m4 {
height:100vh;
}
.scrollable {
max-height:100vh;
overflow:hidden;
overflow-y:scroll;
padding-bottom:20px;
}
Codepen.

Bootstrap 4 scrollbars on 2 divs side-by-side fixed and fluid width

I am trying to design a simple dashboard page.
I started with putting together two divs side by side to be used as side menu and content. The page looks like the following:
I noticed something that the scrollbar(y) isn't visible even though the page has more content than what is visible.
Yes you still can scroll down/up but it is confusing why there is no scrollbar visible.
I am trying to use bootstrap 4, but I also have a custom css.
What do you think the issue? And more importantly, is there a better way using bootstrap 4?
The code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dashboard Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
#sideMenu {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #222D32;
overflow-x: hidden;
transition: 0.3s;
}
#mainContents {
height: 100%;
width: 100%;
padding-right: 250px;
position: fixed;
z-index: -1;
top: 0px;
left: 250px;
background-color: #ECF0F5;
overflow-x: hidden;
transition: 0.3s;
}
#contentBody {
width: 100%;
padding: 20px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div id="sideMenu">
</div>
<div id="mainContents">
<div id="contentBody">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
<p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
<p>Cras vel pretium quam, ac sodales sapien. In ut laoreet turpis, at vestibulum metus. Aliquam gravida elementum consequat. Curabitur sagittis, massa cursus vestibulum cursus, eros sem sodales tortor, eu lacinia risus lectus ut augue. Quisque nec dui turpis. Maecenas imperdiet auctor quam, a condimentum nulla pulvinar sed. Cras a lacus id justo facilisis tristique in non turpis.</p>
<p>Integer sit amet ipsum interdum metus scelerisque tempor. Sed pretium semper scelerisque. Etiam lacus dolor, tempor id aliquet egestas, porttitor a ante. Nam tincidunt mi id tellus bibendum, ac accumsan dolor bibendum. Donec placerat porttitor sagittis. Ut vitae vehicula orci. Aenean viverra sem a tellus rhoncus placerat. Aliquam erat volutpat. Pellentesque quis metus sed lacus scelerisque posuere. Cras elementum, dolor ut elementum placerat, urna nisl aliquam eros, in pharetra diam massa quis leo. Pellentesque efficitur egestas pulvinar. Aliquam hendrerit diam in vulputate fringilla. In vitae nisl massa. Sed suscipit nisl ac quam molestie pharetra. Fusce scelerisque ultricies felis non vulputate.</p>
<p>Nullam non consectetur diam. Nunc non rutrum ante. Aenean vestibulum metus ultricies diam fermentum fringilla. Ut efficitur tincidunt varius. Donec facilisis purus eget diam maximus efficitur. Proin aliquam eu metus id euismod. Nunc sed urna blandit metus bibendum elementum. Fusce lacinia tellus eu accumsan accumsan. Nullam ornare lacus quam, vitae sagittis velit mollis eget. Quisque et suscipit ante. In pulvinar ex vitae risus lacinia, vitae egestas neque interdum. Mauris enim leo, porta at risus at, ornare tincidunt sapien. Sed semper enim eleifend elit dictum, id fermentum sapien ullamcorper. Nam vitae urna a libero dapibus tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
</div>
</div>
</body>
</html>

This would be a simpler, Bootstrap friendly method...
https://www.codeply.com/go/y4HsWA8VA2
<div class="container-fluid">
<div class="row">
<div class="sidebar col">Sidebar</div>
<div class="main col">
..
</div>
</div>
</div>
.sidebar {
width: 250px;
min-height: 100vh;
position: fixed;
}
.main {
padding-left: 265px;
}

scroll is not visible because you are giving width 100% of body and also pushing div 250px right side and also giving padding to right 250px;
so mainly content is overflowing to right side.
you have to do like
#mainContents {
height: 100%;
width: 100%;
padding-left: 250px;
position: fixed;
z-index: -1;
top: 0px;
background-color: #ECF0F5;
overflow-x: hidden;
overflow-y: auto;
transition: 0.3s;
}
It will solve your Problem

Remove the following from #mainContents style
width: 100%;
padding-right: 250px;
Then your style will be like this
<style>
#sideMenu {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #222D32;
overflow-x: hidden;
transition: 0.3s;
}
#mainContents {
height: 100%;
width: 100%;
padding-right: 250px;
position: fixed;
z-index: -1;
top: 0px;
left: 250px;
background-color: #ECF0F5;
overflow-x: hidden;
transition: 0.3s;
}
#contentBody {
width: 100%;
padding: 20px;
margin-bottom: 50px;
}
</style>
Code of whole page ia as follows. Please check it
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dashboard Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
#sideMenu {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #222D32;
overflow-x: hidden;
transition: 0.3s;
}
#mainContents {
height: 100%;
width: 100%;
padding-right: 250px;
position: fixed;
z-index: -1;
top: 0px;
left: 250px;
background-color: #ECF0F5;
overflow-x: hidden;
transition: 0.3s;
}
#contentBody {
width: 100%;
padding: 20px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div id="sideMenu">
</div>
<div id="mainContents">
<div id="contentBody">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
<p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
<p>Cras vel pretium quam, ac sodales sapien. In ut laoreet turpis, at vestibulum metus. Aliquam gravida elementum consequat. Curabitur sagittis, massa cursus vestibulum cursus, eros sem sodales tortor, eu lacinia risus lectus ut augue. Quisque nec dui turpis. Maecenas imperdiet auctor quam, a condimentum nulla pulvinar sed. Cras a lacus id justo facilisis tristique in non turpis.</p>
<p>Integer sit amet ipsum interdum metus scelerisque tempor. Sed pretium semper scelerisque. Etiam lacus dolor, tempor id aliquet egestas, porttitor a ante. Nam tincidunt mi id tellus bibendum, ac accumsan dolor bibendum. Donec placerat porttitor sagittis. Ut vitae vehicula orci. Aenean viverra sem a tellus rhoncus placerat. Aliquam erat volutpat. Pellentesque quis metus sed lacus scelerisque posuere. Cras elementum, dolor ut elementum placerat, urna nisl aliquam eros, in pharetra diam massa quis leo. Pellentesque efficitur egestas pulvinar. Aliquam hendrerit diam in vulputate fringilla. In vitae nisl massa. Sed suscipit nisl ac quam molestie pharetra. Fusce scelerisque ultricies felis non vulputate.</p>
<p>Nullam non consectetur diam. Nunc non rutrum ante. Aenean vestibulum metus ultricies diam fermentum fringilla. Ut efficitur tincidunt varius. Donec facilisis purus eget diam maximus efficitur. Proin aliquam eu metus id euismod. Nunc sed urna blandit metus bibendum elementum. Fusce lacinia tellus eu accumsan accumsan. Nullam ornare lacus quam, vitae sagittis velit mollis eget. Quisque et suscipit ante. In pulvinar ex vitae risus lacinia, vitae egestas neque interdum. Mauris enim leo, porta at risus at, ornare tincidunt sapien. Sed semper enim eleifend elit dictum, id fermentum sapien ullamcorper. Nam vitae urna a libero dapibus tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
</div>
</div>
</body>
</html>

use this code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dashboard Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
#sideMenu {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #222D32;
overflow-x: hidden;
transition: 0.3s;
}
#mainContents {
height: 100%;
width: 100%;
padding-right: 250px;
position: fixed;
z-index: -1;
top: 0px;
left: 250px;
background-color: #ECF0F5;
overflow-x: hidden;
transition: 0.3s;
}
#contentBody {
width: 100%;
padding: 20px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div id="sideMenu">
</div>
<div id="mainContents">
<div id="contentBody" style="height:600px;width:480px;overflow:auto;background-color:yellowgreen;color:white;scrollbar-base-color:gold;font-family:sans-serif;padding:10px;">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
<p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
<p>Cras vel pretium quam, ac sodales sapien. In ut laoreet turpis, at vestibulum metus. Aliquam gravida elementum consequat. Curabitur sagittis, massa cursus vestibulum cursus, eros sem sodales tortor, eu lacinia risus lectus ut augue. Quisque nec dui turpis. Maecenas imperdiet auctor quam, a condimentum nulla pulvinar sed. Cras a lacus id justo facilisis tristique in non turpis.</p>
<p>Integer sit amet ipsum interdum metus scelerisque tempor. Sed pretium semper scelerisque. Etiam lacus dolor, tempor id aliquet egestas, porttitor a ante. Nam tincidunt mi id tellus bibendum, ac accumsan dolor bibendum. Donec placerat porttitor sagittis. Ut vitae vehicula orci. Aenean viverra sem a tellus rhoncus placerat. Aliquam erat volutpat. Pellentesque quis metus sed lacus scelerisque posuere. Cras elementum, dolor ut elementum placerat, urna nisl aliquam eros, in pharetra diam massa quis leo. Pellentesque efficitur egestas pulvinar. Aliquam hendrerit diam in vulputate fringilla. In vitae nisl massa. Sed suscipit nisl ac quam molestie pharetra. Fusce scelerisque ultricies felis non vulputate.</p>
<p>Nullam non consectetur diam. Nunc non rutrum ante. Aenean vestibulum metus ultricies diam fermentum fringilla. Ut efficitur tincidunt varius. Donec facilisis purus eget diam maximus efficitur. Proin aliquam eu metus id euismod. Nunc sed urna blandit metus bibendum elementum. Fusce lacinia tellus eu accumsan accumsan. Nullam ornare lacus quam, vitae sagittis velit mollis eget. Quisque et suscipit ante. In pulvinar ex vitae risus lacinia, vitae egestas neque interdum. Mauris enim leo, porta at risus at, ornare tincidunt sapien. Sed semper enim eleifend elit dictum, id fermentum sapien ullamcorper. Nam vitae urna a libero dapibus tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
</div>
</div>
</body>
</html>
you need to add css in div tag style="height:600px;width:480px;overflow:auto;background-color:yellowgreen;color:white;scrollbar-base-color:gold;font-family:sans-serif;padding:10px;"

CSS: how to display an image object-fit:cover in a responsive 50% width context?

I'm working on a profile-kind-of template – half the page (class="actor-info") should show scrollable text and info about a person and the other half should be filled by the person's portrait picture. The picture should always fill half of the screen – so cropping would be fine.
What I have so far:
all ancestor element set to height 100%
left column and right column are both flex boxes
the image container has the property object-fit: cover;
the image container has the property position:fixed;
the image hight and width are set to auto
Basically it looks 'as if' it worked right – but when changing the browser window with the image doesn't adopt to the width – so at some point the portrait doesn't fill the height.
What I have so far:
<div class="layout">
<div class= "actor-info">
Lorem Ipsum
</div>
<div class="actor-portrait">
<div class="img-container">
<img src="…">
</div>
</div>
</div>
CSS:
html, body, .layout {
width: 100%;
height:100%;
}
.actor-portrait,
.actor-info {
width: 50%;
height:100%;
}
.actor-portrait .img-container {
height:100%;
}
.layout {
align-items: stretch;
display: flex;
width: 100%;
height:100%;
}
.actor-portrait .img-container {
object-fit: cover;
position:fixed;
}
.actor-portrait .img-container img {
width:auto;
height:auto;
}
I hope somebody has done this / been there before? All pointers appreciated! Thank you!
EDIT: I added a 'wireframe' of what i have – and what i would like to have. The image should 'cover' the red rectangle at all times and would get cropped ba the rectangle (.img-container).

As you use predefined width's and height's, you can simplify the code a lot and use background and background-size: cover to accomplish that.
Stack snippet
html, body {
margin: 0;
}
.layout {
display: flex;
height: 100vh;
}
.actor-portrait, .actor-info {
flex: 0 1 50%;
}
.actor-info {
overflow: auto;
}
.actor-portrait {
background: url(http://lorempixel.com/400/400/nature/1/) center no-repeat;
background-size: cover;
}
<div class="layout">
<div class="actor-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo lorem, mollis accumsan posuere a, sagittis eget magna. In sem est, rutrum ultrices bibendum id, convallis eu purus. Curabitur tincidunt metus mollis aliquet pharetra. Aliquam sed massa
nec neque pulvinar lacinia. Integer tempor dolor justo, quis commodo magna aliquet a. Cras mi ipsum, tempus facilisis auctor non, mattis id justo. Nullam facilisis magna justo, nec consequat dolor luctus nec. Fusce eu dignissim lacus, eu tempor tortor.
Nulla facilisi. Etiam sit amet tristique sapien, eget euismod velit. Vivamus egestas quis nulla malesuada ullamcorper. Quisque euismod dolor vel sem iaculis, in commodo leo convallis.
<br><br> In in massa facilisis, gravida mi a, dignissim leo. In neque tellus, vulputate eget lorem ut, tincidunt commodo neque. Donec viverra imperdiet ligula et sagittis. Aenean sed cursus odio. Praesent tristique magna vitae lectus luctus sodales.
Integer eget leo vitae lacus venenatis lacinia. Integer bibendum lectus tristique turpis tincidunt dignissim. Maecenas faucibus viverra porta. Praesent non dui a metus fermentum molestie. Vestibulum blandit massa id massa facilisis bibendum. Nunc
iaculis, ipsum sed dignissim sollicitudin, elit purus porttitor odio, hendrerit ornare purus arcu id mauris. Sed et gravida felis, ac imperdiet justo. Proin tincidunt vestibulum cursus. Pellentesque in urna leo.
<br><br> Donec nec ultricies eros, sed varius neque. Aliquam sed nisi nulla. Suspendisse hendrerit, orci placerat bibendum vehicula, nisl sem pellentesque nibh, commodo tincidunt lacus orci non erat. Aliquam in quam tincidunt, condimentum diam id,
aliquam lectus. Nullam ut commodo dolor, a gravida magna. Nunc viverra massa eu lobortis tristique. Aenean tristique orci erat, tempus accumsan arcu vulputate a. Nunc consequat congue ante. Cras magna lorem, ultrices eu elit eget, luctus faucibus
neque. Sed dictum fermentum lectus. In bibendum dictum ligula in pharetra. Nullam venenatis vitae sapien a fermentum.
</div>
<div class="actor-portrait">
</div>
</div>
And if you need to set the image source in the markup, you can do that too.
html, body {
margin: 0;
}
.layout {
display: flex;
height: 100vh;
}
.actor-portrait, .actor-info {
flex: 0 1 50%;
}
.actor-info {
overflow: auto;
}
.actor-portrait {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<div class="layout">
<div class="actor-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo lorem, mollis accumsan posuere a, sagittis eget magna. In sem est, rutrum ultrices bibendum id, convallis eu purus. Curabitur tincidunt metus mollis aliquet pharetra. Aliquam sed massa
nec neque pulvinar lacinia. Integer tempor dolor justo, quis commodo magna aliquet a. Cras mi ipsum, tempus facilisis auctor non, mattis id justo. Nullam facilisis magna justo, nec consequat dolor luctus nec. Fusce eu dignissim lacus, eu tempor tortor.
Nulla facilisi. Etiam sit amet tristique sapien, eget euismod velit. Vivamus egestas quis nulla malesuada ullamcorper. Quisque euismod dolor vel sem iaculis, in commodo leo convallis.
<br><br> In in massa facilisis, gravida mi a, dignissim leo. In neque tellus, vulputate eget lorem ut, tincidunt commodo neque. Donec viverra imperdiet ligula et sagittis. Aenean sed cursus odio. Praesent tristique magna vitae lectus luctus sodales.
Integer eget leo vitae lacus venenatis lacinia. Integer bibendum lectus tristique turpis tincidunt dignissim. Maecenas faucibus viverra porta. Praesent non dui a metus fermentum molestie. Vestibulum blandit massa id massa facilisis bibendum. Nunc
iaculis, ipsum sed dignissim sollicitudin, elit purus porttitor odio, hendrerit ornare purus arcu id mauris. Sed et gravida felis, ac imperdiet justo. Proin tincidunt vestibulum cursus. Pellentesque in urna leo.
<br><br> Donec nec ultricies eros, sed varius neque. Aliquam sed nisi nulla. Suspendisse hendrerit, orci placerat bibendum vehicula, nisl sem pellentesque nibh, commodo tincidunt lacus orci non erat. Aliquam in quam tincidunt, condimentum diam id,
aliquam lectus. Nullam ut commodo dolor, a gravida magna. Nunc viverra massa eu lobortis tristique. Aenean tristique orci erat, tempus accumsan arcu vulputate a. Nunc consequat congue ante. Cras magna lorem, ultrices eu elit eget, luctus faucibus
neque. Sed dictum fermentum lectus. In bibendum dictum ligula in pharetra. Nullam venenatis vitae sapien a fermentum.
</div>
<div class="actor-portrait"
style="background-image: url(http://lorempixel.com/400/400/nature/1/)">
</div>
</div>
If you still want to use object-fit: cover you can, though it has less browser support than background-size: cover
html, body {
margin: 0;
}
.layout {
display: flex;
height: 100vh;
}
.actor-portrait, .actor-info {
flex: 0 1 50%;
}
.actor-info {
overflow: auto;
}
.actor-portrait {
display: flex;
}
.actor-portrait img {
object-fit: cover;
width: 100%;
min-width: 0; /* allow a flex item to be smaller than its content */
}
<div class="layout">
<div class="actor-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo lorem, mollis accumsan posuere a, sagittis eget magna. In sem est, rutrum ultrices bibendum id, convallis eu purus. Curabitur tincidunt metus mollis aliquet pharetra. Aliquam sed massa
nec neque pulvinar lacinia. Integer tempor dolor justo, quis commodo magna aliquet a. Cras mi ipsum, tempus facilisis auctor non, mattis id justo. Nullam facilisis magna justo, nec consequat dolor luctus nec. Fusce eu dignissim lacus, eu tempor tortor.
Nulla facilisi. Etiam sit amet tristique sapien, eget euismod velit. Vivamus egestas quis nulla malesuada ullamcorper. Quisque euismod dolor vel sem iaculis, in commodo leo convallis.
<br><br> In in massa facilisis, gravida mi a, dignissim leo. In neque tellus, vulputate eget lorem ut, tincidunt commodo neque. Donec viverra imperdiet ligula et sagittis. Aenean sed cursus odio. Praesent tristique magna vitae lectus luctus sodales.
Integer eget leo vitae lacus venenatis lacinia. Integer bibendum lectus tristique turpis tincidunt dignissim. Maecenas faucibus viverra porta. Praesent non dui a metus fermentum molestie. Vestibulum blandit massa id massa facilisis bibendum. Nunc
iaculis, ipsum sed dignissim sollicitudin, elit purus porttitor odio, hendrerit ornare purus arcu id mauris. Sed et gravida felis, ac imperdiet justo. Proin tincidunt vestibulum cursus. Pellentesque in urna leo.
<br><br> Donec nec ultricies eros, sed varius neque. Aliquam sed nisi nulla. Suspendisse hendrerit, orci placerat bibendum vehicula, nisl sem pellentesque nibh, commodo tincidunt lacus orci non erat. Aliquam in quam tincidunt, condimentum diam id,
aliquam lectus. Nullam ut commodo dolor, a gravida magna. Nunc viverra massa eu lobortis tristique. Aenean tristique orci erat, tempus accumsan arcu vulputate a. Nunc consequat congue ante. Cras magna lorem, ultrices eu elit eget, luctus faucibus
neque. Sed dictum fermentum lectus. In bibendum dictum ligula in pharetra. Nullam venenatis vitae sapien a fermentum.
</div>
<div class="actor-portrait">
<img src="http://lorempixel.com/400/400/nature/1/" alt="">
</div>
</div>

I actually did something similar on a site, but I had a fixed side nav to deal with too: polarlab.anchoragemuseum.org.
I don't remember exactly where I found this code initially, but the trick is the css on the image. I've adjusted the markup and css a bit to accommodate a fixed image.
Here's a fiddle for reference as well.
.banner {
position: fixed;
width: 50%;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.banner__image {
max-width: none;
min-height: 100%;
min-width: 100%;
position: absolute;
top: -9999px;
right: -9999px;
bottom: -9999px;
left: -9999px;
margin: auto;
}
.text {
width: 48%;
float: left;
font-size: 24px;
line-height: 34px;
}
<div class="wrapper">
<section class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit sollicitudin turpis, eget pulvinar nulla efficitur non. Sed fermentum est interdum odio lobortis tempor. Mauris euismod molestie sapien sit amet pharetra. Suspendisse condimentum, velit in egestas tristique, augue nunc rutrum odio, sed imperdiet arcu velit ac lectus. Nam tortor magna, venenatis vel diam sit amet, elementum tempor massa. Aenean pretium lectus at enim commodo, ac dignissim dui tempor. Maecenas tincidunt tellus bibendum, porta erat non, pellentesque mauris. Vestibulum lacus nisi, cursus at bibendum ut, pulvinar eu elit. Nulla sodales nunc in quam ornare, non ultrices risus sollicitudin. Nullam gravida non turpis nec tempor. Fusce rhoncus consequat dolor, at euismod metus mattis eget. Maecenas ligula tellus, viverra at mi eu, commodo lacinia enim. Proin auctor sem eu risus malesuada, eu ullamcorper mauris elementum. Morbi commodo mi congue sagittis euismod.</p>
<p>Aliquam cursus interdum diam sed aliquet. Aliquam sollicitudin rutrum diam. Integer viverra, dolor non pulvinar aliquam, enim diam faucibus purus, at suscipit nulla sapien eu augue. Curabitur maximus, nulla vitae faucibus sodales, justo erat suscipit odio, a porttitor turpis ex ut nibh. Curabitur finibus fermentum lectus, vitae pharetra quam convallis in. Nam sollicitudin finibus libero, ut mattis nunc vestibulum nec. Proin gravida dapibus velit.</p>
<p>Ut id augue est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris lobortis ac purus fringilla tempus. Morbi nec diam in orci luctus malesuada. Duis consequat tortor tellus, hendrerit interdum metus maximus quis. Nulla non aliquet tortor. Nunc at quam non nibh volutpat pulvinar ut id nisi.</p>
<p>Curabitur ullamcorper dolor eget odio sodales, sit amet consequat est iaculis. Praesent vel consectetur nisi. Quisque tempus nisi quis mollis tincidunt. Pellentesque fermentum mauris enim, id feugiat lorem malesuada ut. Maecenas eleifend lacus a eros hendrerit efficitur. Nunc blandit quam auctor, auctor elit accumsan, dapibus sem. Mauris commodo enim nec ligula congue convallis. Cras cursus cursus felis, quis tempus orci eleifend in.</p>
<p>Mauris rutrum imperdiet ipsum, mollis pretium ipsum maximus id. Vivamus interdum non metus sed imperdiet. Nunc pharetra nisi id nisi convallis, nec gravida felis aliquam. Vestibulum quis molestie purus. Quisque a aliquet magna. Sed gravida quis sem id congue. Donec dolor est, sollicitudin at leo vitae, fringilla tempor mauris. Donec sodales mi vitae sem molestie tincidunt. Fusce ut elit nunc. Cras ullamcorper pharetra augue vitae lobortis. Maecenas hendrerit vulputate suscipit. Ut ut ante elit. Quisque mollis non felis sit amet aliquam. Ut suscipit vel nisi ac lobortis.</p>
</section>
<section class="banner">
<img src="http://www.canvaz.com/portrait/charcoal-1.jpg" class="banner__image">
</section>
</div>

CSS - how to position element to the bottom of its parent container?

In the following example, I am trying to put the child div (the pink rectangle) to lay at the bottom of its parent div.
I tried to use the suggestion that I found this stackoverflow thread but it didn't help.
Any idea?
<html>
<style type="text/css">
.a {
background: gray;
height: 80px;
}
.b {
background: pink;
float: right;
bottom: 0px;
}
</style>
<body>
<div class="a">
the parent
<div class="b"> child
</div>
</div>
</body>
<html>

make the parent "position: relative" and the child "position: absolute". Then you can position the child "right: 0; bottom: 0"
<html>
<style type="text/css">
.a {
position: relative;
background: gray;
height: 80px;
}
.b {
background: pink;
position: absolute;
bottom: 0px;
right: 0px;
}
</style>
<body>
<div class="a">
the parent
<div class="b"> child
</div>
</div>
</body>
<html>

Edit: Full HTML to show what is discussed in the comments.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.a {
background: gray;
position: relative;
}
.b {
background: pink;
position: absolute;
bottom: 0px;
right: 0px;
}
</style>
<body>
<div class="a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut quam sapien, id dictum purus. Ut vel consectetur justo. Sed suscipit justo ullamcorper diam interdum laoreet pulvinar nisl laoreet. Sed sem est, feugiat commodo bibendum vel, laoreet ac sapien. Fusce nisl nulla, commodo ut ultricies ut, iaculis a dolor. Nunc ultrices elit at tellus scelerisque vel vestibulum justo pretium. Suspendisse potenti. Suspendisse nec felis sem. Donec at tellus dolor, vehicula placerat lacus. Ut non libero at massa convallis imperdiet non rhoncus tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc nibh velit, congue quis tincidunt sed, feugiat a turpis. Phasellus erat justo, dictum non iaculis sit amet, auctor quis neque. Cras leo tortor, consequat non tincidunt sed, lacinia ut nibh. Etiam eu mollis quam. In eu felis velit, at bibendum sapien. Aenean sed est urna. Sed dignissim dapibus dolor sed pellentesque. Aliquam viverra ipsum sit amet justo gravida in facilisis sapien volutpat.
<p>Suspendisse commodo vulputate nunc, vitae commodo tellus varius eu. Donec adipiscing diam vel felis blandit lobortis. Donec et turpis nunc. Curabitur ac elementum mi. Aenean libero ipsum, lacinia sit amet ornare sed, sollicitudin quis libero. Vestibulum ullamcorper ullamcorper luctus. Aenean pretium ornare tempor. Sed ultricies eros sem. Aenean placerat tristique tellus nec sodales. Proin sed justo non libero condimentum commodo. Quisque sed nisl nisi, vel mattis nisl. Phasellus rhoncus pharetra egestas. Quisque nec arcu ac neque placerat rutrum. In feugiat justo ac orci dignissim rhoncus. Mauris vitae fringilla magna.
<p>Nam sagittis erat id sapien lacinia ultrices. Pellentesque ultrices, justo vitae blandit convallis, felis mi laoreet sem, in pharetra libero mauris eget nisl. Etiam in mi eget elit bibendum consectetur et nec nibh. Curabitur in justo arcu. Morbi eget venenatis enim. Duis tempor quam lacinia elit consequat sit amet blandit dolor vulputate. Aenean massa libero, suscipit eu tristique id, imperdiet pellentesque justo. Proin rutrum erat sit amet orci iaculis ut lobortis turpis sagittis. Nam luctus mollis mi, nec laoreet urna semper vitae. Pellentesque in massa enim. Etiam fermentum urna vitae lorem consequat pretium. Maecenas id ligula diam, id consectetur purus. Vestibulum libero velit, tempor hendrerit posuere ut, rutrum nec velit. Suspendisse id pulvinar erat. Sed vulputate, nibh id vulputate vestibulum, dolor elit tincidunt est, sed varius neque tellus tincidunt erat. Nunc volutpat eros in diam semper dictum. Quisque ut ligula felis.
<p>Ut pharetra feugiat nisi eu viverra. Praesent sollicitudin iaculis elit, ac lobortis ante consectetur sed. Nullam sit amet enim eget massa dapibus molestie. Donec orci diam, tempor sit amet aliquet eget, placerat in nulla. Sed et sollicitudin mi. Donec pulvinar elit pharetra urna ornare sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et mi libero. Ut et ipsum nec enim adipiscing pellentesque a nec quam. Pellentesque viverra, enim id auctor lacinia, turpis leo blandit odio, et luctus orci purus at nunc. Morbi eu sem id diam aliquam egestas. Vestibulum hendrerit lobortis est a convallis. Nunc quis quam odio, a eleifend dolor.
<p>Vivamus sollicitudin convallis diam, ut luctus ipsum viverra in. Morbi sit amet sapien urna, sit amet dictum nisi. Duis elit tortor, iaculis nec feugiat in, aliquam ut nisl. Nulla scelerisque sagittis aliquam. Ut tempus auctor tempus. Aliquam auctor vulputate volutpat. Praesent libero orci, volutpat a volutpat ac, vulputate at enim. Phasellus semper sem sed velit bibendum tempus. Aenean ut mauris nisl. Nam sit amet ipsum arcu. Phasellus pretium venenatis egestas. Ut in nulla sem. Proin aliquet facilisis lectus non consequat. Nullam vel magna et ligula viverra sagittis. Fusce in massa in quam vehicula convallis. Nullam placerat erat in nunc eleifend sed dapibus elit tempor.
<p>Aliquam in erat mi. Suspendisse dui dui, facilisis ac lobortis id, mollis quis enim. Aliquam erat volutpat. Sed in porta arcu. Maecenas aliquam congue sem, at scelerisque odio pharetra ac. In egestas rutrum cursus. Aliquam erat volutpat. Etiam a libero risus. Morbi odio eros, sollicitudin vel mattis vel, aliquet a elit. Suspendisse vel lectus risus, in iaculis ipsum. Etiam vitae justo nibh, non bibendum purus. Quisque mi erat, accumsan sit amet fringilla eu, rhoncus sed ipsum. Ut ac leo a nunc accumsan placerat at ut mauris. Aliquam imperdiet urna urna.
<div class="b"> child
</div>
</div>
</body>
<html>

In order to use the position attributes (top, right, bottom, left), the element's position CSS attribute must be relative, absolute, or fixed.
Also, the positions will be calculated relative to the element's offset parent. In order to make them relative to your .a element, it needs to have position: relative.
In your case, you need to write
.a {
background: gray;
height: 80px;
position: relative;
}
.b {
background: pink;
position: absolute;
right: 0px;
bottom: 0px;
}

.b needs position:relative; absolute would position it according to the window size, not to his parent.
there is also vertical-align which gives you a "true" bottom alignment but its only usable with table display properties like table-cell

The best way is using relative/absolute (as mentioned by a bunch of other answers). An alternative (if both the parent and child have known heights) is to set a top margin on the child:
.a {
background: gray;
height: 80px;
}
.b {
background: pink;
float: right;
height: 20px;
margin-top: 60px;
}

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex