The requirement is to make the div with class ".container" scrollable. The other divs should render as per the specified height. At present this content creates a scroll at body level.
Also flex display related answer is preferred over display as grid ones.
.box .row {
border: 1px dotted grey;
}
.container {
height: 100%;
overflow-y: auto;
}
<head>
</head>
<body>
<div class="box">
<div class="row header" style="height:200px">
<div>header</div>
<span>sized to content</span>
</div>
<div class="row content">
<div>
<span style="height:50px">content</span> (fills remaining space)
<div class="container">
<div style="width:100%;height:700px;background-color:green"> </div>
</div>
</div>
</div>
</div>
</body>
Update: The snippet is updated to elaborate that height or overflow set to the container does not work right. Tried it in my laptop with 1920 x 1080 resolution in chrome, there are two scrolls, one from the outer body too. Need just a single scroll on the container which would work as responsive for multiple resolutions.
According to the comments I found in answers, I suggested this solution using CSS calc() function:
:root {
/* set the height of other elements here */
--fixHeight: 250px;
}
.box .row {
border: 1px dotted grey;
}
.container {
height: calc(100vh - var(--fixHeight));
background-color: green
}
.container>div {
width: 100%;
height: 100%;
border: solid 3px red;
/* maybe overflow-y: auto; also works */
overflow-y: scroll;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<div class="row header" style="height:200px">
<div>header</div>
<span>sized to content</span>
</div>
<div class="row content">
<div>
<span style="height:50px">content</span> (fills remaining space)
<div class="container">
<div>
some div contents
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur delectus deleniti, dignissimos distinctio ducimus ea est facilis illo inventore iste laudantium nemo nostrum optio quaerat quos, repellat repellendus temporibus totam ullam unde ut veniam vitae. Aut consequuntur dolore, enim excepturi minus, nisi quisquam ratione sit suscipit ullam velit, vitae voluptates. A alias amet, asperiores delectus eius eos est ex, facere in ipsam laudantium nostrum optio possimus quas quo quos repellendus sunt, suscipit voluptate voluptatibus. Ad aliquam, consequatur consequuntur delectus, dolores ducimus eligendi eum facilis iste libero mollitia natus officiis optio pariatur quaerat repellendus repudiandae, sunt vel. Aliquam aperiam at, atque blanditiis consectetur culpa deleniti dignissimos dolorem, doloremque dolorum ducimus ea earum esse eum excepturi facere inventore ipsam ipsum, iure labore libero nam neque nesciunt nobis numquam omnis possimus provident quam ratione reiciendis sapiente similique sit soluta suscipit tempora vel voluptates! Adipisci, alias aliquid architecto consequatur cupiditate dignissimos doloremque, et facere illo ipsa nam, neque nostrum officiis placeat provident quidem quis repellat sapiente sint voluptas! Architecto aspernatur consectetur culpa cumque cupiditate dicta, dignissimos dolor doloremque ducimus error expedita fugiat fugit inventore itaque laboriosam molestias odio omnis optio repudiandae sequi sunt suscipit vel, velit veritatis voluptatibus? Commodi consequuntur debitis ex, modi nemo nihil nostrum sequi! Animi dolores eos error esse facilis nam nemo saepe sequi suscipit veritatis! Accusamus alias aperiam at cumque, debitis dignissimos hic libero magni maxime mollitia natus ratione sequi velit veniam vero! Ab animi asperiores beatae cupiditate dignissimos dolores ea eius eum hic id impedit inventore, libero magnam maxime minima molestias nam nemo nobis nulla placeat quae reprehenderit temporibus voluptatem! At autem commodi consectetur corporis, delectus dolore earum fuga molestiae nobis, omnis placeat, qui totam ullam. A adipisci aliquid aperiam beatae corporis cupiditate deleniti dignissimos dolorem dolorum fuga fugiat id in itaque maiores modi necessitatibus neque nobis odio omnis optio pariatur perferendis perspiciatis praesentium quaerat qui, quia quo recusandae rem repellendus repudiandae temporibus ullam unde voluptatibus. Dignissimos dolorum ducimus eaque eum? Accusantium corporis ducimus ex hic, molestias neque nulla optio rerum sapiente. Assumenda consectetur consequuntur ducimus expedita, harum, ipsum iusto minima necessitatibus nesciunt numquam officia perferendis quasi rerum, vel vero! Aliquam cum eligendi enim error explicabo harum numquam quas quis saepe sapiente similique unde ut velit voluptate, voluptates? Accusamus asperiores cum delectus deleniti dignissimos dolor enim, explicabo facere facilis illum ipsam laudantium magnam magni maiores molestiae necessitatibus neque numquam obcaecati odio officiis omnis optio praesentium quas quidem quo recusandae, reiciendis repellat, reprehenderit rerum sequi totam ullam vel voluptates. Accusamus commodi cupiditate deleniti eius fugiat fugit natus sequi temporibus, voluptatibus? A accusamus ad alias atque blanditiis commodi consequatur cum debitis deserunt enim exercitationem, expedita hic ipsam, libero minima minus molestiae mollitia possimus quis quos saepe, sunt vel velit voluptates voluptatibus!
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Also if you want to be more dynamic (means that the height of other elements are calculated automatically) you can set a class called wrapper to every other element you want to calculate its height and then use the JavaScript code like below:
let allOthers = document.querySelectorAll(".wrapper");
let containerElem = document.querySelector(".container");
let allHeights = 0;
allOthers.forEach(function (element, index) {
let elemHeight = getComputedStyle(element).height;
allHeights += parseFloat( elemHeight );
});
console.log(allHeights);
let containerHeight = "calc(100vh - " + allHeights + "px)";
containerElem.style.height = containerHeight;
.header {
height: 250px;
}
.box .row {
border: 1px dotted grey;
}
.container {
background-color: green
}
.container>div {
width: 100%;
height: 100%;
border: solid 3px red;
overflow-y: auto;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<div class="row header wrapper">
<div>header</div>
<span>sized to content</span>
</div>
<div class="row content">
<div>
<span style="height:50px" class="wrapper">content</span> (fills remaining space)
<div class="container">
<div>
some div contents
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur delectus deleniti, dignissimos distinctio ducimus ea est facilis illo inventore iste laudantium nemo nostrum optio quaerat quos, repellat repellendus temporibus totam ullam unde ut veniam vitae. Aut consequuntur dolore, enim excepturi minus, nisi quisquam ratione sit suscipit ullam velit, vitae voluptates. A alias amet, asperiores delectus eius eos est ex, facere in ipsam laudantium nostrum optio possimus quas quo quos repellendus sunt, suscipit voluptate voluptatibus. Ad aliquam, consequatur consequuntur delectus, dolores ducimus eligendi eum facilis iste libero mollitia natus officiis optio pariatur quaerat repellendus repudiandae, sunt vel. Aliquam aperiam at, atque blanditiis consectetur culpa deleniti dignissimos dolorem, doloremque dolorum ducimus ea earum esse eum excepturi facere inventore ipsam ipsum, iure labore libero nam neque nesciunt nobis numquam omnis possimus provident quam ratione reiciendis sapiente similique sit soluta suscipit tempora vel voluptates! Adipisci, alias aliquid architecto consequatur cupiditate dignissimos doloremque, et facere illo ipsa nam, neque nostrum officiis placeat provident quidem quis repellat sapiente sint voluptas! Architecto aspernatur consectetur culpa cumque cupiditate dicta, dignissimos dolor doloremque ducimus error expedita fugiat fugit inventore itaque laboriosam molestias odio omnis optio repudiandae sequi sunt suscipit vel, velit veritatis voluptatibus? Commodi consequuntur debitis ex, modi nemo nihil nostrum sequi! Animi dolores eos error esse facilis nam nemo saepe sequi suscipit veritatis! Accusamus alias aperiam at cumque, debitis dignissimos hic libero magni maxime mollitia natus ratione sequi velit veniam vero! Ab animi asperiores beatae cupiditate dignissimos dolores ea eius eum hic id impedit inventore, libero magnam maxime minima molestias nam nemo nobis nulla placeat quae reprehenderit temporibus voluptatem! At autem commodi consectetur corporis, delectus dolore earum fuga molestiae nobis, omnis placeat, qui totam ullam. A adipisci aliquid aperiam beatae corporis cupiditate deleniti dignissimos dolorem dolorum fuga fugiat id in itaque maiores modi necessitatibus neque nobis odio omnis optio pariatur perferendis perspiciatis praesentium quaerat qui, quia quo recusandae rem repellendus repudiandae temporibus ullam unde voluptatibus. Dignissimos dolorum ducimus eaque eum? Accusantium corporis ducimus ex hic,
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You have to set height to your parent container. Px or any property. Then set overflow auto
You have to nest an element with height: 100%; into an element with a fixed or restricted height. Then you can set overflow-y: scroll; on the element with the height: 100%; which will contain all of your content.
I added some content to demonstrate the behavior.
.box .row {
border: 1px dotted grey;
}
.container {
height: 78.5vh;
max-width: 100;
background-color: green;
border: solid 10px red;
}
.header {
height: 20vh;
}
.content {
min-height: 80vh;
}
.container>div {
max-width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
body {
margin: 0;
overflow-y: hidden;
}
body,
.box {
max-height: 100vh;
}
<head>
</head>
<body>
<div class="box">
<div class="row header">
<div>header</div>
<span>sized to content</span>
</div>
<div class="row content">
<div class="container">
<div><span>content</span> (fills remaining space)<br>NOW<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>WE<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>CAN<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>SCROLL<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
</div>
</div>
</div>
</body>
Related
This question already has answers here:
Keep background image fixed during scroll using css
(3 answers)
Closed 6 months ago.
I am trying to make a page with a glass morphism effect. I don't want to move a background of the body. I want to move only .container. Is this possible? I already tried background-attachment: fixed but it is not working.
Here the code that I'm using:
body {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
background: #091921;
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-attachment: fixed;
background: linear-gradient(#e91e63, #ffc107);
clip-path: circle(22% at 30% 20%);
z-index: -1;
}
body::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-attachment: fixed;
background: linear-gradient(#ffffff, #da00ff);
clip-path: circle(20% at 70% 90%);
z-index: -1;
}
.container {
margin: 50px 0;
width: 60%;
padding: 20px 40px;
background-color: rgba(255, 355, 255, 0.2);
backdrop-filter: blur(10px);
color: white;
font-size: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<h1>Lorem ipsum dolor sit.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis facilis vero placeat dicta reprehenderit quam soluta, nisi suscipit molestias voluptatibus itaque autem similique, quo ullam sint. Mollitia magnam quos rem veniam sit, nulla repellat
ab saepe fugit, numquam necessitatibus vel qui consequatur unde autem cum repellendus dolorum harum veritatis dolor et natus perferendis dolore culpa. Nostrum veritatis accusamus molestias porro sint veniam officia! Harum eaque corporis aperiam
nobis ea vitae animi consectetur libero sed nisi repellendus voluptatum illum voluptate veniam quisquam ullam, assumenda rerum tempora et ducimus, quod nam officia. Velit, dolores molestiae error laudantium minus consectetur natus vero ducimus esse
voluptatibus delectus nam dolore tempore expedita ad pariatur repellendus rerum fugiat recusandae unde iste omnis repellat. Vero eos ex dolorum explicabo eum placeat rem, unde nobis id veritatis molestias harum beatae enim, obcaecati sed, provident
iusto error minus quis? Tenetur aliquid ipsa illo tempora odio ab. Doloremque laudantium, officia accusantium non autem blanditiis incidunt alias. Debitis at ullam esse nihil! Est, hic quasi! Voluptas rem mollitia dolorum accusamus ipsa non ipsam
odit quis debitis quasi aliquid tempore vel totam porro possimus ullam inventore sunt, in accusantium, maiores natus. Magnam, aut quaerat alias beatae commodi eum autem repellat accusamus esse in corrupti amet maiores dolorem maxime exercitationem
omnis totam natus adipisci suscipit. Rerum maiores, nobis eligendi repudiandae doloremque mollitia deserunt praesentium expedita, odio fugiat quae quas. Laboriosam eaque rem praesentium quam vero fugit debitis, odio sed ad. Doloribus quod saepe
nisi earum sapiente tempore expedita modi perspiciatis cum aut vitae, consequatur, eveniet ducimus totam quis amet, quam beatae? Harum corrupti iure odio perferendis corporis totam eos id autem neque, aut vero at repudiandae soluta quibusdam dolor,
laborum molestias! Excepturi necessitatibus, incidunt saepe id voluptatibus sapiente mollitia, similique nulla in earum dignissimos porro quis beatae, molestiae recusandae eveniet minus cupiditate tempora! Error quo eum qui fugit itaque accusantium
non ullam saepe sunt incidunt quidem quaerat ea eius doloribus possimus totam, tenetur quis mollitia. Porro, cumque vero modi quo architecto ullam commodi aspernatur repudiandae ipsum sunt dolorem neque fugiat vitae a ex nihil vel tenetur laborum
eligendi aut rem. Magnam quidem soluta vero amet expedita. Officiis, laborum eveniet. Nobis, reiciendis natus! Optio, delectus! Voluptates, unde aliquid fuga odio perferendis at nemo qui quidem velit ullam tempora accusantium, molestias voluptatibus
ratione libero laudantium illo, aperiam dolorum earum exercitationem quae neque voluptate! Nihil explicabo sed sequi provident neque repellat quia quasi, doloremque tempore repellendus.</p>
</div>
</body>
</html>
change position: absolute; to position: fixed; for your pseudo-elements. That will align the background to the top of the viewport instead of the body document.
body {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
background: #091921;
}
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(#e91e63, #ffc107);
clip-path: circle(22% at 30% 20%);
z-index: -1;
}
body::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(#ffffff, #da00ff);
clip-path: circle(20% at 70% 90%);
z-index: -1;
}
.container {
margin: 50px 0;
width: 60%;
padding: 20px 40px;
background-color: rgba(255, 355, 255, 0.2);
backdrop-filter: blur(10px);
color: white;
font-size: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<h1>Lorem ipsum dolor sit.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis facilis vero placeat dicta reprehenderit quam soluta, nisi suscipit molestias voluptatibus itaque autem similique, quo ullam sint. Mollitia magnam quos rem veniam sit, nulla repellat
ab saepe fugit, numquam necessitatibus vel qui consequatur unde autem cum repellendus dolorum harum veritatis dolor et natus perferendis dolore culpa. Nostrum veritatis accusamus molestias porro sint veniam officia! Harum eaque corporis aperiam
nobis ea vitae animi consectetur libero sed nisi repellendus voluptatum illum voluptate veniam quisquam ullam, assumenda rerum tempora et ducimus, quod nam officia. Velit, dolores molestiae error laudantium minus consectetur natus vero ducimus esse
voluptatibus delectus nam dolore tempore expedita ad pariatur repellendus rerum fugiat recusandae unde iste omnis repellat. Vero eos ex dolorum explicabo eum placeat rem, unde nobis id veritatis molestias harum beatae enim, obcaecati sed, provident
iusto error minus quis? Tenetur aliquid ipsa illo tempora odio ab. Doloremque laudantium, officia accusantium non autem blanditiis incidunt alias. Debitis at ullam esse nihil! Est, hic quasi! Voluptas rem mollitia dolorum accusamus ipsa non ipsam
odit quis debitis quasi aliquid tempore vel totam porro possimus ullam inventore sunt, in accusantium, maiores natus. Magnam, aut quaerat alias beatae commodi eum autem repellat accusamus esse in corrupti amet maiores dolorem maxime exercitationem
omnis totam natus adipisci suscipit. Rerum maiores, nobis eligendi repudiandae doloremque mollitia deserunt praesentium expedita, odio fugiat quae quas. Laboriosam eaque rem praesentium quam vero fugit debitis, odio sed ad. Doloribus quod saepe
nisi earum sapiente tempore expedita modi perspiciatis cum aut vitae, consequatur, eveniet ducimus totam quis amet, quam beatae? Harum corrupti iure odio perferendis corporis totam eos id autem neque, aut vero at repudiandae soluta quibusdam dolor,
laborum molestias! Excepturi necessitatibus, incidunt saepe id voluptatibus sapiente mollitia, similique nulla in earum dignissimos porro quis beatae, molestiae recusandae eveniet minus cupiditate tempora! Error quo eum qui fugit itaque accusantium
non ullam saepe sunt incidunt quidem quaerat ea eius doloribus possimus totam, tenetur quis mollitia. Porro, cumque vero modi quo architecto ullam commodi aspernatur repudiandae ipsum sunt dolorem neque fugiat vitae a ex nihil vel tenetur laborum
eligendi aut rem. Magnam quidem soluta vero amet expedita. Officiis, laborum eveniet. Nobis, reiciendis natus! Optio, delectus! Voluptates, unde aliquid fuga odio perferendis at nemo qui quidem velit ullam tempora accusantium, molestias voluptatibus
ratione libero laudantium illo, aperiam dolorum earum exercitationem quae neque voluptate! Nihil explicabo sed sequi provident neque repellat quia quasi, doloremque tempore repellendus.</p>
</div>
</body>
</html>
The code of my HTML document is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Wer ist Mats?</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.content {
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
border: 2px white solid;
background: white;
max-width: 31.25em;
margin: 12.5em;
margin-top: 9.375em;
margin-left: 25em;
}
.header {
margin-bottom: 1.2em;
}
.text {
}
img {
position: absolute;
right: 25em;
margin-top: 9.375em;
/* Schatten von http://www.corelangs.com/css/box/image-shadow.html ausprobiert */
box-shadow: 10px 10px 5px #ccc;
-moz-box-shadow: 10px 10px 5px #ccc;
-webkit-box-shadow: 10px 10px 5px #ccc;
-khtml-box-shadow: 10px 10px 5px #ccc;
}
</style>
<body>
<div class="content">
<div class="header">
<h1>Wer ist Mats?</h1>
</div>
<div class="text">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat ullam nulla officiis magnam quos repellat aliquam, nam eaque aspernatur modi possimus expedita dolores rem hic veniam quis veritatis repudiandae perspiciatis mollitia ipsam labore iusto! Corrupti qui asperiores facilis unde! Asperiores facere id ullam quod magnam animi laboriosam voluptates obcaecati modi possimus perspiciatis ad vero, esse fugit sint ab hic eligendi tenetur deleniti omnis ipsam nobis illum placeat! Sunt id quaerat impedit laborum ratione aperiam quo est quis eveniet dolor non, explicabo ab esse voluptate corporis minima omnis quae necessitatibus natus architecto distinctio. Asperiores officiis minima, quasi esse mollitia vel pariatur atque reiciendis laudantium cum, amet non delectus nemo suscipit error?<br><br> Laudantium incidunt voluptate sequi consequuntur cum magni sapiente maiores eos iure provident totam iste vel similique excepturi ipsam ipsum nobis unde deleniti nisi ullam, vero, quam quos. Labore tenetur consectetur commodi eius neque deleniti fugit quae ad iusto, eveniet aliquam quam itaque dignissimos, iure sit facilis voluptates laudantium quos consequuntur corporis vitae consequatur. Dolor tenetur placeat ad quasi earum nesciunt? Doloribus sint ex, repellat atque ipsa inventore voluptatem consequatur quaerat nemo suscipit magni harum fugiat ad perspiciatis alias provident. Facere reprehenderit quis praesentium delectus in architecto incidunt blanditiis accusantium molestiae culpa. Reprehenderit iste nulla eius placeat sunt quae laboriosam earum veritatis veniam molestias optio dignissimos nisi eaque, ea dolorem possimus debitis molestiae iusto beatae officiis? Officiis delectus, corporis vel facilis nisi eius quae recusandae quaerat officia deleniti sint adipisci, necessitatibus accusantium quis optio sequi. Explicabo harum vel alias perferendis quisquam.</p>
</div>
</div>
<img src="https://cdn.pixabay.com/photo/2019/09/05/20/30/girl-4455005_960_720.jpg" alt="Girl with a Horse">
</body>
</html>
Here you can see the Screenshot of the actual Problem I have after opening the document in the browser.
My <div class="text"> block goes under the picture, but in the fullscreen it works fine. Please help me, it's my first experience with HTML and CSS.
Welcome to Stack Overflow! Nice to have your question, it looks like you simply need to handle the CSS Layout and still want it to be browser-width-friendly, or cross-device. I suggest learning Flexbox CSS Layout. Take your time learning the guides, this may be helpful for a quick start.
article{display:flex}
.container{flex-direction:column}
p {width: 300px; flex-grow:3}
img {width:300px; flex-grow: 4}
<article>
<div class="container">
<h1>I'm title here</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat ullam nulla officiis magnam quos repellat aliquam, nam eaque aspernatur modi possimus expedita dolores rem hic veniam quis veritatis repudiandae perspiciatis mollitia ipsam labore iusto! Corrupti qui asperiores facilis unde! Asperiores facere id ullam quod magnam animi laboriosam voluptates obcaecati modi possimus perspiciatis ad vero, esse fugit sint ab hic eligendi tenetur deleniti omnis ipsam nobis illum placeat! Sunt id quaerat impedit laborum ratione aperiam quo est quis eveniet dolor non, explicabo ab esse voluptate corporis minima omnis quae necessitatibus natus architecto distinctio. Asperiores officiis minima, quasi esse mollitia vel pariatur atque reiciendis laudantium cum, amet non delectus nemo suscipit error?<br><br> Laudantium incidunt voluptate sequi consequuntur cum magni sapiente maiores eos iure provident totam iste vel similique excepturi ipsam ipsum nobis unde deleniti nisi ullam, vero, quam quos. Labore tenetur consectetur commodi eius neque deleniti fugit quae ad iusto, eveniet aliquam quam itaque dignissimos, iure sit facilis voluptates laudantium quos consequuntur corporis vitae consequatur. Dolor tenetur placeat ad quasi earum nesciunt? Doloribus sint ex, repellat atque ipsa inventore voluptatem consequatur quaerat nemo suscipit magni harum fugiat ad perspiciatis alias provident. Facere reprehenderit quis praesentium delectus in architecto incidunt blanditiis accusantium molestiae culpa. Reprehenderit iste nulla eius placeat sunt quae laboriosam earum veritatis veniam molestias optio dignissimos nisi eaque, ea dolorem possimus debitis molestiae iusto beatae officiis? Officiis delectus, corporis vel facilis nisi eius quae recusandae quaerat officia deleniti sint adipisci, necessitatibus accusantium quis optio sequi. Explicabo harum vel alias perferendis quisquam.</p>
</div>
<img src="https://cdn.pixabay.com/photo/2019/09/05/20/30/girl-4455005_960_720.jpg" alt="Girl with a Horse">
</article>
You can change the flex-grow property of both text and image for them to be of desired ratio.
I have a sticky footer layout, where the footer is always positioned at the bottom of the page (even if there is no content).
Everything works in all major browsers, but I have this weird issue in IE11: when I use a big image, it has non-wanted space between the end of the content, and the footer. (Looks like the image is displayed correctly, but the height isn't calculated correctly by the browser?)
This is how it should be:
* {
padding: 0;
margin: 0;
}
.site {
/*
Old IE flexbox syntax is not needed anymore for IE11 (https://caniuse.com/#search=flexbox)
display: -ms-flexbox;
*/
}
.site__container {
display: flex;
flex-direction: column;
/*In IE11, the parent element needs a height to be able to put the footer at the bottom.
(height value doesn't matter, it just needs height. example: "height: 0;")
(https://stackoverflow.com/questions/24396205/flex-grow-not-working-in-internet-explorer-11)
*/
height: 0;
min-height: 100vh;
}
.site__main {
flex: 1 0 auto;
/* Setting flex-grow: 1 on main makes it grow to fill the available space. */
}
.site__header,
.site__main,
.site__footer {
/* By default, flex-shrink is set to 1. This makes the items shrink
if there is not enough space, which happens if the content is larger than the screen.
*/
flex-shrink: 0;
}
.site__content {
padding-bottom: 30px;
}
.site__content p {
line-height: 25px;
}
.site__header {
background: red;
}
.site__main {
background: green;
}
.site__footer {
background: blue;
}
section {
/* height: 30px; */
background: salmon;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Document</title>
</head>
<body>
<div class="site__container">
<header class="site__header">Header</header>
<main class="site__main">
<section>
<div class="col-12">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<img src="https://placehold.it/500x300" alt="" class="img-fluid">
</div>
<div class="col-12 col-md-6">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo sed molestias voluptatum perferendis ea nisi minus, illo iusto ut quaerat saepe sunt asperiores itaque pariatur earum incidunt quos culpa vero excepturi magni quod corrupti aperiam doloremque?
Esse rerum officia modi consequatur? Ex aspernatur repellat id, ut aut nam? Esse, aut?
</div>
</div>
</div>
</div>
</div>
</section>
<section><div class="col-12">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus consequatur eligendi nemo iure a reiciendis, quos asperiores tempora eveniet nam adipisci praesentium, facilis nihil unde ut. Provident quibusdam culpa autem.
Quis odio repellat quam maxime natus illum nemo sequi dignissimos qui asperiores perspiciatis impedit placeat dicta, reprehenderit nam debitis quos odit! Pariatur a expedita minus odit dolore reiciendis ab non!
Odio, debitis illum! Velit maxime possimus unde veritatis esse, inventore debitis error ratione voluptates laborum eligendi facere omnis ullam delectus! Quas dolorum rem quod accusamus cupiditate, praesentium sequi corrupti id.
Illum atque natus, accusantium dolores repudiandae autem quia quo dolorum a optio qui, porro vitae corrupti omnis inventore esse soluta in, nam minima. Hic ipsa exercitationem porro assumenda soluta sunt.
Blanditiis culpa voluptates id sunt eveniet quo nemo. Repudiandae eius vero tenetur rem explicabo dolorum mollitia saepe nemo reprehenderit numquam, modi ex veniam ad ut. Ut excepturi quo sit asperiores!
Dolore sint cum non labore tempora voluptate magnam possimus illo adipisci aliquam, ad aspernatur aut inventore, est odit nulla et suscipit aperiam modi officia velit omnis quae. Quis, neque harum.
Rem et incidunt praesentium maxime rerum iste provident ipsam cum dolores veritatis eligendi cupiditate iusto, repellat eius facilis reprehenderit voluptatem quae quo! Voluptas, tempore nostrum ea accusantium sint dolores assumenda.
Totam omnis non fugit! Maxime, at quibusdam labore in error aspernatur fuga adipisci sed delectus harum, totam deleniti dolores repellendus? Officia debitis repudiandae ullam eius dolor sit excepturi consequatur eaque.
Veritatis esse deleniti optio adipisci sapiente provident dignissimos laborum suscipit fuga quam ea autem tempora voluptatum, laboriosam id earum illo maiores, nihil corrupti! Nisi consequuntur, fuga sed atque sapiente earum?
Cupiditate suscipit unde corrupti earum laboriosam quia, ad debitis nam, architecto omnis laborum. Esse dolor aliquam error est assumenda porro eum cumque fugit doloremque. Magni mollitia numquam repellat animi perspiciatis.
</div>
</div>
</div>
</div>
</div></section>
<section><div class="col-12">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus consequatur eligendi nemo iure a reiciendis, quos asperiores tempora eveniet nam adipisci praesentium, facilis nihil unde ut. Provident quibusdam culpa autem.
Quis odio repellat quam maxime natus illum nemo sequi dignissimos qui asperiores perspiciatis impedit placeat dicta, reprehenderit nam debitis quos odit! Pariatur a expedita minus odit dolore reiciendis ab non!
Odio, debitis illum! Velit maxime possimus unde veritatis esse, inventore debitis error ratione voluptates laborum eligendi facere omnis ullam delectus! Quas dolorum rem quod accusamus cupiditate, praesentium sequi corrupti id.
Illum atque natus, accusantium dolores repudiandae autem quia quo dolorum a optio qui, porro vitae corrupti omnis inventore esse soluta in, nam minima. Hic ipsa exercitationem porro assumenda soluta sunt.
Blanditiis culpa voluptates id sunt eveniet quo nemo. Repudiandae eius vero tenetur rem explicabo dolorum mollitia saepe nemo reprehenderit numquam, modi ex veniam ad ut. Ut excepturi quo sit asperiores!
Dolore sint cum non labore tempora voluptate magnam possimus illo adipisci aliquam, ad aspernatur aut inventore, est odit nulla et suscipit aperiam modi officia velit omnis quae. Quis, neque harum.
Rem et incidunt praesentium maxime rerum iste provident ipsam cum dolores veritatis eligendi cupiditate iusto, repellat eius facilis reprehenderit voluptatem quae quo! Voluptas, tempore nostrum ea accusantium sint dolores assumenda.
Totam omnis non fugit! Maxime, at quibusdam labore in error aspernatur fuga adipisci sed delectus harum, totam deleniti dolores repellendus? Officia debitis repudiandae ullam eius dolor sit excepturi consequatur eaque.
Veritatis esse deleniti optio adipisci sapiente provident dignissimos laborum suscipit fuga quam ea autem tempora voluptatum, laboriosam id earum illo maiores, nihil corrupti! Nisi consequuntur, fuga sed atque sapiente earum?
Cupiditate suscipit unde corrupti earum laboriosam quia, ad debitis nam, architecto omnis laborum. Esse dolor aliquam error est assumenda porro eum cumque fugit doloremque. Magni mollitia numquam repellat animi perspiciatis.
</div>
</div>
</div>
</div>
</div></section>
</main>
<footer class="site__footer">Footer</footer>
</div>
</body>
</html>
When I use the above example, and replace the image url by https://placehold.it/5000x3000, the green area gets much bigger and gives an unwanted padding between the content & footer, despite there being no content in there. (Remember, this issue is only in IE11, no other browsers)
Simply remove the display:flex and flex-direction:column property for your site__container class. Because internet explorer does not support the flex-direction properties.
Read the reference
* {
padding: 0;
margin: 0;
}
html {
position: relative;
min-height: 100%;
}
.site {
/*
Old IE flexbox syntax is not needed anymore for IE11 (https://caniuse.com/#search=flexbox)
display: -ms-flexbox;
*/
}
.site__container {
/*display: flex;
flex-direction: column;
height: 0;
min-height: 100vh;*/
/*In IE11, the parent element needs a height to be able to put the footer at the bottom.
(height value doesn't matter, it just needs height. example: "height: 0;")
(https://stackoverflow.com/questions/24396205/flex-grow-not-working-in-internet-explorer-11)
*/
margin-bottom: 60px;
}
.site__main {
flex: 1 0 auto;
/* Setting flex-grow: 1 on main makes it grow to fill the available space. */
}
.site__header,
.site__main,
.site__footer {
/* By default, flex-shrink is set to 1. This makes the items shrink
if there is not enough space, which happens if the content is larger than the screen.
*/
flex-shrink: 0;
}
.site__content {
padding-bottom: 30px;
}
.site__content p {
line-height: 25px;
}
.site__header {
background: red;
}
.site__main {
background: green;
}
.site__footer {
background: blue;
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
}
section {
/* height: 30px; */
background: salmon;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Document</title>
</head>
<body>
<div class="site__container">
<header class="site__header">Header</header>
<main class="site__main">
<section>
<div class="col-12">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<img src="https://placehold.it/5000x3000" alt="" class="img-fluid">
</div>
<div class="col-12 col-md-6">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo sed molestias voluptatum perferendis ea nisi minus, illo iusto ut quaerat saepe sunt asperiores itaque pariatur earum incidunt quos culpa vero excepturi magni quod corrupti aperiam doloremque?
Esse rerum officia modi consequatur? Ex aspernatur repellat id, ut aut nam? Esse, aut?
</div>
</div>
</div>
</div>
</div>
</section>
<section><div class="col-12">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus consequatur eligendi nemo iure a reiciendis, quos asperiores tempora eveniet nam adipisci praesentium, facilis nihil unde ut. Provident quibusdam culpa autem.
Quis odio repellat quam maxime natus illum nemo sequi dignissimos qui asperiores perspiciatis impedit placeat dicta, reprehenderit nam debitis quos odit! Pariatur a expedita minus odit dolore reiciendis ab non!
Odio, debitis illum! Velit maxime possimus unde veritatis esse, inventore debitis error ratione voluptates laborum eligendi facere omnis ullam delectus! Quas dolorum rem quod accusamus cupiditate, praesentium sequi corrupti id.
Illum atque natus, accusantium dolores repudiandae autem quia quo dolorum a optio qui, porro vitae corrupti omnis inventore esse soluta in, nam minima. Hic ipsa exercitationem porro assumenda soluta sunt.
Blanditiis culpa voluptates id sunt eveniet quo nemo. Repudiandae eius vero tenetur rem explicabo dolorum mollitia saepe nemo reprehenderit numquam, modi ex veniam ad ut. Ut excepturi quo sit asperiores!
Dolore sint cum non labore tempora voluptate magnam possimus illo adipisci aliquam, ad aspernatur aut inventore, est odit nulla et suscipit aperiam modi officia velit omnis quae. Quis, neque harum.
Rem et incidunt praesentium maxime rerum iste provident ipsam cum dolores veritatis eligendi cupiditate iusto, repellat eius facilis reprehenderit voluptatem quae quo! Voluptas, tempore nostrum ea accusantium sint dolores assumenda.
Totam omnis non fugit! Maxime, at quibusdam labore in error aspernatur fuga adipisci sed delectus harum, totam deleniti dolores repellendus? Officia debitis repudiandae ullam eius dolor sit excepturi consequatur eaque.
Veritatis esse deleniti optio adipisci sapiente provident dignissimos laborum suscipit fuga quam ea autem tempora voluptatum, laboriosam id earum illo maiores, nihil corrupti! Nisi consequuntur, fuga sed atque sapiente earum?
Cupiditate suscipit unde corrupti earum laboriosam quia, ad debitis nam, architecto omnis laborum. Esse dolor aliquam error est assumenda porro eum cumque fugit doloremque. Magni mollitia numquam repellat animi perspiciatis.
</div>
</div>
</div>
</div>
</div></section>
<section><div class="col-12">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus consequatur eligendi nemo iure a reiciendis, quos asperiores tempora eveniet nam adipisci praesentium, facilis nihil unde ut. Provident quibusdam culpa autem.
Quis odio repellat quam maxime natus illum nemo sequi dignissimos qui asperiores perspiciatis impedit placeat dicta, reprehenderit nam debitis quos odit! Pariatur a expedita minus odit dolore reiciendis ab non!
Odio, debitis illum! Velit maxime possimus unde veritatis esse, inventore debitis error ratione voluptates laborum eligendi facere omnis ullam delectus! Quas dolorum rem quod accusamus cupiditate, praesentium sequi corrupti id.
Illum atque natus, accusantium dolores repudiandae autem quia quo dolorum a optio qui, porro vitae corrupti omnis inventore esse soluta in, nam minima. Hic ipsa exercitationem porro assumenda soluta sunt.
Blanditiis culpa voluptates id sunt eveniet quo nemo. Repudiandae eius vero tenetur rem explicabo dolorum mollitia saepe nemo reprehenderit numquam, modi ex veniam ad ut. Ut excepturi quo sit asperiores!
Dolore sint cum non labore tempora voluptate magnam possimus illo adipisci aliquam, ad aspernatur aut inventore, est odit nulla et suscipit aperiam modi officia velit omnis quae. Quis, neque harum.
Rem et incidunt praesentium maxime rerum iste provident ipsam cum dolores veritatis eligendi cupiditate iusto, repellat eius facilis reprehenderit voluptatem quae quo! Voluptas, tempore nostrum ea accusantium sint dolores assumenda.
Totam omnis non fugit! Maxime, at quibusdam labore in error aspernatur fuga adipisci sed delectus harum, totam deleniti dolores repellendus? Officia debitis repudiandae ullam eius dolor sit excepturi consequatur eaque.
Veritatis esse deleniti optio adipisci sapiente provident dignissimos laborum suscipit fuga quam ea autem tempora voluptatum, laboriosam id earum illo maiores, nihil corrupti! Nisi consequuntur, fuga sed atque sapiente earum?
Cupiditate suscipit unde corrupti earum laboriosam quia, ad debitis nam, architecto omnis laborum. Esse dolor aliquam error est assumenda porro eum cumque fugit doloremque. Magni mollitia numquam repellat animi perspiciatis.
</div>
</div>
</div>
</div>
</div></section>
</main>
<footer class="site__footer">Footer</footer>
</div>
</body>
</html>
Is there any way to stick a footer to the bottom of the browser screen or right after the content (depending on which is longer) using CSS without knowing the size of the footer in advance?
Right now I am using the absolute positioning in a container that holds the footer and the content with container's min-height as 100%, but if I change the footer I find I must change the padding at the bottom of the container to match its height.
http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
Summary:
For a site with a header, content area, and footer:
Set html, body {height: 100%;}
Set your body (or a wrapper div) to display: table; width: 100%; height: 100%;
Set your header, footer, and content area to display: table-row;. Give your header and footer height: 1px;, and give your content area height: auto;
The header and footer will both expand to fit their content. The content area will expand to fit the larger of its content, or the available space.
https://jsfiddle.net/0cx30dqf/
If you're willing to jump into the HTML5 future, you can use flexbox...
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1;
}
My more detailed answer to the same question: How to make a fluid sticky footer (full example: http://jsfiddle.net/n5BaR/)
Solved by flexbox: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
What is Flexbox from MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Try this!
Uses Flex!
NO FIXED HEIGHT, JAVASCRIPT OR TABLES
Expands when more content, and when there isn't it sticks to bottom
Note: Does not work with IE 9 & Below
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
body{
min-height: 100%;
display: flex;
flex-direction: column;
}
.content{
flex: 1;
background: #ddd;
}
<body>
<header>
Header
</header>
<div class='content'>
This is the page content
<br>
PS. Don't forget the margin: 0 and padding: 0 to avoid scrollbars (this can be also put into the body css)
</div>
<footer>
Footer
</footer>
</body>
For an app with a responsive footer (i.e. changes height on resize), you can use jquery to dynamically adjust the padding of the bottom for the parent element. Adding onto this post: Keep Footer at Bottom
HTML:
<div class=”main-container”>
<header>
this is a header
</header>
<section>
this is content
</section>
<footer>
this is a footer
</footer>
</div>
CSS:
html,
body {
height: 100%;
position: relative;
}
.main-container {
min-height: 100vh; /* will cover the 100% of viewport */
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px; /* height of your footer */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
}
CoffeeScript:
footerEventListener = ->
$(window).on "resize", ->
setFooterHeight()
setFooterHeight = ->
// get footer height in px
bottomPadding = $("footer").css("height")
$(".main-wrapper").css("padding-bottom", "#{bottomPadding}")
// init footer events
setFooterHeight()
footerEventListener()
Check out the CodePen here.
since no one knows the answer for sticky footer w/o knowing the height of it, using css (crosbrowser solution), i was forced to calculate it
jquery:
if( $(document).height() < $(window).height() )
{
$('#content').height
(
$(window).height - $('#footer').height()
);
}
html structure:
<div id="content"></div>
<div id="footer"></div>
I think the best way is just add a class to your footer. Javascript will do the rest.
//This Pen is By Mohammad Abdus Salam
//portfolio.codeexposer.com
var footerHeight = $('footer.fixed_footer').height();
if($('footer').hasClass('fixed_footer')){
$( "section" ).last().css({
"margin-bottom": footerHeight + 'px'
});
}
#import url('https://fonts.googleapis.com/css?family=Raleway:400,700,800');
body{
margin: 0;
padding: 0;
text-align:center;
font-family: 'Raleway', sans-serif;
line-height: 30px;
}
section{
padding-top: 80px;
padding-bottom: 80px;
border-bottom:1px solid #ddd;
background: #ffffff;
z-index: 9;
}
h1{
font-size: 48px;
font-weight: 800;
text-transform: capitalize;
}
a{
text-decoration: none;
}
.container{
width: 700px;
display: inline-block;
box-sizing:border-box;
padding-left: 30px;
padding-right: 30px;
}
.logo{
height: 80px;
width: 80px;
display: inline-block;
}
.footer_top{
border-bottom: 1px solid #777;
padding-bottom: 60px;
}
.logo img{
width: 100%;
height: 100%;
}
.footer_bottom {}
.footer_bottom p{
color:#aaa;
}
.footer_top{
padding-top: 100px;
}
.footer_bottom p a{
color:#158;
}
footer{
width: 100%;
left: 0;
bottom:0px;
z-index: -1;
background: #222222;
}
.fixed_footer{
width: 100%;
position:fixed;
left: 0;
bottom:0;
z-index: -99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="container">
<h1>This is Banner</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is About</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is Service</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is Portfolio</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is Banner</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<footer class="fixed_footer">
<div class="container">
<div class="footer_top">
<a class="logo" href="portfolio.codeexposer.com">
<img src="https://lh3.googleusercontent.com/-a700z77yIxk/AAAAAAAAAAI/AAAAAAAAABM/RzvY_qm9KQY/s512-p/photo.jpg" alt="">
</a>
</div>
<div class="footer_bottom">
<p>
All Rights Reserved By Mohammad Abdus Salam
</p>
</div>
</div>
</footer>
Take a look at this, cssstickyfooter, it works great in any browser.
Update: This is from 2010, might not be relevant with current standards
I feel like this should be a really simple problem, but I can't seem to figure it out.
HTML:
<div class="outer">
<div class="inner">
<!-- lots of text -->
</div>
<div class="inner-bottom">
This text should be inside the blue background
</div>
</div>
CSS:
.outer {
height: 300px;
background: #99EEFF;
}
.inner {
height: 100%;
overflow: scroll;
}
.inner-bottom {
text-align: center
}
Fiddle
The goal is to have both inner divs display inside their parent, which has a background specified to visually organize them.
If I don't specify height: 100%; on .inner, it overflows, no matter which I set on the display property. In fact, some values of display even cause height: 100% to not work.
Anyway, I'd really like .inner's size to be dictated by .outer's size, rather than vice versa. How do I do this?
You can do this with Flexbox just use flex: 1 on .inner
body {
margin: 0px;
}
.outer {
height: 300px;
flex-direction: column;
display: flex;
background: #99EEFF;
}
.inner {
flex: 1;
overflow-y: scroll;
}
.inner-bottom {
text-align: center
}
<div class="outer">
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis fugiat nulla asperiores rerum sed dignissimos vitae odit consectetur perferendis! Suscipit qui hic iste est tempora blanditiis odit distinctio odio quas amet. Fuga mollitia maxime labore non odio laborum ea facilis distinctio blanditiis exercitationem atque et, facere illo repellat praesentium inventore iure. Minus error expedita veritatis doloribus esse, at cum molestias odit saepe animi harum similique, dolore distinctio est a quidem beatae! Aliquam, similique autem ipsa vitae eligendi iure consectetur. Quasi, odio expedita consequatur, maxime, libero maiores incidunt quia debitis hic provident cum, deleniti? Illo id pariatur, recusandae tenetur! Beatae cum, fuga! Nulla animi deserunt molestiae eum quia dolorum necessitatibus quod eos saepe sint eaque id est cupiditate impedit, doloribus consequuntur ipsum maiores consequatur alias. Magnam accusantium ab quia laudantium iste eum nobis sequi error, atque suscipit repellendus officiis laboriosam alias eos ullam. At inventore quam ullam officia sequi, aliquam. Aperiam dicta eum illo tempora, quas doloribus ducimus sequi placeat, aut id quaerat iure officiis nostrum accusamus atque odio repudiandae saepe autem distinctio. Qui expedita cum animi totam maxime minima labore vitae reprehenderit eligendi porro odio, voluptatem obcaecati sint enim, velit dolores, dolore fugit incidunt sit. Doloremque suscipit, quia libero. Odit nihil beatae eaque suscipit aperiam hic tempore ipsam non quam doloremque, nesciunt voluptate laboriosam a animi assumenda iste velit sunt cumque minima. Quos perferendis, labore. Consectetur quod sequi commodi nesciunt suscipit, molestiae, quia est cum. Beatae nulla, suscipit ducimus nobis voluptas illum enim dicta distinctio similique aliquam sapiente impedit ea non corrupti omnis est obcaecati labore laboriosam quaerat tempora molestias sunt laudantium doloremque? Perspiciatis dolore, excepturi, voluptate nulla nam culpa nostrum dolor, rerum quas iure dolorem incidunt consequatur dolores dolorum laborum ipsam eaque quasi accusamus voluptatum voluptates quisquam. Perspiciatis maxime, assumenda itaque eligendi dolore iste libero debitis ea sint expedita eius illum blanditiis inventore officiis voluptates minima iusto fuga nulla veritatis quo deserunt ad quisquam. Cumque numquam nihil tenetur itaque obcaecati soluta, libero possimus dolore ipsa eum neque amet sunt ad sapiente quos quae deleniti voluptas illo molestiae. Nihil officiis, commodi fugiat architecto blanditiis! Atque neque numquam nobis voluptates accusantium libero tempore veniam fugit officiis alias soluta rem enim, totam aut eos, nam. Fuga labore fugiat, suscipit consequatur ipsum quia praesentium. Reprehenderit praesentium maxime, ea maiores repellat, facere architecto quasi vitae a hic similique impedit commodi dolor, quas necessitatibus saepe ipsum. Nulla distinctio corporis dolor praesentium eum laudantium, asperiores magni minus tempora, iusto veritatis fuga. Totam ratione incidunt, neque blanditiis iure corporis consectetur ea dignissimos nesciunt tenetur ab placeat, harum eaque laboriosam numquam quas ipsum! Earum aperiam, voluptatibus assumenda quisquam dolorem ut eius non provident numquam nostrum rerum, magnam voluptatum beatae quibusdam quasi ad consequuntur perspiciatis fugiat soluta ipsa excepturi! Earum, accusamus quidem! Quos, eaque inventore perferendis quia officiis tempore sequi repellendus incidunt quo, numquam aut mollitia, atque earum architecto. Harum ipsa debitis necessitatibus quos sapiente ad deleniti quod non nihil libero iure voluptatem, omnis possimus tempore eos recusandae! Provident modi nulla dicta, aut possimus dolores nesciunt officiis sunt! Sunt!
</div>
<div class="inner-bottom">
This text should be inside the blue background
</div>
</div>
Flexbox is the way to go here, but if you want a non-flex answer: If you are assigning 300px to the outer div then you can assign fixed pixel values to the inner divs. how big do you want them to be? You can do:
.inner {
height: calc(100% - (insert height of .inner-bottom));
}
Or you can just use percentages that add up to 100 for the height of both elements. Or you can just use pixels that add up to 300. Your call.
You can set the height of the inner element , that is the best way
.inner {
height: 275px;
overflow-y: auto;
}
Use a padding bottom to the parent element, that is 'outer' class.
.outer {
height: 300px;
background: #99EEFF;
padding-bottom: 30px;
}
The text in the inner-bottom is out of the blue background, because the .inner div takes up all available height in the .outer DIV.
If you set the height of the .inner DIV to less than 100%, there will still be some space for the .inner-bottom to fit in the .outer DIV.
So, changing
height: 100%
to for example
height:65%
in the .inner should work.
PS. You can change the 65% to any value less than 100% and it should still work properly.
I figured out a simpler, more dynamic, and more cross-compatible approach using tables.
HTML:
<div class="table">
<div class="tr greedy">
<div class="td">
<div class="scrollable">
<!-- Lots of text -->
</div>
</div>
</div>
<div class="tr">
<div class="td centered">
Text should be inside the blue box
</div>
</div>
</div>
CSS:
.table {
display: table;
height: 300px;
background: #99EEFF;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
}
.scrollable {
max-width: 100%;
max-height: 100%;
overflow: auto;
}
.greedy {
height: 100%;
}
.centered {
text-align: center;
}