Related
I need help creating a sidebar with variable height based on the side content. My page is divided into three parts:
a fixed navbar at the top,
a main area
a footer at the bottom of the page (not sticky).
In the main area I want to create a sidebar that is between the navbar and the footer.
Here is one of my attempts
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.navbar {
overflow: hidden;
background-color: grey;
position: fixed;
top: 0;
width: 100%;
height: 50px;
z-index: 99;
}
.main {
padding-top: 50px;
min-height: calc(100vh - 150px);
}
.footer {
background-color: blue;
position: relative;
bottom: 0;
width: 100%;
height: 100px;
}
.sidebar {
height: 100%;
width: 10%;
position: absolute;
z-index: 1;
left: 0;
background-color: orange;
overflow-x: hidden;
}
.content {
margin-left: 10%;
}
<div class="navbar">
Navbar
</div>
<div class="main">
<div class="sidebar">
Sidebar
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim,
ligula nec consectetur porttitor, leo augue ullamcorper dui, in euismod mauris enim
sed dolor. Duis tristique nisl ac libero mattis pulvinar sed a dui. Duis eu lacus
arcu. Mauris in lorem lorem. Nam non elit sit amet neque ultricies scelerisque sit
amet in velit. Cras non enim varius mi congue malesuada. In vehicula tincidunt
elementum. Donec nec pharetra lacus. Maecenas id augue nec ipsum facilisis ultricies.
Vestibulum sed lectus nisi.
Nullam tortor ligula, sodales a orci nec, egestas euismod sapien. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Nullam cursus dolor ut leo faucibus, id
ultricies libero pellentesque. Nullam et iaculis felis. Curabitur risus augue, iaculis
quis auctor at, ultricies id mauris. Integer placerat enim mattis nisl mattis, non
ultrices lectus posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque eu tempus magna. Praesent iaculis ultrices quam. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Vestibulum molestie lectus blandit, pulvinar
sem ut, finibus nisl. Suspendisse et vehicula eros, a tempus lectus. Nulla non
pharetra urna. Morbi magna sapien, ultricies ac posuere ac, posuere in neque. Cras
lobortis vel ipsum a fringilla.
</div>
</div>
<div class="footer">
</div>
Unfortunately the sidebar does not reach the footer. If I use position: "absolute"; it covers the footer. I also tried using two div side by side with flex, but without success.
How can I get a sidebar that adapts to the content of the main (between navbar and footer), ensuring that the main has a minimum height of 100vh - 150px to keep the footer at the bottom of the page?
Any help is greatly appreciated
Here problem your css code.
just replace .main class code below
.main {
min-height: calc(100vh - 150px);
position: relative;
}
Without changing your markup, you can use Flexbox to get the layout you want:
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
.navbar {
background-color: grey;
flex-basis: 50px;
padding: 5px;
}
.footer {
background-color: blue;
flex-basis: 100px;
padding: 5px;
}
.main {
flex-grow: 1;
display: flex;
}
.sidebar {
flex-basis: 10%;
background-color: orange;
padding: 5px;
}
.content {
padding: 5px;
}
<div class="navbar">
Navbar
</div>
<div class="main">
<div class="sidebar">
Sidebar
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim, ligula nec consectetur porttitor, leo augue ullamcorper dui, in euismod mauris enim sed dolor. Duis tristique nisl ac libero mattis pulvinar sed a dui. Duis eu lacus arcu. Mauris
in lorem lorem. Nam non elit sit amet neque ultricies scelerisque sit amet in velit. Cras non enim varius mi congue malesuada. In vehicula tincidunt elementum. Donec nec pharetra lacus. Maecenas id augue nec ipsum facilisis ultricies. Vestibulum sed
lectus nisi. Nullam tortor ligula, sodales a orci nec, egestas euismod sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus dolor ut leo faucibus, id ultricies libero pellentesque. Nullam et iaculis felis. Curabitur risus
augue, iaculis quis auctor at, ultricies id mauris. Integer placerat enim mattis nisl mattis, non ultrices lectus posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu tempus magna. Praesent iaculis ultrices quam. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Vestibulum molestie lectus blandit, pulvinar sem ut, finibus nisl. Suspendisse et vehicula eros, a tempus lectus. Nulla non pharetra urna. Morbi magna sapien, ultricies ac posuere ac, posuere in
neque. Cras lobortis vel ipsum a fringilla.
</div>
</div>
<div class="footer">
Footer
</div>
CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN
A Complete Guide to Flexbox | CSS-Tricks
If you were willing to change your markup, or use display:contents on your main element, you could use Grid layout instead.
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
body {
display: grid;
grid-template-columns: 10% 1fr;
grid-template-rows: 50px 1fr 100px;
grid-template-areas: "navbar navbar" "sidebar content" "footer footer";
}
.navbar {
background-color: grey;
padding: 5px;
grid-area: navbar;
}
.footer {
background-color: blue;
padding: 5px;
grid-area: footer;
}
.main {
display: contents;
}
.sidebar {
background-color: orange;
padding: 5px;
grid-area: sidebar;
}
.content {
padding: 5px;
grid-area: content;
}
<div class="navbar">
Navbar
</div>
<div class="main">
<div class="sidebar">
Sidebar
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim, ligula nec consectetur porttitor, leo augue ullamcorper dui, in euismod mauris enim sed dolor. Duis tristique nisl ac libero mattis pulvinar sed a dui. Duis eu lacus arcu. Mauris
in lorem lorem. Nam non elit sit amet neque ultricies scelerisque sit amet in velit. Cras non enim varius mi congue malesuada. In vehicula tincidunt elementum. Donec nec pharetra lacus. Maecenas id augue nec ipsum facilisis ultricies. Vestibulum sed
lectus nisi. Nullam tortor ligula, sodales a orci nec, egestas euismod sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus dolor ut leo faucibus, id ultricies libero pellentesque. Nullam et iaculis felis. Curabitur risus
augue, iaculis quis auctor at, ultricies id mauris. Integer placerat enim mattis nisl mattis, non ultrices lectus posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu tempus magna. Praesent iaculis ultrices quam. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Vestibulum molestie lectus blandit, pulvinar sem ut, finibus nisl. Suspendisse et vehicula eros, a tempus lectus. Nulla non pharetra urna. Morbi magna sapien, ultricies ac posuere ac, posuere in
neque. Cras lobortis vel ipsum a fringilla.
</div>
</div>
<div class="footer">
Footer
</div>
CSS Grid Layout - CSS: Cascading Style Sheets | MDN
A Complete Guide to Grid | CSS-Tricks
When centering the #outer div, the scrollbar starts not on the top left of the element but on the center. It becomes impossible to read the beginning of the text, and a part of the border is cut off.
How could I center and be able to scoll and see all content, including the border, when the content #outer is larger than the parent #container, using css?
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
width: 100%;
height: 100%;
display: grid;
place-content: center;
}
#outer {
width: max-content;
border: 1rem solid black;
padding: 2rem;
}
#inner {
background-color: red;
}
<div id="container">
<div id="outer">
<div id="inner">The beginning of this text is missing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar ex ut volutpat iaculis. Mauris a tellus vel mauris ullamcorper semper quis non quam. Nullam in scelerisque dolor, vel cursus odio. Nulla dignissim imperdiet mauris eleifend ultricies. Sed auctor tortor nec neque mollis feugiat. Aliquam tincidunt lacus at dictum elementum. Aliquam nunc lacus, lobortis vitae finibus et, vehicula eget nibh. Suspendisse eget tincidunt quam. In posuere quam ac neque sagittis, at finibus ante dignissim. Proin magna enim, bibendum quis pulvinar eget, porttitor non dui. Sed mollis placerat sem, id condimentum libero tempor quis. Maecenas ultrices tellus vel nisi mattis, sit amet scelerisque urna gravida. Nullam eu ipsum vitae eros pulvinar fringilla id ut massa. Fusce vitae rhoncus nulla.</div>
</div>
</div>
This may be because of display:grid;
, because when I removed that, the content is showing itself fully.
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
overflow-x:scroll;
width: 100%;
height: 100%;
place-content: center;
}
#outer {
width: max-content;
border: 1rem solid black;
padding: 2rem;
}
#inner {
background-color: red;
}
<div id="container">
<div id="outer">
<div id="inner">The beginning of this text is missing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar ex ut volutpat iaculis. Mauris a tellus vel mauris ullamcorper semper quis non quam. Nullam in scelerisque dolor, vel cursus odio. Nulla dignissim imperdiet mauris eleifend ultricies. Sed auctor tortor nec neque mollis feugiat. Aliquam tincidunt lacus at dictum elementum. Aliquam nunc lacus, lobortis vitae finibus et, vehicula eget nibh. Suspendisse eget tincidunt quam. In posuere quam ac neque sagittis, at finibus ante dignissim. Proin magna enim, bibendum quis pulvinar eget, porttitor non dui. Sed mollis placerat sem, id condimentum libero tempor quis. Maecenas ultrices tellus vel nisi mattis, sit amet scelerisque urna gravida. Nullam eu ipsum vitae eros pulvinar fringilla id ut massa. Fusce vitae rhoncus nulla.</div>
</div>
</div>
I don't know much about grid, but I think another fix might be the width;
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
width:100%;
height: 100%;
display: grid;
place-content: center;
}
#outer {
width:100%;
border: 1rem solid black;
padding: 2rem;
}
#inner {
background-color: red;
}
<div id="container">
<div id="outer">
<div id="inner">The beginning of this text is missing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar ex ut volutpat iaculis. Mauris a tellus vel mauris ullamcorper semper quis non quam. Nullam in scelerisque dolor, vel cursus odio. Nulla dignissim imperdiet mauris eleifend ultricies. Sed auctor tortor nec neque mollis feugiat. Aliquam tincidunt lacus at dictum elementum. Aliquam nunc lacus, lobortis vitae finibus et, vehicula eget nibh. Suspendisse eget tincidunt quam. In posuere quam ac neque sagittis, at finibus ante dignissim. Proin magna enim, bibendum quis pulvinar eget, porttitor non dui. Sed mollis placerat sem, id condimentum libero tempor quis. Maecenas ultrices tellus vel nisi mattis, sit amet scelerisque urna gravida. Nullam eu ipsum vitae eros pulvinar fringilla id ut massa. Fusce vitae rhoncus nulla.</div>
</div>
</div>
But I don't know if you want it on separate lines.
I'm sure this has been answered somewhere but I can't seem to find it.
I want the text inside the 2 flexboxed divs to also be inside the 90vw width, but I also want the backgrounds not to be shortened.
Anyways, here is what I have right now.
.width {
width: 90vw;
margin: auto;
}
.container {
display: flex;
}
.top {
background-color: red;
}
.left {
background-color: yellow;
}
.right {
background-color: green;
}
<div class="top">
<p class="width">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
</div>
<div class="container width">
<div class="left">
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
</div>
</div>
It may be easier than you think:
add padding: 0 5vw to space either side of .top
padding-left: 5vw to .left
padding-right: 5vw to .right
and a max-width: 100% to .top to keep child elements inside
See the code below.
Make sure to scroll further and examine the extra demo code showing a basic responsive banding pattern without #media queries you can use right out of the box!
/*
.width { REMOVE
width: 90vw;
margin: auto;
}
*/
.container {
display: flex;
max-width: 100%; /*ADD flexbox likes this */
}
.top {
background-color: red;
padding: 0 5vw; /*ADD left and right */
}
p { margin: 0 } /* otherwise some HTMNL default margins */
.left {
background-color: yellow;
padding-left: 5vw; /*ADD align with top */
}
.right {
background-color: green;
padding-right: 5vw; /*ADD align with top */
}
* { outline: 1px dashed } /* show element outlines for debug, remove when done */
<div class="top pad">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
</div>
<div class="container">
<div class="left">
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
</div>
</div>
DEMO ADD: generic responsive banding without #media queries
Currently you can see a lot of (color)banded sites, with a hero, navigation, attractor, intro, gallery, demo, etc. bands with left and right a lot of white space (over 320px on either side on 1920px width displays).
Below a nice little responsive demo (based on your question) you can use right out of the box.
It has
outer .band class acting as a main band container
a .band-inner class holding your required content
several responsive T/L/B/R paddings to generically space the content inside the inner band.
without requiring any #media queries
Check the code for extended comments and go to MathIsFun: Equation of a Straight Line to get an easy, yet eleborate explanation on the math used.
/* responsive root font-size: y=mx+b => p1(320,14) p2(1280,20) (see below equations) */
html { font-size: calc(.00625 * 100vmin + .75rem) }
/*
using "Intercept-slope" equation: y = mx + b for points p1(x1,y1), p2(x2,y2)
where m = (y2-y1)/(x2-x1)
b = y1 - m * x1
x = 100VMIN/VH/VW (use vmin for fonts, vh for heights, vw for widths)
*/
.band { /* main flexbox container for banded page layout */
display: flex;
flex-flow: row wrap; /* a row of several columns */
}
.band-inner { /* immediate child element, flexbox containers too */
display: flex;
flex-flow: row wrap; /* some default preferences */
flex: 1 1 20rem; /* grow to max available space, but wrap when less than 320px (mobile) */
}
.band-inner > * { /* for mobile support: all inner child elements fill available space, also wrap at 320px */
flex: 1 1 20rem; /* grow to max available space, but wrap when less than 320px (mobile) */
}
.pad { /* responsive band padding */
padding: calc(0.025 * 100vh + 0.5rem) /* responsive T/B p1(320,16), p2(1280,40) */
calc(0.19 * 100vw - 2.75rem) /* responsive L/R p1(320,16), p2(1920,320) */
}
.pad-t { padding-top : calc(0.025 * 100vh + 0.5rem) }
.pad-b { padding-bottom: calc(0.025 * 100vh + 0.5rem) }
.pad-l { padding-left : calc(0.19 * 100vw - 2.75rem) }
.pad-r { padding-right : calc(0.19 * 100vw - 2.75rem) }
body, p { margin: 0 } /* otherwise some HTMNL default margins, I always use this */
/* demo */
.band-inner p { padding: 1rem } /* nicely spaced inside parent */
.b1 { background-color: cornflowerblue }
.b2a { background-color: tomato }
.b2b { background-color: yellowgreen }
* { outline: 1px dashed } /* show element outlines for debug, remove when done */
<div class="band">
<div class="band-inner pad">
<p class="b1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
</div>
</div>
<div class="band">
<div class="band-inner pad">
<p class="b2a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
<p class="b2b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
</div>
</div>
I moved your class width and put it along your top and instead I added padding to the left and right side of the p.
Originally, from the code you posted in your question, the red upper container was not following your 90vw that you wanted so I had to change it.
.width {
width: 90vw;
margin: auto;
}
.width_half {
width: 45vw;
margin: auto;
}
.container {
display: flex;
}
.top {
background-color: lightblue;
}
.left {
background-color: lightgreen;
}
.right {
background-color: silver;
}
.left p,
.right p {
padding: 0 3vw;
}
<div class="top">
<p class="width">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
</div>
<div class="container">
<div class="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
</div>
</div>
I need to fix the following code so that child elements were 100% height of its parent. Chromium and Firefox debugging tools show that parent element (footer) has non-zero height. So children should have the same height.
HTML
<div class="footer">
<footer class="clearfix">
<section class="path">
<img height="474px" src="../../src/images/api-maps.yandex.ru.png">
</section>
<section class="info">
<p>bla</p>
</section>
<section class="links">
<p>bla</p>
</section>
<footer class="clearfix"></footer>
</footer>
</div>
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.clearfix {
margin: 0;
padding: 0;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
div.footer {
width: 100%;
}
div.footer footer {
background-color: black;
width: 100%;
overflow: hidden;
}
footer.clearfix {
border-top: 6px solid grey;
}
footer section {
float: left;
width: 33.333%;
height: 100%;
}
section.path {
background-color: red;
}
section.path img {
width: 100%;
display: block;
}
section.info {
background-color: blue;
}
section.links {
background-color: yellow;
}
I can't figure out why it doesn't work.
The footer has no height of its own, just what is implied by the image in the content so height:100% won't work.
As mentioned in the comments by raplh.m
the height on the container would have to be explicit. A better approach is to use flexbox, or display: table, which is better supported. That is, display: table on the container and display: table-cell on the sections within.
In fact you can use both and if the browser supports flexbox it will use that in preference to display:table.
As a bonus...you don't need to clear any floats because there aren't any.
footer {
display: table;
table-layout: fixed;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
section {
display: table-cell;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
}
img {
display: block;
margin: auto;
}
.path {
background: red;
}
.info {
background: yellow;
}
.links {
background: blue;
}
<footer>
<section class="path">
<img height="474px" src="http://lorempixel.com/output/city-h-c-200-474-10.jpg">
</section>
<section class="info">
<p>bla</p>
</section>
<section class="links">
<p>bla</p>
</section>
</footer>
Codepen Demo
Since you are using percentage heights, you need to specify the height of parent elements.
Try this:
html, body { height: 100%; }
.footer { height: 100%; }
footer { height: 100%; }
DEMO: http://jsfiddle.net/1krrxb87/
For a clear understanding of how the height property works with percentage values, see my answers here:
Why is the 'height' property with percentage value not working on my div?
Percentage height not working in nested flexbox layout in Chrome
This is also possible without use off flexbox or display:table
When you need footer to be atleast have an cross browser height off 100% off the parent you need these CSS rules
footer {
min-height: 100%;
height: auto !important;
height: 100%;
}
To have three floated sections that will have 100% height and appear equal height you can use this HTML and CSS code.
HTML
<footer>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet nunc eget massa congue scelerisque ac at ex. Ut odio nibh, interdum ac tempus vel, tempus vitae elit. Phasellus vel massa luctus, condimentum leo id, malesuada lectus. Aenean elit risus, consequat et dolor porta, mattis porta sem. Donec id commodo magna, sit amet mollis augue. Vestibulum id imperdiet massa. Maecenas accumsan pharetra est, quis imperdiet diam molestie eu. Aenean lobortis condimentum pharetra. Integer eget sem dictum, tempor arcu non, tincidunt purus. Sed nisi arcu, eleifend non maximus quis, porttitor id sem. Aliquam erat volutpat. Vivamus maximus tempus velit sit amet blandit. Quisque eleifend arcu at nisi elementum efficitur. Praesent consectetur nibh eget accumsan convallis. In pharetra nibh lorem, ac venenatis ipsum tincidunt venenatis. Donec eros justo, ultrices sit amet quam condimentum, placerat sollicitudin justo.
</p>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet nunc eget massa congue scelerisque ac at ex. Ut odio nibh, interdum ac tempus vel, tempus vitae elit. Phasellus vel massa luctus, condimentum leo id, malesuada lectus. Aenean elit risus, consequat et dolor porta, mattis porta sem. Donec id commodo magna, sit amet mollis augue. Vestibulum id imperdiet massa. Maecenas accumsan pharetra est, quis imperdiet diam molestie eu. Aenean lobortis condimentum pharetra. Integer eget sem dictum, tempor arcu non, tincidunt purus. Sed nisi arcu, eleifend non maximus quis, porttitor id sem. Aliquam erat volutpat. Vivamus maximus tempus velit sit amet blandit. Quisque eleifend arcu at nisi elementum efficitur. Praesent consectetur nibh eget accumsan convallis. In pharetra nibh lorem, ac venenatis ipsum tincidunt venenatis. Donec eros justo, ultrices sit amet quam condimentum, placerat sollicitudin justo.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet nunc eget massa congue scelerisque ac at ex. Ut odio nibh, interdum ac tempus vel, tempus vitae elit. Phasellus vel massa luctus, condimentum leo id, malesuada lectus. Aenean elit risus, consequat et dolor porta, mattis porta sem. Donec id commodo magna, sit amet mollis augue. Vestibulum id imperdiet massa. Maecenas accumsan pharetra est, quis imperdiet diam molestie eu. Aenean lobortis condimentum pharetra. Integer eget sem dictum, tempor arcu non, tincidunt purus. Sed nisi arcu, eleifend non maximus quis, porttitor id sem. Aliquam erat volutpat. Vivamus maximus tempus velit sit amet blandit. Quisque eleifend arcu at nisi elementum efficitur. Praesent consectetur nibh eget accumsan convallis. In pharetra nibh lorem, ac venenatis ipsum tincidunt venenatis. Donec eros justo, ultrices sit amet quam condimentum, placerat sollicitudin justo.
</p>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet nunc eget massa congue scelerisque ac at ex. Ut odio nibh, interdum ac tempus vel, tempus vitae elit. Phasellus vel massa luctus, condimentum leo id, malesuada lectus. Aenean elit risus, consequat et dolor porta, mattis porta sem. Donec id commodo magna, sit amet mollis augue. Vestibulum id imperdiet massa. Maecenas accumsan pharetra est, quis imperdiet diam molestie eu. Aenean lobortis condimentum pharetra. Integer eget sem dictum, tempor arcu non, tincidunt purus. Sed nisi arcu, eleifend non maximus quis, porttitor id sem. Aliquam erat volutpat. Vivamus maximus tempus velit sit amet blandit. Quisque eleifend arcu at nisi elementum efficitur. Praesent consectetur nibh eget accumsan convallis. In pharetra nibh lorem, ac venenatis ipsum tincidunt venenatis. Donec eros justo, ultrices sit amet quam condimentum, placerat sollicitudin justo.
</p>
</section>
<div style="clear:both;"></div>
</footer>
CSS
html, body {
height: 100%;
background-color: green;
}
footer {
background-color: yellow;
min-height: 100%;
height: auto !important;
height: 100%;
overflow: hidden;
}
footer section {
float: left;
width: 33.33%;
background-color: red;
padding-bottom: 999999em;
margin-bottom: -999999em;
}
see demo http://jsfiddle.net/gfoff12w/3/
Note the CSS rules padding-bottom: 999999em and margin-bottom: -999999em these CSS rules will force the browser to create an "height" on the floated section elements.
This one is a little difficult to explain: I have one div within another, but the inside div is supposed to act like a header to the containing div. The problem is that I need padding in the containing div, so the contained will always adjust to the padding. How do I keep the padding of the container, but have the contained snap to top, left and right with 0 margin?
Here's the code:
<div class="notification">
<div class="notification_head">
<p>Testing a notification.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue nibh vel velit posuere, eu rhoncus purus interdum. Praesent urna metus, mollis sed blandit ut, bibendum at neque. Aenean nulla metus, faucibus eget metus pharetra, ullamcorper placerat quam. Aenean euismod sagittis hendrerit. Integer vel dolor nibh. Nulla dignissim lacinia orci eget pellentesque. Donec id scelerisque metus. Proin eleifend finibus tellus at malesuada. Praesent bibendum, est bibendum sagittis dignissim, mi magna imperdiet quam, nec laoreet massa ante et arcu. Sed imperdiet nec dolor vitae eleifend. Duis non velit faucibus purus hendrerit dapibus sit amet id est. In consequat dapibus ornare. Sed vel leo purus.</p>
</div>
And the CSS:
.notification {
border: 1px solid #fc2929;
border-radius: 7px;
padding: 0 2% 2% 2%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.notification .notification_head {
width: 100%;
background: #fc2929;
color: #ffffff;
display: inline-block;
padding: 0.5%;
}
This is what it looks like:
Simply don't use paddings on container elements. Use paddings on inner contextual block-level elements p, h1, h2, ul, ol... etc:
*{margin:0;padding:0;} /* Ugly reset */
p, h1, h2, h3/*etc*/{
padding:15px;
}
.notification {
border: 1px solid #fc2929;
border-radius: 7px;
overflow:auto;
}
.notification .notification_head {
background: #fc2929;
color: #ffffff;
}
<div class="notification">
<div class="notification_head">
<p>Testing a notification.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue nibh vel velit posuere, eu rhoncus purus interdum. Praesent urna metus, mollis sed blandit ut, bibendum at neque. Aenean nulla metus, faucibus eget metus pharetra, ullamcorper placerat quam. Aenean euismod sagittis hendrerit.</p>
</div>
the above will give you the simplest and cleanest result
You need to create another div with you text and make padding/margins as you want.
.notification {
border: 1px solid #fc2929;
border-radius: 7px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.notification .notification_head{
width: 100%;
background: #fc2929;
color: #ffffff;
display: inline-block;
}
.notification_text {
margin: 15px;
}
<div class="notification">
<div class="notification_head">
<p>Testing a notification.</p>
</div>
<div class="notification_text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue nibh vel velit posuere, eu rhoncus purus interdum. Praesent urna metus, mollis sed blandit ut, bibendum at neque. Aenean nulla metus, faucibus eget metus pharetra, ullamcorper placerat quam. Aenean euismod sagittis hendrerit. Integer vel dolor nibh. Nulla dignissim lacinia orci eget pellentesque. Donec id scelerisque metus. Proin eleifend finibus tellus at malesuada. Praesent bibendum, est bibendum sagittis dignissim, mi magna imperdiet quam, nec laoreet massa ante et arcu. Sed imperdiet nec dolor vitae eleifend. Duis non velit faucibus purus hendrerit dapibus sit amet id est. In consequat dapibus ornare. Sed vel leo purus.</p>
</div>
</div>