So I want my footer to be at the bottom of my body container. I have position fixed with a bottom: 0; but it still isn't inside the container. I also don't want any info to be pushed underneath my footer.
My goal is to have a footer be at the absolute bottom of the page but not cover anything.
body {
width: 90%;
max-width: 1100px;
min-height: 50vh;
margin: 15px auto;
background-color: white;
border: 3px solid black;
}
footer {
position: absolute;
bottom: 0;
background-color: #333;
width: 90%;
border: 3px solid black;
color: white;
}
<body>
<main>
<h1>
Welcome
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid expedita accusantium officia consequuntur corporis laudantium qui fuga cum, tempore sed.
</p>
<hr>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nihil architecto, placeat ducimus natus earum quidem consectetur? Sunt magnam, quas. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus praesentium voluptas, debitis aliquid,
voluptatem quidem asperiores ex rerum iste eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et vitae, nihil tenetur fuga voluptatibus debitis adipisci, minima eius voluptas id.
</p>
<footer>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fuga eius, velit, impedit adipisci doloribus eveniet reiciendis architecto consequuntur reprehenderit.
</p>
</footer>
</main>
</body>
There are many ways to approach this problem. Let me list out them.
Fixed footer with padding on the body.
Sticky footer, where it stays bottom always and if there's extra content, it gets pushed further at the end of the content.
Fixed Footer
This is an easier approach, considering the body has a position: relative; by default, all you need to do is, use a position: fixed; on the footer and push it to the end. Give a padding-bottom to the body of slightly above the height of the footer and that's all!
This will not disrupt any content.
body {
padding-bottom: 50px;
}
footer {
line-height: 30px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
background-color: #f5f5f5;
border-top: 2px solid #ccc;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, consectetur sequi. Natus sit iste nemo, dolor dolorum alias repellat, itaque molestiae delectus ipsum commodi perspiciatis architecto, officia at, ducimus. Dolore.</p>
<p>Modi provident officiis accusantium, quasi, quae temporibus soluta excepturi esse veniam sed, debitis nostrum harum? Esse enim dolorem soluta, nisi, voluptatibus cupiditate harum eaque voluptate. Rerum nihil, perspiciatis aliquam nesciunt.</p>
<p>Eum, vitae, praesentium. Consequuntur quae eaque sit quidem illo iste in libero magni natus eveniet quasi ab, velit id culpa tempore non quisquam dolorum doloremque officia, adipisci consectetur laboriosam expedita.</p>
<p>Qui sint, saepe, sapiente recusandae voluptatem iure quisquam. Quos numquam, ut deleniti provident minus dolore eaque, natus unde, voluptatum aperiam suscipit pariatur, cupiditate illum odio alias asperiores quo accusantium quod?</p>
<p>Fugiat harum sit, repudiandae magni cumque aliquid quam praesentium, atque quasi cupiditate nam voluptatum blanditiis. Odio reprehenderit veniam asperiores atque minus eveniet dolor doloribus, mollitia porro eius quod laboriosam dicta?</p>
<p>Quibusdam consequuntur ab aliquam et, a, corporis nisi natus eum placeat accusamus sint! Officiis vero doloremque sapiente, impedit debitis cupiditate repellendus ex commodi fugit sint aliquam molestiae suscipit, perferendis libero!</p>
<p>Tempora id adipisci tenetur aspernatur exercitationem nisi eveniet necessitatibus, itaque suscipit possimus sit minus ullam libero non animi incidunt excepturi accusamus totam molestias molestiae voluptates sed quos autem! Asperiores, optio!</p>
<p>Saepe ex dolorum sapiente eveniet alias et qui perspiciatis, culpa optio error ducimus, tenetur sed exercitationem ullam animi. Eligendi architecto nemo, reiciendis delectus nam quas, neque distinctio voluptatum dolor hic?</p>
<p>Deserunt, esse dolor, accusamus aut officiis illum, tempore aliquam saepe animi voluptas nam deleniti vitae architecto adipisci fugit. Sint ex architecto autem commodi quidem, minima porro obcaecati harum asperiores, itaque.</p>
<p>Error dolores incidunt ut nostrum perspiciatis, veniam. Consequuntur, temporibus dignissimos? Facere accusantium, vel officia, ut sequi nulla impedit alias ex dolores quos perferendis doloremque earum eum. Impedit blanditiis cupiditate, voluptatum!</p>
<p>Unde quae labore, dolor eos inventore porro qui. Eaque excepturi odio eveniet alias, voluptatibus, eius ipsum facere ad. Ullam, voluptas, inventore. Quo eius fugit nulla ipsum quibusdam odit, ullam tempora?</p>
<p>Aut omnis cumque exercitationem tempore harum odit repellendus reprehenderit quibusdam eligendi amet quam consequatur fugiat, cum enim aliquid debitis? Fuga a corporis nemo explicabo id animi nostrum, laudantium similique repellat.</p>
<p>Quasi sed deleniti nemo exercitationem, a beatae cum, vero ex similique omnis rerum perferendis facere tempora sit quaerat voluptatum nam qui temporibus! Numquam fugiat dolorum quia alias hic totam vitae!</p>
<p>Quidem, omnis corrupti tempora architecto. Officiis repudiandae provident ratione quod veritatis a dolor vel sit ullam ex error voluptates, alias itaque distinctio. Deleniti voluptatum, laudantium excepturi tempore. Aut, vero quisquam.</p>
<p>Repellendus rerum veritatis corporis! Exercitationem numquam temporibus asperiores nobis at quod est eius, similique tempore tenetur fugit eum libero beatae laborum. Dolores labore eos ullam reiciendis, repellendus neque vitae alias!</p>
<p>This is the last para!</p>
<footer>
<p>Copyright © This is Footer!</p>
</footer>
Sticky Footer
The purpose of a sticky footer is that it "sticks" to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is short, a sticky footer will still hang to the bottom of the browser window.
Please refer this: CSS - Sticky footer and Sticky Footer, Five Ways.
Just add position:relative to the body and absolute to the footer
body {
width: 90%;
max-width: 1100px;
min-height: 90vh;
margin: 15px auto;
background-color: white;
border: 3px solid black;
position:relative;
}
footer{
background:red;
position:absolute;
bottom:0;
}
You should place footer outside of the main tag.
<body>
<main>
<h1>
Welcome
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid expedita accusantium officia consequuntur corporis laudantium qui fuga cum, tempore sed.
</p>
<hr>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nihil architecto, placeat ducimus natus earum quidem consectetur? Sunt magnam, quas.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus praesentium voluptas, debitis aliquid, voluptatem quidem asperiores ex rerum iste eveniet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et vitae, nihil tenetur fuga voluptatibus debitis adipisci, minima eius voluptas id.
</p>
</main>
<footer>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fuga eius, velit, impedit adipisci doloribus eveniet reiciendis architecto consequuntur reprehenderit.
</p>
</footer>
</body>
Set position of footer either relative or fixed.
body {
width: 90%;
max-width: 1100px;
min-height: 50vh;
margin: 15px auto;
background-color: white;
border: 3px solid black;
}
footer {
position: fixed;
bottom: 0;
background-color: #333;
width: 90%;
border: 3px solid black;
color: white;
}
This would do the job!
Related
How to place image in column number two?
$(document).ready(function() {
$(window).trigger('resize');
});
$(window).resize(function() {
divH = $('div').height();
console.log(divH);
newH = divH - 105;
$('div img').first().css({
"height": newH + "px"
})
});
.invisible {
float: right;
}
.bottom {
float: right;
padding-left: 10px;
padding-top: 0px;
clear: right;
bottom: 10px;
}
div {
max-width: 700px;
margin: 0 auto;
margin-top: 4em;
text-align: justify;
}
p {
text-align: justify;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="column-count: 2;">
<img src="http://placekitten.com/100" class="invisible" width="0" height="206"></img>
<img src="http://placekitten.com/100" class="bottom" width="100" height="100"></img>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem aspernatur ut impedit, quod, similique obcaecati velit sit distinctio ab, vitae labore, quibusdam excepturi iure maxime nihil tenetur dicta. Iure, dolor. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Possimus adipisci, porro vitae perferendis similique ullam sint, aut labore! Similique rerum inventore dolor sint quae cupiditate repellat debitis saepe quia laboriosam! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Perferendis autem in quaerat itaque, architecto deserunt inventore officiis laborum commodi, corporis quam dolorum labore optio earum unde adipisci impedit, sed sint! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut voluptatem rem
in mollitia voluptatum laboriosam expedita, ut tempora blanditiis et tempore sapiente minima consequatur facere voluptatibus quibusdam ad sed velit vero nesciunt ipsa. Possimus impedit labore non cumque, culpa nam. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Optio numquam, temporibus velit quas quod, aliquid iure, possimus molestiae laboriosam perspiciatis a iusto dignissimos magni suscipit officiis nesciunt. Sapiente corporis optio mollitia, enim temporibus dolore amet magni, at hic laboriosam
atque beatae, quas eum, laudantium. Distinctio maxime commodi sunt quis soluta sequi labore ratione ad atque saepe cupiditate tempora ab numquam consectetur tenetur voluptatem inventore porro, ut obcaecati magnam culpa. Architecto consequuntur recusandae
ut aperiam ullam harum officia maiores cumque cupiditate id. Modi, labore id dignissimos ducimus laborum temporibus pariatur, quae reprehenderit at tenetur mollitia, recusandae quas commodi quidem soluta repellat.
</div>
What about moving html tag to the end of paragraph?
$(document).ready(function() {
$(window).trigger('resize');
});
$(window).resize(function() {
divH = $('div').height();
console.log(divH);
newH = divH - 105;
$('div img').first().css({
"height": newH + "px"
})
});
.invisible {
float: right;
}
.bottom {
float: right;
padding-left: 10px;
padding-top: 0px;
}
div {
max-width: 700px;
margin: 0 auto;
margin-top: 4em;
text-align: justify;
}
p {
text-align: justify;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="column-count: 2;">
<img src="http://placekitten.com/100" class="invisible" width="0" height="206"></img>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem aspernatur ut impedit, quod, similique obcaecati velit sit distinctio ab, vitae labore, quibusdam excepturi iure maxime nihil tenetur dicta. Iure, dolor. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Possimus adipisci, porro vitae perferendis similique ullam sint, aut labore! Similique rerum inventore dolor sint quae cupiditate repellat debitis saepe quia laboriosam! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Perferendis autem in quaerat itaque, architecto deserunt inventore officiis laborum commodi, corporis quam dolorum labore optio earum unde adipisci impedit, sed sint! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut voluptatem rem
in mollitia voluptatum laboriosam expedita, ut tempora blanditiis et tempore sapiente minima consequatur facere voluptatibus quibusdam ad sed velit vero nesciunt ipsa. Possimus impedit labore non cumque, culpa nam. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Optio numquam, temporibus velit quas quod, aliquid iure, possimus molestiae laboriosam perspiciatis a iusto dignissimos magni suscipit officiis nesciunt. Sapiente corporis optio mollitia, enim temporibus dolore amet magni, at hic laboriosam
atque beatae, quas eum, laudantium. Distinctio maxime commodi sunt quis soluta sequi labore ratione ad atque saepe cupiditate tempora ab numquam consectetur tenetur voluptatem inventore porro, ut obcaecati magnam culpa. Architecto consequuntur recusandae
ut aperiam ullam harum officia maiores cumque cupiditate id.
Modi, labore id dignissimos ducimus laborum temporibus pariatur, quae reprehenderit at tenetur mollitia, recusandae quas commodi quidem soluta repellat.
<img src="http://placekitten.com/100" class="bottom" width="100" height="100"></img>
</div>
I made a website but I want to improve the layout.
I wrapped all the div elements from the website inside <div class="wrapper">. I want to keep the height of div wrapper 95% by default. The problem is that if I add text to div element which is below, it will exit outside div. How to keep "div wrapper" at stable height even if other div below is empty? and later when I add text it should extend automatically so I could scroll it in the browser. Look at the picture.
<style>
body {
background-color: black;
}
.wrapper {
background-color: blue;
width: 90%;
margin: 0 auto;
}
.menu {
/* background-color: red;*/
width: 800px;
height: 100px;
}
.maintext {
border: dashed 2px black;
color: white;
}
</style>
and here's the HTML:
</head>
<body>
<div class="wrapper">
<div class="menu">
<h1>This is my little menu</h1>
</div>
<div class="maintext">
<h2>You can write here what you want</h2>
<p>Ok I will start now
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam rem officia dolor dicta. Voluptatum, sunt! Atque animi cupiditate quasi. Modi accusamus consequuntur esse quis suscipit, velit obcaecati cumque reprehenderit perferendis.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque odio tenetur, rem dolorum nesciunt voluptas quia ex alias corrupti, ullam consequatur distinctio cupiditate voluptate praesentium. Rem perspiciatis totam cumque officia.
nde amet saepe optio obcaecati blanditiis sed sequi nostrum quaerat voluptatibus, est libero culpa nemo! Quaerat, eaque.
</p>
</p>
</div>
</div>
</body>
</html>
you can use overflow: auto property on your wrapper with fixed height if you need to scroll vertically
body {
background-color: black;
}
.wrapper {
background-color: blue;
/* width: 90%; */
height:400px; /*+++*/
overflow: auto; /*+++*/
margin: 0 auto;
}
.menu {
/* background-color: red;*/
width: 800px;
height: 100px;
}
.maintext {
border: dashed 2px black;
color: white;
}
<div class="wrapper">
<div class="menu">
<h1>This is my little menu</h1>
</div>
<div class="maintext">
<h2>You can write here what you want</h2>
<p>Ok I will start now
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam rem officia dolor dicta. Voluptatum, sunt! Atque animi cupiditate quasi. Modi accusamus consequuntur esse quis suscipit, velit obcaecati cumque reprehenderit perferendis.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque odio tenetur, rem dolorum nesciunt voluptas quia ex alias corrupti, ullam consequatur distinctio cupiditate voluptate praesentium. Rem perspiciatis totam cumque officia.
nde amet saepe optio obcaecati blanditiis sed sequi nostrum quaerat voluptatibus, est libero culpa nemo! Quaerat, eaque.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis ratione, amet doloremque nulla iste atque reiciendis, autem, delectus fugiat sequi beatae praesentium molestias minima. Nostrum, consectetur, possimus provident facere, iusto officia tempore esse sapiente obcaecati quis dolorum fugiat blanditiis! Minus, sunt ex soluta eveniet odio sit nobis vero dolorem pariatur.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente repellat placeat dignissimos provident commodi est quasi dolorem optio iusto officia earum facilis quae, magnam expedita mollitia vitae consectetur laborum quas in nam temporibus repudiandae fugit! A saepe obcaecati sapiente ullam ut labore odio. Voluptates quaerat, natus aspernatur vero debitis commodi perferendis laboriosam ut est sit nisi iste quisquam nostrum nam dolor exercitationem quos ipsum molestias eius veritatis fugit dolorem aliquid voluptate! Nam corporis fugiat nulla magnam, cupiditate maxime dolorem facilis quaerat laboriosam aspernatur illum in possimus doloribus voluptas porro voluptatem soluta, adipisci inventore, et commodi est odit nisi delectus? Rerum?
</p>
</p>
</div>
</div>
I have a fixed-position element (red bar in this case) at top of the viewport. This element is positioned fixed so as it make it non-scrollable as required. It can have a dynamic height.
<div class="bar" id="bar">
</div>
.bar {
height: 20px;
background: red;
position: fixed;
top: 0;
width: 100%;
}
Below that element, there is a button that will toggle the red bar element's visibility. This button should have a top space/ margin of a specific amount say 10px from the red bar when the red bar is displayed and the top space of 10px should be there from the window when the red bar is hidden.
This button should be scrollable.
<div class="btn-wrapper">
<button onclick="toggleBar()">Toggle Bar</button>
</div>
.btn-wrapper {
margin-top: 10px;
}
Below the above button, there is a logo, which should have the same consistent space from the window top whether the red bar is present or not. The logo should be scrollable.
I have almost achieved these requirements except for one thing. I am not able to shift the button down when the red bar is present with the required margin as the red bar is positioned fixed. How this can be achieved?
Here is the codepen
I have added the requirements comments in the codepen's HTML for the elements as well.
Note: The codepen/code which I have provided is for demo purposes. I am working on this for a React app and would prefer a pure CSS way for styling instead of JavaScript if possible.
You should to change margin-top as you're doing display block/none.
Just id to button:
<button id="button" onclick="toggleBar()">Toggle Bar</button>
and slightly modify javascript:
const bar = document.getElementById("bar");
const button = document.getElementById("button");
bar.style.display = "none";
function toggleBar() {
if (bar.style.display === "none") {
bar.style.display = "block";
button.style.marginTop = "10px";
} else {
bar.style.display = "none";
button.style.marginTop = "0px";
}
}
Working codepen
use getBoundingClientRect().height
apply to your 1st element
button.style.marginTop = bar.getBoundingClientRect().height+'px';
Your code should
function toggleBar() {
if (bar.style.display === "none") {
bar.style.display = "block";
} else {
bar.style.display = "none";
}
button.style.marginTop = bar.getBoundingClientRect().height+'px';<------this single line enough
}
toggle simplified
bar.style.display=bar.style.display==='none'?'block':'none';
simplified code:
function toggleBar() {
bar.style.display=bar.style.display==='none'?'block':'none';
button.style.marginTop = bar.getBoundingClientRect().height+'px';<------this single line enough
}
The requirements are:
to move the button down 20px when the bar is showing without moving
anything else
to toggle the bar from display block to display none on alternate clicks of the button
There are two things that help here:
making use of the JS toggle function on an element's classList
CSS transform translate which will move an element without altering the layout of anything else
The JS is reduced to:
function toggleBar() {
document.body.classList.toggle("hidebar");
}
and the CSS has this added:
.hidebar div.bar {
display: none;
}
body:not(.hidebar) div.btn-wrapper {
transform: translateY(20px);
}
You can use a different ancestor which is common to both bar and button if you prefer. body is just easy to use.
function toggleBar() {
document.body.classList.toggle("hidebar");
}
body {
padding: 0;
margin: 0;
}
.bar {
height: 20px;
background: red;
position: fixed;
top: 0;
width: 100%;
}
.btn-wrapper {
margin-top: 10px;
}
.logo {
border: 1px solid;
margin-top: 20px;
}
.hidebar div.bar {
display: none;
}
body:not(.hidebar) div.btn-wrapper {
transform: translateY(20px);
}
<!--
This bar should appear/hide conditionally on click Toggle Bar button.
It will be always on top and not scrollable
-->
<div class="bar" id="bar">
</div>
<!--
This should have top space of 10px from red bar when red bar is displayed and when red bar is hidden, the top space of 10px should be there from window.
This should be scrollable
-->
<div class="btn-wrapper">
<button onclick="toggleBar();">Toggle Bar</button>
</div>
<!--
This should have same consistent space from window top whether the red bar is present or not.
This should be scrollable.
-->
<div class="logo">
Logo
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
</div>
You can try changing position: fixed; to position: sticky; on your .bar class CSS code. After that, to prevent the logo from moving, add the following CSS code:
.bar[style='display: block;'] ~ .logo {
margin-top: 0px;
}
This should remove the margin from your logo upon detecting a visible .bar element before it.
Doing this with only CSS is a bit tricky. But, luckily, position: fixed gives a way out.
Just because it's in the top doesn't mean it has to be the first element.
body {
padding: 0;
margin: 0;
}
#top_wrapper {
min-height: 95px;
}
#togglebutton {
position: absolute;
margin: 0;
padding: 0;
width: 0;
height: 0;
visibility: hidden;
}
#togglebutton_label {
display: inline-block;
margin-top: 30px;
}
#togglebutton_label button {
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
.bar {
height: 20px;
background: red;
position: fixed;
top: 0;
width: 100%;
}
.logo {
border: 1px solid;
margin-top: 20px;
}
#togglebutton:checked ~ #bar {
display: none;
}
#togglebutton:checked + #togglebutton_label {
margin-top: 10px;
}
<div id="top_wrapper">
<input type="checkbox" id="togglebutton">
<label id="togglebutton_label" for="togglebutton">
<button>Toggle Bar</button>
</label>
<div class="logo">
Logo
</div>
<div class="bar" id="bar"></div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
</div>
I wrapped the bar, the button and the logo in a div, where the button is first.
The button is in a label that's connected to an invisible checkbox.
Clicking the button sets the checkbox and then a selector can affect the following bar element.
I want to stick the last of the link on the sidebar to the bottom, like this.
It is not difficult, while the height sidebar and main content are equal. If the content great that one screen last link of the sidebar is gone. I test it on https://codepen.io/deni5n/pen/QWKRmMj
I was trying to add position fixed, freeze height to 100vh, and z-index to the sidebar. It is worked, but if add many links, the last link is gone.
html
<div class="container">
<div class="sidebar">
<div class="link-one">link One</div>
<div class="link-two">link Two</div>
<div class="link-three">link Three</div>
<div class="link-footer">link Footer</div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
</div>
</div>
css
html{
heigth: 100%;
}
.container{
display: flex;
width: 100%;
}
.sidebar{
min-width: 200px;
max-width: 200px;
color: #ccc;
background: #313a46;
padding: 10px 0 0 10px;
display: flex;
flex-direction: column;
}
.sidebar .link-one{
padding: 10px 0;
}
.sidebar [class^="link-"]:not(:first-of-type){
padding: 10px 0;
}
.sidebar .link-footer{
margin-top: auto;
color: red;
}
.content{
display: flex;
width: 100%;
min-height: 100vh;
min-width: 0;
flex-direction: column;
padding: 10px
}
.content p:not(:first-of-type){
padding-top: 10px;
}
If you know, how to do this, please tell me
UPDATE
I still don’t know how to do it in html/css. However, since my NuxtJs project, I added to the class sidebar :style = "{'min-height': minHeight}, two hooks:
created() {
this.handleDebouncedScroll = debounce(this.handleScroll, 100)
window.addEventListener('scroll', this.handleDebouncedScroll)
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleDebouncedScroll)
},
and methods:
handleScroll() {
this.minHeight = `calc(100vh + ${window.scrollY}px)`
},
it's all. link-footer is now always at the bottom of the screen
Try to use the justify-content proprierty.
In the general, this propierty controls the spacing of the elements. So, basicly you need to agroup the Link One and Link Two in a div and in the father div, use a justify-content: space-between;.
.father {
display: flex;
height: 200px;
flex-direction: column;
border: 1px solid black;
justify-content: space-between;
}
<div class="father">
<div class="header">
<p>Content 1</p>
<p>Content 2</p>
<div>
Another Content
</div>
</div>
<div class="footer">
Last content
</div>
</div>
change your following piece of code:
<div class="sidebar">
<div class="link-one">link One</div>
<div class="link-two">link Two</div>
<div class="link-three">link Three</div>
<div class="link-footer">link Footer</div>
</div>
to look like following:
<div class="sidebar">
<div class="sidebar-main">
<div class="link-one">link One</div>
<div class="link-two">link Two</div>
<div class="link-three">link Three</div>
</div>
<div class="sidebar-footer">
<div class="link-footer">link Footer</div>
</div>
</div>
and in the css, add the following styles:
.sidebar{
min-width: 200px;
max-width: 200px;
color: #ccc;
position: fixed; //change over here
height: 100vh; //change over here
background: #313a46;
padding: 10px 0 0 10px;
display: flex;
flex-direction: column; //change over here
justify-content:space-between ; //change over here
}
.content{
display: flex;
width: 100%;
min-height: 100vh;
min-width: 0;
flex-direction: column;
padding: 10px;
margin-left: 220px; //change over here
}
You should use this.
Link: https://codepen.io/en0ndev/pen/xxENzmg
body {
margin:0;
}
.container{
display: block;
width: 100%;
margin:0;
}
.sidebar{
max-width: 200px;
min-width: 200px;
color: #ccc;
background: #313a46;
padding: 10px 0 0 10px;
display: block;
flex-direction: column;
position:fixed;
height:100%;
}
.sidebar .link-one{
padding: 10px 0;
}
.sidebar [class^="link-"]:not(:first-of-type){
padding: 10px 0;
}
.sidebar .link-footer{
color: red;
}
.content{
margin-left:210px;
display: block;
min-height: 100vh;
min-width: 0;
flex-direction: column;
padding: 10px
}
.content p:not(:first-of-type){
padding-top: 10px;
}
.goTop {
position:absolute;
top:0;
}
.goBottom {
position:absolute;
bottom:0;
}
<div class="container">
<div class="sidebar">
<div class="goTop">
<div class="link-one">link One</div>
<div class="link-two">link Two</div>
</div>
<div class="goBottom">
<div class="link-three">link Three</div>
<div class="link-footer">link Footer</div>
</div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
</div>
</div>
I have absolute positioned block which should grow down if its content growth but not go outside of the screen (create scroller on the inner content block).
How to do this?
UPD: header block can also has variable height, so I can't use its fixed height. But I don't want it to have scroll.
(Please, update the title of the question, I'm not sure about it)
.wrapper {
width: 200px;
border: 4px solid #000;
position: absolute;
top: 10px;
left: 10px;
}
.header {
height: 100px;
margin-bottom: 10px;
background-color: pink;
}
.article {
background-color: silver;
overflow: auto;
position: relative;
width: 100%;
}
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, eligendi amet a dolores laboriosam illo temporibus voluptatibus. Inventore voluptate, tenetur nobis architecto aut, veritatis suscipit itaque corrupti, optio totam sapiente.</div>
<div class="wrapper">
<div class="header">footer</div>
<div class="article">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea fugit voluptatibus ipsum molestiae incidunt voluptates in accusamus minus iure amet, voluptatum neque laborum est ducimus eius illo eligendi veritatis voluptas!</div>
<div>Fugiat dolores blanditiis illo, odio eligendi quam dolor odit asperiores dignissimos reiciendis cupiditate. Maiores, soluta. Possimus error nam ipsum eaque dolor voluptatibus autem, animi quas, sed, eveniet vitae repellat unde!</div>
<div>Officia nemo quas at facere eum esse cum aliquid quibusdam, magni quasi. Voluptas, ad odit possimus accusantium dolorem fuga voluptatum vero consequuntur ullam itaque laborum aut reprehenderit, facilis, commodi unde.</div>
<div>Iusto saepe quaerat corporis. Exercitationem ipsum aliquam nisi nemo dolor libero at quam dolorum rerum, praesentium, sequi fugit, eius mollitia provident inventore recusandae. Atque nesciunt suscipit rem tempora harum quos.</div>
</div>
</div>
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam quos molestiae soluta laborum amet explicabo magnam. Consectetur quod quae ex commodi vel, aspernatur repellat sunt sequi reiciendis, qui, a temporibus.</div>
I think flex-box could help you here:
.wrapper {
width: 200px;
border: 4px solid #000;
position: absolute;
top: 10px;
left: 10px;
display: flex;
flex-direction: column;
max-height: calc(100vh - 20px); /* screen height - 10px margin top and bottom */
}
.header {
background-color: pink;
flex-grow: 1;
}
.article {
background-color: silver;
overflow: auto;
width: 100%;
flex-grow: 1; /* allow to grow as needed */
}
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, eligendi amet a dolores laboriosam illo temporibus voluptatibus. Inventore voluptate, tenetur nobis architecto aut, veritatis suscipit itaque corrupti, optio totam sapiente.</div>
<div class="wrapper">
<div class="header">footer</div>
<div class="article">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea fugit voluptatibus ipsum molestiae incidunt voluptates in accusamus minus iure amet, voluptatum neque laborum est ducimus eius illo eligendi veritatis voluptas!</div>
<div>Fugiat dolores blanditiis illo, odio eligendi quam dolor odit asperiores dignissimos reiciendis cupiditate. Maiores, soluta. Possimus error nam ipsum eaque dolor voluptatibus autem, animi quas, sed, eveniet vitae repellat unde!</div>
<div>Officia nemo quas at facere eum esse cum aliquid quibusdam, magni quasi. Voluptas, ad odit possimus accusantium dolorem fuga voluptatum vero consequuntur ullam itaque laborum aut reprehenderit, facilis, commodi unde.</div>
<div>Iusto saepe quaerat corporis. Exercitationem ipsum aliquam nisi nemo dolor libero at quam dolorum rerum, praesentium, sequi fugit, eius mollitia provident inventore recusandae. Atque nesciunt suscipit rem tempora harum quos.</div>
</div>
</div>
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam quos molestiae soluta laborum amet explicabo magnam. Consectetur quod quae ex commodi vel, aspernatur repellat sunt sequi reiciendis, qui, a temporibus.</div>
Here is a version with less text to show how it would behave:
.wrapper {
width: 200px;
border: 4px solid #000;
position: absolute;
top: 10px;
left: 10px;
display: flex;
flex-direction: column;
max-height: calc(100vh - 20px);
}
.header {
background-color: pink;
flex-grow: 0;
}
.article {
background-color: silver;
overflow: auto;
width: 100%;
flex-grow: 1;
}
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, eligendi amet a dolores laboriosam illo temporibus voluptatibus. Inventore voluptate, tenetur nobis architecto aut, veritatis suscipit itaque corrupti, optio totam sapiente.</div>
<div class="wrapper">
<div class="header">footer</div>
<div class="article">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea fugit voluptatibus ipsum molestiae incidunt voluptates in accusamus </div>
</div>
</div>
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam quos molestiae soluta laborum amet explicabo magnam. Consectetur quod quae ex commodi vel, aspernatur repellat sunt sequi reiciendis, qui, a temporibus.</div>