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>
Related
I have been trying to make this 'About Us' tab flow in the column direction (horizontal) but it seems to always flow in the row direction (vertical) even if the media query condition is false.
#import url('https://fonts.googleapis.com/css2?family=Allura&family=Josefin+Sans:wght#300&display=swap');
body{
font-family: 'Josefin Sans', sans-serif;
text-align: center;
}
.container {
background-color:rgb(223, 223, 223) ;
padding: 20px;
}
h1 {
font-family: 'Allura', cursive;
}
#mvc {
display: flex;
}
.mvc-tabs{
background-color: #ff812c;
padding: 20px;
margin: 10px;
flex: 1 1 0;
}
.abt-us {
background-color:rgb(223, 223, 223) ;
}
#media screen and (max-width:600px) {
#mvc {
display: flex;
flex-wrap: wrap;
}
}
<div class="container">
<h1>About Us</h1>
<div class="mvc">
<div class="mvc-tabs">
<h3 class="heading">Our Vision</h3>
<p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed veritatis assumenda, consequuntur quasi expedita similique saepe et eius sit debitis optio alias placeat fugit nobis, perspiciatis nihil dolorum a nostrum!
Odit est voluptatum eaque quam laudantium alias fugit, corrupti, sunt reprehenderit nam numquam, voluptate suscipit eum velit sed consequatur voluptas tempore distinctio. Vel dolor repellendus sequi quasi veniam tempore vitae!</p>
</div>
<div class="mvc-tabs">
<h3 class="heading">Our Mision</h3>
<p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed veritatis assumenda, consequuntur quasi expedita similique saepe et eius sit debitis optio alias placeat fugit nobis, perspiciatis nihil dolorum a nostrum!
Odit est voluptatum eaque quam laudantium alias fugit, corrupti, sunt reprehenderit nam numquam, voluptate suscipit eum velit sed consequatur voluptas tempore distinctio. Vel dolor repellendus sequi quasi veniam tempore vitae!</p>
</div>
<div class="mvc-tabs">
<h3 class="heading">Our Core Values</h3>
<p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed veritatis assumenda, consequuntur quasi expedita similique saepe et eius sit debitis optio alias placeat fugit nobis, perspiciatis nihil dolorum a nostrum!
Odit est voluptatum eaque quam laudantium alias fugit, corrupti, sunt reprehenderit nam numquam, voluptate suscipit eum velit sed consequatur voluptas tempore distinctio. Vel dolor repellendus sequi quasi veniam tempore vitae!</p>
</div>
</div>
<br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed veritatis assumenda, consequuntur quasi expedita similique saepe et eius sit debitis optio alias placeat fugit nobis, perspiciatis nihil dolorum a nostrum!
Odit est voluptatum eaque quam laudantium alias fugit, corrupti, sunt reprehenderit nam numquam, voluptate suscipit eum velit sed consequatur voluptas tempore distinctio. Vel dolor repellendus sequi quasi veniam tempore vitae!</p>
</div>
It suddenly started to behave like this and I don't know why. I started to close all the ways with another CSS script to affect it but it didn't work.
You have
#mvc {
display: flex;
}
But you didnt have id="mvc" in your HTML. It should looks like this, and flex items will be in a row.
.mvc {
display: flex;
}
it looks like you are using # for mvc when it has the class "mvc". Also, flex-direction should be used but it's round the other way to how you'd expect.
.mvc {
display: flex;
flex-direction: row;
}
I have a requirement to Print a document in A4 sheet, in such a way that first part need to be printed in first half( i.e A5 sheet measurement) and that too with 90degree rotation and second part in next A5 sheet in normal way. I could do that by randomly fine tuning the margins.( This is having problem with different devices, Android phones and tab, where something working fine , is not working in other phone) I am sure there will be a right way to do that. here is my html code.Appreciate your help on this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 210mm X 296 mm */
.A5 {
height: 148mm;
border: 2px red solid;
}
.rotate {
transform: rotate(90deg);
border: 2px magenta solid;
margin-left: 50mm;
margin-top: -75mm;
min-height: 296mm;
max-width: 148mm;
}
</style>
</head>
<div class="A5">
<div class="rotate">
***START: Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias molestias possimus perferendis, quia eos quod laborum sapiente consequatur accusamus culpa iure quae maiores.
Nesciunt, dignissimos unde! Animi, voluptates ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusantium laborum neque in numquam sit similique dolores unde. Nulla, tenetur
reiciendis quam recusandae delectus dolore voluptas dolorem maxime quidem iure culpa iste sint similique ab veniam quis optio pariatur maiores eos! Beatae, repellat sed velit molestias ad
voluptates deleniti. Odio!***END**
</div>
</div>
<div class="A5">
***START: Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias molestias possimus perferendis, quia eos quod laborum sapiente consequatur accusamus culpa iure quae maiores. Nesciunt,
dignissimos unde! Animi, voluptates ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusantium laborum neque in numquam sit similique dolores unde. Nulla, tenetur reiciendis
quam recusandae delectus dolore voluptas dolorem maxime quidem iure culpa iste sint similique ab veniam quis optio pariatur maiores eos! Beatae, repellat sed velit molestias ad voluptates
deleniti. Odio!***END**
</div>
</html>
This is the solution I could use
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
:root {
--page-width: 210mm;
--page-height: 296mm;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.A5 {
margin: 0px;
border: 2px black solid;
/* Note: height and width interchanged because of rotation */
width: var(--page-height);
height: var(--page-width);
display: flex;
justify-content: center;
align-items: center;
}
.rotate {
transform: rotate(90deg);
height: var(--page-height);
width: var(--page-width);
border: 2px magenta solid;
}
.al {
align-items: flex-start;
}
</style>
</head>
<div class="A5">
<div class="rotate">***START: Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias molestias possimus perferendis, quia eos quod laborum sapiente consequatur accusamus culpa iure quae maiores. Nesciunt, dignissimos unde! Animi, voluptates ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusantium laborum neque in numquam sit similique dolores unde. Nulla, tenetur reiciendis quam recusandae delectus dolore voluptas dolorem maxime quidem iure culpa iste sint similique ab veniam quis optio pariatur maiores eos! Beatae, repellat sed velit molestias ad voluptates deleniti. Odio!***END**</div>
</div>
<div class="A5 al">***START: Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias molestias possimus perferendis, quia eos quod laborum sapiente consequatur accusamus culpa iure quae maiores. Nesciunt, dignissimos unde! Animi, voluptates ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusantium laborum neque in numquam sit similique dolores unde. Nulla, tenetur reiciendis quam recusandae delectus dolore voluptas dolorem maxime quidem iure culpa iste sint similique ab veniam quis optio pariatur maiores eos! Beatae, repellat sed velit molestias ad voluptates deleniti. Odio!***END**</div>
</html>
I'm currently working on a GUI-Layout which can be reused.
So I just want a basic header, mainContainer and a Footer.
I tried multiple things.
The problem is that I don't know how to define the hight of the properly.
html body{
margin: 0;
background-color: red;
overflow: hidden;
height: 100vh;
width: 100vw;
}
.header{
height: 64px;
min-height: 64px;
background-color: blue;
}
.mainContainer{
background-color: gray;
height: 100vh;
width: 100vw;
min-width: 800px;
min-height: 600px;
overflow: auto;
}
.footer{
height: 20px;
min-height: 20px;
background-color: green;
}
<div class="header">
</div>
<div class="mainContainer">
</div>
<div class="footer">
</div>
Header should 64px high. Footer should be 20px.
The mainContainer should then fill the rest of Website.
But if the size of the page gets too small then a scrollbar should appear but only inside the mainContainer.
You can use flexbox along with specifuing a height for the .mainContainer with calc function and also specifying an overflow: auto to allow scrolling only in that element.
Here's a demo :
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
flex-flow: column nowrap; /** elements are stacked vertically without line breaks **/
height: 100vh;
}
.header {
min-height: 64px;
height: 64px;
max-height: 64px;
background-color: red;
}
.footer {
height: 20px;
background-color: blue;
}
.mainContainer {
min-height: calc(100% - (64px + 20px)); /** height = 100% of parent height which is 100vh minus (header height + footer height) **/
overflow: auto; /** allow scrolling if needed **/
background-color: green;
}
<div class="wrapper">
<div class="header">HEADER</div>
<div class="mainContainer">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
</div>
<div class="footer">FOOTER</div>
</div>
Use calc css for this. check attach snippet
html body{
margin: 0;
background-color: red;
overflow: hidden;
height: 100vh;
width: 100vw;
}
.header{
height: 64px;
min-height: 64px;
background-color: blue;
}
.mainContainer{
background-color: gray;
height: calc(100vh - 64px - 20px);
width: 100vw;
min-width: 800px;
overflow: auto;
}
.footer{
height: 20px;
height: 20px;
background-color: green;
}
<div class="header">
</div>
<div class="mainContainer">
</div>
<div class="footer">
</div>
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!
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>