I see there are other questions with similar titles, but I have not found any satisfactory answers from them.
The problem is that .content needs to be 100% of the available view space inside .container, but when .content is set to 100% height, is taking up the space equivalent to 100% of the .container div causing the bottom most part of it to be hidden, even when scrolled to the bottom.
The reason is because the .header pushes it down inside of the .container div. I am aware of the CSS calc() function, but in this particular situation I don’t know what the exact height of the .header div will be, so need another option.
Here is the code:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 100%;
width: 100%;
}
.header {
padding: 10px;
background: dodgerblue;
width: 100%;
color: #fff;
}
.content {
width: 100%;
height: 100%;
overflow-y: scroll;
background: ivory;
}
.contentData {
padding: 20px;
margin: 20px;
border: 1px solid silver;
}<div class="container">
<div class="header">
Header Title
</div>
<div class="content">
<div class="contentData">
Donec mollis hendrerit risus.
Etiam imperdiet imperdiet orci.
Maecenas egestas arcu quis ligula mattis placerat.
Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
Donec mollis hendrerit risus.
</div>
<div class="contentData">
Donec mollis hendrerit risus.
Etiam imperdiet imperdiet orci.
Maecenas egestas arcu quis ligula mattis placerat.
Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
Donec mollis hendrerit risus.
</div>
<div class="contentData">
Donec mollis hendrerit risus.
Etiam imperdiet imperdiet orci.
Maecenas egestas arcu quis ligula mattis placerat.
Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
Donec mollis hendrerit risus.
</div>
<div class="contentData">
Donec mollis hendrerit risus.
Etiam imperdiet imperdiet orci.
Maecenas egestas arcu quis ligula mattis placerat.
Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
Donec mollis hendrerit risus.
</div>
<div class="contentData">
Donec mollis hendrerit risus.
Etiam imperdiet imperdiet orci.
Maecenas egestas arcu quis ligula mattis placerat.
Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
Donec mollis hendrerit risus.
</div>
<div class="contentData">
Donec mollis hendrerit risus.
Etiam imperdiet imperdiet orci.
Maecenas egestas arcu quis ligula mattis placerat.
Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
Donec mollis hendrerit risus.
</div>
<div class="contentData">
Donec mollis hendrerit risus.
Etiam imperdiet imperdiet orci.
Maecenas egestas arcu quis ligula mattis placerat.
Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
Donec mollis hendrerit risus.
</div>
<div class="contentData">
Donec mollis hendrerit risus.
Etiam imperdiet imperdiet orci.
Maecenas egestas arcu quis ligula mattis placerat.
Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
Donec mollis hendrerit risus.
</div>
<div class="contentData">
Donec mollis hendrerit risus.
Etiam imperdiet imperdiet orci.
Maecenas egestas arcu quis ligula mattis placerat.
Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
Donec mollis hendrerit risus.
</div>
<div class="contentData">
Donec mollis hendrerit risus.
Etiam imperdiet imperdiet orci.
Maecenas egestas arcu quis ligula mattis placerat.
Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
Donec mollis hendrerit risus.
</div>
<div class="contentData">
Donec mollis hendrerit risus.
Etiam imperdiet imperdiet orci.
Maecenas egestas arcu quis ligula mattis placerat.
Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
Donec mollis hendrerit risus.
</div>
<div class="contentData">
Donec mollis hendrerit risus.
Etiam imperdiet imperdiet orci.
Maecenas egestas arcu quis ligula mattis placerat.
Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
Donec mollis hendrerit risus.
</div>
<div class="contentData">
Donec mollis hendrerit risus.
Etiam imperdiet imperdiet orci.
Maecenas egestas arcu quis ligula mattis placerat.
Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
Donec mollis hendrerit risus.
</div>
</div>
</div>
2
Answers
Remove
width: 100%andheight: 100%fromhtml, body{}.I’m assuming it’s behaving like this as you’ve set
overflow-y: scrollas well, so the calculatons are a bit wonky.You may find it useful to define a percentage of height for your header section and then define an amount that will bring your page height to 97%. Anything more than 97% will force both Edge and Chrome to automatically try to compensate by adding a scrollbar for the page.
Depending on the design of your page, you might want to also add a footer. If so, subtract the height from the content section. Remember, you want to throttle the page height to 97% if you don’t want the browser to implement a second scrollbar for the page.
Regardless if you have two sections or three, play around with it until it visually looks balanced and appealing. This will give you the professional appearance you are looking for.