This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 1 year ago.
First, see the image.
How can I remove the extra space? I want to set the height of the box as per the content. How can I do it in Grid?
See the following code.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
background-color: #ddd;
padding: 10px;
/* Grid CSS */
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.container div {
border: 1px solid #000;
padding: 15px;
}
<div class="container">
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias ipsum consectetur quod rem dolores? Dolorem, debitis quos. Illo aliquam hic cupiditate nemo temporibus quibusdam commodi dicta quisquam, saepe laboriosam tempore minus et rem architecto
modi voluptatibus neque! Porro quibusdam itaque praesentium maxime rem deleniti est, sed dolorum reprehenderit pariatur provident.</div>
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum accusantium quos dolorem esse pariatur! Illo harum voluptatibus labore obcaecati cum?</div>
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias ipsum consectetur quod rem dolores? Dolorem, debitis quos. Illo aliquam hic cupiditate nemo temporibus quibusdam commodi dicta quisquam, saepe laboriosam tempore minus et rem architecto
modi voluptatibus neque! Porro quibusdam itaque praesentium maxime rem deleniti est, sed dolorum reprehenderit pariatur provident.</div>
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum accusantium quos dolorem esse pariatur! Illo harum voluptatibus labore obcaecati cum?</div>
</div>
I want to fill the bottom space of the top box with the below box. Is it possible in Grid?
You can use the align-items property:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
background-color: #ddd;
padding: 10px;
/* Grid CSS */
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
align-items: start;
}
.container div {
border: 1px solid #000;
padding: 15px;
}
<div class="container">
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias ipsum consectetur quod rem dolores? Dolorem, debitis quos. Illo aliquam hic cupiditate nemo temporibus quibusdam commodi dicta quisquam, saepe laboriosam tempore minus et rem architecto
modi voluptatibus neque! Porro quibusdam itaque praesentium maxime rem deleniti est, sed dolorum reprehenderit pariatur provident.</div>
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum accusantium quos dolorem esse pariatur! Illo harum voluptatibus labore obcaecati cum?</div>
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias ipsum consectetur quod rem dolores? Dolorem, debitis quos. Illo aliquam hic cupiditate nemo temporibus quibusdam commodi dicta quisquam, saepe laboriosam tempore minus et rem architecto
modi voluptatibus neque! Porro quibusdam itaque praesentium maxime rem deleniti est, sed dolorum reprehenderit pariatur provident.</div>
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum accusantium quos dolorem esse pariatur! Illo harum voluptatibus labore obcaecati cum?</div>
</div>
Related
I am currently goofing around making a website. I want to make a description div in the center of the screen that will stay centered, and when the screen rezises not stretch up and intersect or overlap other elements. How would I go about this? For further demonstration I will post a video below of what I don't want.
https://imgur.com/a/pboUcAB
* {
margin: 0;
padding: 0;
--link-easing-time: 0.15s;
}
body {
display: flex;
flex-direction: column;
}
.overview {
background-image: url(/Images/1.jpeg);
background-size: cover;
width: 100%;
height: 25em;
display: flex;
justify-content: center;
align-items: center;
margin-top: 5em;
}
.overview div {
width: 50%;
background-color: rgb(30,30,30);
border-radius: 1em;
display: flex;
flex-wrap: nowrap;
flex-basis: initial;
justify-content: center;
align-items: center;
flex-direction: column;
}
.overview p {
margin: 1em;
color: rgba(255,255,255,0.9);
}
.overview a {
margin: 1em;
}
<body>
<div class="overview">
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, inventore sint, nam sunt nihil ipsam quia accusantium praesentium voluptates, fugiat dolorum rerum officia. Nisi aperiam cumque totam molestias earum commodi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error consectetur dolorem magnam nobis officiis minima facilis vel corrupti totam fugiat tempora alias libero accusamus illo animi delectus, ut nostrum consequatur.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit excepturi, modi repudiandae ad itaque adipisci ratione a sed, voluptatem, quas aliquam dolore commodi eos possimus dignissimos nobis rerum enim tenetur?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam inventore unde sequi laudantium sapiente, quisquam necessitatibus officia eum autem nihil exercitationem, magni corporis fuga nulla eligendi! Provident explicabo recusandae earum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis alias molestiae impedit dolores consectetur delectus voluptas saepe nam blanditiis dolorum. Inventore omnis dicta consequatur mollitia magnam! Cum corrupti aspernatur sapiente.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, laborum non. Fugit id inventore, sequi minima explicabo optio at ut, repellat ipsam quia nemo! Libero quidem eaque obcaecati tenetur dolor.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi exercitationem sint necessitatibus perferendis tempore quisquam earum ipsa minima, obcaecati dolore. Ut, unde. Mollitia animi assumenda facilis quis dolores provident asperiores!
</p>
<a href="" class="hover-effect">
Learn More
</a>
</div>
</div>
</body>
I attempted messing with flex-basis:initial and flex-wrap: nowrap;.
So I re wrote the code and what conclusion I reached was that: the <p> tag was effecting the parent div size so once I gave the p tag a height and width containment and set the overflow to hidden it worked great!
I'm doing the front-end on my website. I included a couple divs in my mark-up. which show on the live previewer server on vscode but when I open the very same in page in a browser these divs don't show and I don't know why cause I have not hidden them. I've set CSS but still not nothing. what's confusing is that it shows in the code editor but not on the browser.
.ad-2 {
position: relative;
top: 0px;
left: 0px;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.ad-3 {
position: absolute;
top: 0px;
left: 0px;
background-color: #010f1c;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.ad-4 {
position: absolute;
top: 201px;
left: 0px;
background-color: blue;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.ad-5 {
position: absolute;
top: 0px;
right: 0px;
background-color: chartreuse;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.ad-6 {
position: absolute;
top: 201px;
right: 0px;
background-color: chocolate;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
<div class="paragraph">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt distinctio quibusdam eum, pariatur blanditiis animi totam natus reprehenderit suscipit ut accusantium enim placeat. Hic libero esse inventore voluptatibus. Voluptas, ipsum. Lorem ipsum
dolor sit amet consectetur, adipisicing elit. Debitis, accusantium. Laboriosam saepe, doloremque cupiditate voluptatum cumque adipisci perspiciatis quas tenetur, assumenda autem ad facilis ipsum aspernatur! Laboriosam accusamus minima ducimus? Lorem
ipsum dolor sit amet consectetur adipisicing elit. Voluptate excepturi, aspernatur quasi distinctio temporibus obcaecati fugit porro? Aliquam, architecto illo sequi harum accusamus voluptatibus quasi laboriosam tempore deserunt consequuntur dolorum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, dicta animi! Sed doloremque voluptatibus libero optio. Itaque, debitis autem? Nam repellendus commodi laborum? Fugit praesentium minus necessitatibus, modi exercitationem quae.
</p>
<br>
<div class="ad-1"></div>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, amet sapiente, quos labore commodi cum quas doloribus nisi minus voluptas repellat blanditiis tenetur, voluptate recusandae facere modi animi et nobis. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Eius quibusdam voluptas omnis dolor voluptatibus illum, debitis quas facere rem aliquam accusamus optio voluptatum, explicabo quisquam quod laudantium unde veritatis reprehenderit! Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Debitis similique beatae incidunt distinctio qui libero modi expedita molestias, illum delectus vero animi consectetur officiis unde ullam cum aspernatur id enim. Lorem, ipsum dolor sit amet consectetur adipisicing elit. A, aliquam doloribus
voluptate dignissimos cumque nisi deleniti! Facilis rerum quo, laudantium vel tenetur, numquam architecto cupiditate fuga, explicabo voluptatem at consequuntur. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit laboriosam ullam quos veritatis
pariatur amet expedita deserunt nobis voluptatibus, eos, molestias deleniti quas. Necessitatibus odit alias nihil ratione, modi exercitationem?
</p>
<br>
<div class="ad-2"></div>
<br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus architecto laboriosam sapiente, est eligendi amet soluta! Eius eaque distinctio aperiam voluptatem illo officiis laudantium suscipit praesentium? Aliquam excepturi laboriosam officiis?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic incidunt quo fugiat numquam enim nisi voluptas voluptates, esse mollitia, atque animi debitis illo nulla tempore provident quaerat fugit libero nemo. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Dolores nobis officiis tempore provident vero ex ipsum dignissimos reiciendis, consequuntur ipsam perspiciatis reprehenderit adipisci praesentium. Assumenda autem ex quas cupiditate suscipit. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quaerat laudantium nisi accusantium exercitationem in culpa dolor laborum molestiae impedit commodi. Error debitis mollitia esse consequatur ex sunt, corrupti praesentium libero! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Iure hic dolore tenetur iusto dolorum debitis atque facilis ipsum delectus provident, itaque molestias voluptate commodi ex! Quia tempore possimus fuga veniam!
</p>
<br>
<div class="ad-3"></div>
<div class="ad-4"></div>
<div class="ad-5"></div>
<div class="ad-6"></div>
</div>
as you can see all the ad divs have css set on them but they visible on the browser. what could be causing this.
After playing with this for a while, it seems like Chrome actually interprets the class names (ex, ad-1) as something weird. Change the names of each class.
.number2
{
position: relative;
top: 0;
left: 0;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.number3
{
position: absolute;
top: 0;
left: 0;
background-color: #010f1c;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.number4 {
position: absolute;
top: 201px;
left: 0;
background-color: blue;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.number5
{
position: absolute;
top: 0;
right: 0;
background-color: chartreuse;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.number6
{
position: absolute;
top: 201px;
right: 0;
background-color: chocolate;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
<div class="paragraph">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt distinctio quibusdam eum, pariatur blanditiis animi totam natus reprehenderit suscipit ut accusantium enim placeat. Hic libero esse inventore voluptatibus. Voluptas, ipsum.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis, accusantium. Laboriosam saepe, doloremque cupiditate voluptatum cumque adipisci perspiciatis quas tenetur, assumenda autem ad facilis ipsum aspernatur! Laboriosam accusamus minima ducimus?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate excepturi, aspernatur quasi distinctio temporibus obcaecati fugit porro? Aliquam, architecto illo sequi harum accusamus voluptatibus quasi laboriosam tempore deserunt consequuntur dolorum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, dicta animi! Sed doloremque voluptatibus libero optio. Itaque, debitis autem? Nam repellendus commodi laborum? Fugit praesentium minus necessitatibus, modi exercitationem quae.
</p>
<br>
<div class="number1"></div>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, amet sapiente, quos labore commodi cum quas doloribus nisi minus voluptas repellat blanditiis tenetur, voluptate recusandae facere modi animi et nobis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius quibusdam voluptas omnis dolor voluptatibus illum, debitis quas facere rem aliquam accusamus optio voluptatum, explicabo quisquam quod laudantium unde veritatis reprehenderit!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis similique beatae incidunt distinctio qui libero modi expedita molestias, illum delectus vero animi consectetur officiis unde ullam cum aspernatur id enim.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. A, aliquam doloribus voluptate dignissimos cumque nisi deleniti! Facilis rerum quo, laudantium vel tenetur, numquam architecto cupiditate fuga, explicabo voluptatem at consequuntur.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit laboriosam ullam quos veritatis pariatur amet expedita deserunt nobis voluptatibus, eos, molestias deleniti quas. Necessitatibus odit alias nihil ratione, modi exercitationem?
</p>
<br>
<div class="number2"></div>
<br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus architecto laboriosam sapiente, est eligendi amet soluta! Eius eaque distinctio aperiam voluptatem illo officiis laudantium suscipit praesentium? Aliquam excepturi laboriosam officiis?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic incidunt quo fugiat numquam enim nisi voluptas voluptates, esse mollitia, atque animi debitis illo nulla tempore provident quaerat fugit libero nemo.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores nobis officiis tempore provident vero ex ipsum dignissimos reiciendis, consequuntur ipsam perspiciatis reprehenderit adipisci praesentium. Assumenda autem ex quas cupiditate suscipit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat laudantium nisi accusantium exercitationem in culpa dolor laborum molestiae impedit commodi. Error debitis mollitia esse consequatur ex sunt, corrupti praesentium libero!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure hic dolore tenetur iusto dolorum debitis atque facilis ipsum delectus provident, itaque molestias voluptate commodi ex! Quia tempore possimus fuga veniam!
</p>
<br>
<div class="number3"></div>
<div class="number4"></div>
<div class="number5"></div>
<div class="number6"></div>
</div>
The ad- class name triggers adblocking extensions. Do you use an adblocker? If so, it's blocking the elements from rendering. You have two fixes:
Disable your adblocker
Obviously this is not a great solution, because anyone else with an adblocker will be unable to view those divs.
Rename them
As Matthew mentioned, changing the class name to something that doesn't get blocked by adblockers will work. The Chromium rendering engine (and by extension, Chrome) isn't the one disabling the divs, it's your adblocker.
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>
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>