I am trying to move my footer to the bottom and in the cases if the content is not long enough, then push it to the bottom of the screen. I read that it can be achieved solely by using css, however I couldn't achieve it.
I tried creating columns,
<body>
<div id="wrapper">
<nav class="navbar navbar-default" role="navigation">
...
</nav>
<div id="content">
...
</div>
<div id="footer">
...
</div>
</div>
</body>
Then, in my css, I tried using:
#footer {
height: 30px;
width:100%;
background-color: #2D2D2D;
position: absolute;
left: 0;
bottom: 0;
}
#wrapper {
background-color: purple;
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
}
but no luck :/
Here I created it in bootply. Here, I added bunch of <br> tags to lengthen the content and added some text underneath. What I want is instead if content is short, stick the footer to the bottom of the page (not where content ends in the middle of the screen); and if content is long, where the content ends just below content.
What am I doing wrong/missing out?
Well, if you want it to always stay at the bottom, you can use this code. Remove the <p> tags and run again to test without text
html,body {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
position: relative;
padding-bottom: 5em;
box-sizing: border-box;
}
#content {
background: red;
}
footer {
height: 4em;
background: blue;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<body>
<div id="wrapper">
<div id="content">
<p> Lorem ipsum dolor sit amet, adipiscing odio, vitae nulla luctus consectetuer, cras odio turpis adipiscing lobortis, tempor luctus morbi. Sed vitae id in, vel tempor mattis rutrum, eu non mauris in erat lectus enim, eget morbi quo imperdiet, mi lorem aliquam sed accumsan orci. Rhoncus nonummy turpis ipsum tempus tempor elementum, vestibulum sint tempor, accumsan mauris scelerisque rutrum. Eget rhoncus hendrerit, ipsum ipsum nunc sit ut arcu aenean, urna in justo reprehenderit mollis, suscipit erat, consequat suspendisse turpis duis nec pellentesque tristique. Lectus velit, vestibulum lorem enim turpis a eu mauris, mauris bibendum sociis lobortis sodales sed, eget rhoncus quisque consequat curabitur sit. Sodales velit et convallis interdum quis rutrum, dolor lobortis neque mi eget lorem, sed tincidunt dis convallis. Feugiat in conubia nec ipsum, nec rutrum nisl, vitae id vestibulum sollicitudin fringilla ac ligula, eget rutrum in. Tortor mollis amet, nulla pharetra nec in, vel vulputate nec eu diam, cras massa adipiscing pulvinar, id pulvinar massa dignissim. Quisque lorem enim vel orci vestibulum, consectetuer tincidunt et egestas.</p>
<p>
Donec nunc nec in, ut non lorem eget tortor facilisi sed, eget tempor a duis urna, pellentesque proin blandit et, mollis dictum dictum. Aliquet massa praesent vitae lorem at posuere, id lobortis nec id dignissim lorem nisi, at amet occaecati, duis enim quisque quam est, ultrices nunc semper vivamus praesent aenean nam. Natoque neque adipiscing, ipsum magna libero. Pellentesque mattis, fusce maecenas sit vel, accumsan eleifend et justo cras dui, wisi quisque interdum amet arcu bibendum, ante eget non mattis non. Iaculis congue cras feugiat. Platea aliquet suspendisse, orci nulla aliquam adipiscing in. Nullam libero velit in pellentesque diam est, urna phasellus, pellentesque porta eu. Ante lacus duis amet libero odio, accumsan neque tincidunt imperdiet, wisi praesent diam arcu et, erat aliquam feugiat ultricies tortor ullamcorper. Vestibulum sapien velit, ante fusce cursus volutpat tellus, eros officiis, ridiculus cum eu suscipit, felis dui sed nulla hac neque fermentum. Vivamus sagittis, malesuada nullam, dolor sit sed sollicitudin et maecenas fermentum, non nunc dapibus purus. Aliquam rhoncus aliquam sit fermentum, curabitur nulla accumsan.</p>
<p>
Nec consequat. Purus neque inceptos suscipit dictum, dolor massa ut egestas proin sed ultrices, eleifend at sed sit mi adipiscing sociis. Nostra laoreet metus nulla in. Urna eget, accumsan id mattis morbi, etiam a consequat curabitur, in felis vel. Aliquam feugiat sed, sit ligula sit praesent lobortis orci metus, nulla cursus mi velit vitae, a erat elit, velit ultrices consectetur libero perferendis libero. Risus sed, suspendisse urna in eget voluptas tristique, aliquam justo lectus, rutrum scelerisque, sem nibh qui dictum aliquet lacinia ut. Urna sagittis ac tristique gravida risus aliquam, dictum ipsum ac sodales, felis mauris repellendus porttitor aenean, orci vel feugiat nunc hendrerit. Porta eu, etiam pellentesque mauris et aliquam consectetuer donec, molestie dui magna enim, ac eu erat ut, lectus ligula feugiat urna per. Ornare aliquet ligula, ultricies sint arcu ipsum nulla. Vel ut vitae dui adipiscing.</p>
</div>
<footer>This is a footer</footer>
</div>
</body>
The trick is to use position: relative on the footer's container element and position: absolute on the footer to actually push it to the end of the container. Position: fixed isn't necessary.
https://codepen.io/cbracco/pen/zekgx
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
This example does the same thing with a container element over the entire page, instead of operating on the html and body tags.
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
This sends the footer to bottom of the bage no matter how much text you have:
.footer { background-color: #2D2D2D;
position:absolute;
bottom:0px;
width: 100%;
margin: 0;
background-color: #000;
height: 30px;/* or however high you would like */ }
html, body {
height: 100%; }
.wrapper { background-color: purple;
position: absolute;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; }
.footer, .push {
30px; }
.navbar {
background-color: red }
Ok, sorry for the misunderstanding, now it's fixed: http://www.bootply.com/N3XiwwGr9q#
Related
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 have a web page with a fixed header.
As you can see from the snippet below, the page isn't necessarily as wide as the viewport. To ensure the header width remains in sync with the rest of the page (and doesn't overflow), I use the following CSS on the app bar:
max-width: inherit;
width: inherit;
Simple fixed header example:
.page {
background-color: yellow;
margin: 0 auto;
max-width: 400px;
width: 100%;
}
.main {
background-color: aqua;
padding-top: 64px;
}
.app-bar {
background-color: red;
height: 64px;
max-width: inherit;
position: fixed;
top: 0;
width: inherit;
}
<div class="page">
<div class="app-bar">App bar</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat nibh ac magna consequat luctus. Sed scelerisque mi nec tellus posuere pellentesque. Praesent varius et risus non fringilla. Maecenas nec sodales nulla, in ultricies erat. Phasellus
purus urna, suscipit quis dui nec, sollicitudin facilisis ipsum. In varius, dolor quis vestibulum finibus, nisl mauris interdum purus, tempus malesuada ante metus at sem. Nunc mauris tellus, blandit at ipsum non, convallis fringilla risus. Etiam vitae
sapien id dui aliquet tincidunt ut ut odio. Phasellus non metus egestas, faucibus nisi sed, lacinia dui. Donec convallis massa mi, quis dapibus magna sodales at. Sed gravida, justo ut placerat rhoncus, ligula quam fermentum magna, id vehicula turpis
arcu a enim. Vivamus eget volutpat nunc. Nam consequat sapien non sodales euismod. Integer euismod orci diam, et consequat mi feugiat sed. Proin aliquam porta nisi, ut aliquam enim facilisis ut.
</div>
</div>
However, I need to make some changes to the page structure to allow a full-height fixed left nav drawer. In order to do so, I need to create space by shifting the entire content to the right.
Required fixed header functionality:
.page {
background-color: yellow;
margin: 0 auto;
max-width: 400px;
width: 100%;
}
.app-content {
margin-left: 150px;
width: calc(100% - 150px);
}
.main {
background-color: aqua;
padding-top: 64px;
}
.app-bar {
background-color: red;
height: 64px;
max-width: inherit;
position: fixed;
top: 0;
width: inherit;
}
<div class="page">
<div class="app-content">
<div class="app-bar">App bar</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat nibh ac magna consequat luctus. Sed scelerisque mi nec tellus posuere pellentesque. Praesent varius et risus non fringilla. Maecenas nec sodales nulla, in ultricies erat. Phasellus
purus urna, suscipit quis dui nec, sollicitudin facilisis ipsum. In varius, dolor quis vestibulum finibus, nisl mauris interdum purus, tempus malesuada ante metus at sem. Nunc mauris tellus, blandit at ipsum non, convallis fringilla risus. Etiam
vitae sapien id dui aliquet tincidunt ut ut odio. Phasellus non metus egestas, faucibus nisi sed, lacinia dui. Donec convallis massa mi, quis dapibus magna sodales at. Sed gravida, justo ut placerat rhoncus, ligula quam fermentum magna, id vehicula
turpis arcu a enim. Vivamus eget volutpat nunc. Nam consequat sapien non sodales euismod. Integer euismod orci diam, et consequat mi feugiat sed. Proin aliquam porta nisi, ut aliquam enim facilisis ut.
</div>
</div>
</div>
As you can see, the result is that the app-bar doesn't sync across the full width - instead it overflows the page container.
If I remove the width from app-content, the app-bar shrinks to it's content width.
What I'm looking for is to make the app-bar the same width as the app-content container, as it does in the first snippet.
Any advice appreciated as I'm running out of ideas.
Since width of your page is constant you can just give the app-bar it's desired width in this case 250px if I'm understanding you correctly:
.page {
background-color: yellow;
margin: 0 auto;
max-width: 400px;
width: 100%;
}
.app-content {
margin-left: 150px;
width: calc(100% - 150px);
}
.main {
background-color: aqua;
padding-top: 64px;
}
.app-bar {
background-color: red;
height: 64px;
max-width: 250px;
position: fixed;
top: 0;
width: inherit;
}
<div class="page">
<div class="app-content">
<div class="app-bar">App bar</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat nibh ac magna consequat luctus. Sed scelerisque mi nec tellus posuere pellentesque. Praesent varius et risus non fringilla. Maecenas nec sodales nulla, in ultricies erat. Phasellus
purus urna, suscipit quis dui nec, sollicitudin facilisis ipsum. In varius, dolor quis vestibulum finibus, nisl mauris interdum purus, tempus malesuada ante metus at sem. Nunc mauris tellus, blandit at ipsum non, convallis fringilla risus. Etiam
vitae sapien id dui aliquet tincidunt ut ut odio. Phasellus non metus egestas, faucibus nisi sed, lacinia dui. Donec convallis massa mi, quis dapibus magna sodales at. Sed gravida, justo ut placerat rhoncus, ligula quam fermentum magna, id vehicula
turpis arcu a enim. Vivamus eget volutpat nunc. Nam consequat sapien non sodales euismod. Integer euismod orci diam, et consequat mi feugiat sed. Proin aliquam porta nisi, ut aliquam enim facilisis ut.
</div>
</div>
</div>
I don't know whether you can do that due to browser compatibility, but I would suggest using position: sticky.
.page {
background-color: yellow;
margin: 0 auto;
max-width: 400px;
width: 100%;
}
.app-content {
margin-left: 150px;
width: calc(100% - 150px);
position: relative;
}
.main {
background-color: aqua;
}
.app-bar {
background-color: red;
height: 64px;
max-width: inherit;
position: sticky;
top: 0;
left: 0;
z-index: 2;
width: 100%;
}
<div class="page">
<div class="app-bar">App bar</div>
<div class="app-content">
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat nibh ac magna consequat luctus. Sed scelerisque mi nec tellus posuere pellentesque. Praesent varius et risus non fringilla. Maecenas nec sodales nulla, in ultricies erat. Phasellus
purus urna, suscipit quis dui nec, sollicitudin facilisis ipsum. In varius, dolor quis vestibulum finibus, nisl mauris interdum purus, tempus malesuada ante metus at sem. Nunc mauris tellus, blandit at ipsum non, convallis fringilla risus. Etiam
vitae sapien id dui aliquet tincidunt ut ut odio. Phasellus non metus egestas, faucibus nisi sed, lacinia dui. Donec convallis massa mi, quis dapibus magna sodales at. Sed gravida, justo ut placerat rhoncus, ligula quam fermentum magna, id vehicula
turpis arcu a enim. Vivamus eget volutpat nunc. Nam consequat sapien non sodales euismod. Integer euismod orci diam, et consequat mi feugiat sed. Proin aliquam porta nisi, ut aliquam enim facilisis ut.
</div>
</div>
</div>
Hello I have a question about how I make the image have the same height as the div. I tried changing the height to 100% without succes and making use of object-fit. Here I have a little bit of code. If you run the code block you see some text above an image and if you select the text you see it goes under the image. This is the part that is bugging me and stopping me from making progress. What I want to achieve is to let the image have the same height as the wrapper__content. For the ones who like, I will give a link to the jsfiddle: https://jsfiddle.net/remcoBaas99/pbrwuhn5/7/ . Also a quick notice: I recently changed the background-image and replaced it with the <img> element because of the alt text.
.wrapper {
position: relative;
overflow: hidden;
color: #fff;
}
.wrapper__figure {
position: absolute;
margin: 0;
z-index: -1;
}
.wrapper__content {
display: flex;
align-items: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.inner {
position: relative;
margin: auto;
padding-top: 40px;
}
img {
height: auto;
max-width: 100%;
object-fit: cover;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<figure class="wrapper__figure">
<img src="https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
</figure>
<div class="wrapper__content">
<h2>Test</h2>
<p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Sed porttitor lectus nibh.
Quisque velit nisi, pretium ut lacinia in, elementum id enim. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt.
Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
</div>
</div>
</body>
</html>
Add height: 100%; to img and .wrapper_figure
So those two rules should look like this:
.wrapper__figure {
position: absolute;
margin: 0;
z-index: -1;
height: 100%;
}
img {
height: auto;
max-width: 100%;
object-fit: cover;
height: 100%;
}
The sticky footer pattern ensures that the footer sticks to the bottom of the viewport unless the non-footer content is tall enough in which case it is pushed below the bottom of the viewport.
The following application of this pattern works for Chrome and Opera but not Firefox. Am I missing anything?
#container {
min-height:100%;
position:relative;
}
#non-footer {
padding-left: 1em;
padding-right: 1em;
padding-bottom: 150px; /* 100px + 50px (#footer::height + #footer::margin-top) */
}
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
margin: 50px 0 0 0 ;
height: 100px;
background: brown;
}
<body>
<div id='container'>
<div id='non-footer'>
<h1>Sticky footer pattern</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero ex, tempus quis dolor at, consectetur lobortis leo. Etiam faucibus velit non turpis euismod lacinia. Vestibulum lobortis neque sed mi vestibulum, sit amet venenatis nulla auctor. Aenean porttitor sed purus id ornare. Mauris sed fermentum sem, id dapibus dolor. Nullam ullamcorper ut sem in consectetur. Quisque accumsan mauris vitae mi faucibus, sed blandit libero scelerisque. Donec vitae luctus metus, non fermentum elit. Duis purus ante, tempor vestibulum facilisis id, iaculis sed eros. Maecenas condimentum tortor suscipit aliquam feugiat. Sed sed enim egestas, venenatis ex at, pharetra nibh. Nullam faucibus tincidunt erat in mollis. Nulla a nunc lacus. Proin in pellentesque lorem.
</p>
</div>
<div id='footer'>
</div>
</div>
</body>
Surprisingly, even though it works from Chrome (when I place the HTML in a file) it's not displayed properly in the Stack Overflow's HTML pen facility in full page mode — even though I'm still using Chrome. What is observed instead is that the footer rises from the bottom of the viewport. This is the exact same failure mode that is observed under Firefox.
You might want to look into the vh unit coupled with display: flex...
html,body {
margin: 0;
padding: 0;
}
.container {
min-height: 100vh; /* make the container at least the height of the viewport */
display: flex; /* use flexbox */
flex-direction: column; /* use a vertical flex layout */
}
.content {
flex-grow: 1; /* expand to fill remaining container height */
background-color: #e9e9e9;
}
.footer {
background-color: #ccc;
height: 100px;
}
<div class='container'>
<div class='content'>
<h1>Content</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero ex, tempus quis dolor at, consectetur lobortis leo. Etiam faucibus velit non turpis euismod lacinia. Vestibulum lobortis neque sed mi vestibulum, sit amet venenatis nulla auctor. Aenean
porttitor sed purus id ornare. Mauris sed fermentum sem, id dapibus dolor. Nullam ullamcorper ut sem in consectetur. Quisque accumsan mauris vitae mi faucibus, sed blandit libero scelerisque. Donec vitae luctus metus, non fermentum elit. Duis purus
ante, tempor vestibulum facilisis id, iaculis sed eros. Maecenas condimentum tortor suscipit aliquam feugiat. Sed sed enim egestas, venenatis ex at, pharetra nibh. Nullam faucibus tincidunt erat in mollis. Nulla a nunc lacus. Proin in pellentesque
lorem.
</div>
<div class='footer'>Footer</div>
</div>
Set your html, body height to 100%
html, body
{
height:100%;
}
html, body
{
height:100%;
}
#container {
min-height: 100%;
position: relative;
}
#non-footer {
padding-left: 1em;
padding-right: 1em;
padding-bottom: 150px;
/* 100px + 50px (#footer::height + #footer::margin-top) */
}
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
margin: 50px 0 0 0;
height: 100px;
background: brown;
}
<body>
<div id='container'>
<div id='non-footer'>
<h1>Sticky footer pattern</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero ex, tempus quis dolor at, consectetur lobortis leo. Etiam faucibus velit non turpis euismod lacinia. Vestibulum lobortis neque sed mi vestibulum, sit amet venenatis nulla auctor. Aenean
porttitor sed purus id ornare. Mauris sed fermentum sem, id dapibus dolor. Nullam ullamcorper ut sem in consectetur. Quisque accumsan mauris vitae mi faucibus, sed blandit libero scelerisque. Donec vitae luctus metus, non fermentum elit. Duis
purus ante, tempor vestibulum facilisis id, iaculis sed eros. Maecenas condimentum tortor suscipit aliquam feugiat. Sed sed enim egestas, venenatis ex at, pharetra nibh. Nullam faucibus tincidunt erat in mollis. Nulla a nunc lacus. Proin in pellentesque
lorem.
</p>
</div>
<div id='footer'>
</div>
</div>
</body>
Pointers: Sticky Footer - CSS Tricks
Based on this answer I ended up adding the following mozilla-specific fix:
#-moz-document url-prefix() {
html {
height: 100%;
}
body {
height: 95%;
}
}
95% is necessary as if 100% is specified, then the bottom of the footer gets cropped in Firefox (no idea why).
#-moz-document url-prefix() {
html {
height: 100%;
}
body {
height: 95%;
}
}
#container {
min-height:100%;
position:relative;
}
#non-footer {
padding-left: 1em;
padding-right: 1em;
padding-bottom: 150px; /* 100px + 50px (#footer::height + #footer::margin-top) */
}
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
margin: 50px 0 0 0 ;
height: 100px;
background: brown;
}
<div id='container'>
<div id='non-footer'>
<h1>Sticky footer pattern</h1>
<p>
<a href='https://stackoverflow.com/q/46552641/274677'>SO question</a>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero ex, tempus quis dolor at, consectetur lobortis leo. Etiam faucibus velit non turpis euismod lacinia. Vestibulum lobortis neque sed mi vestibulum, sit amet venenatis nulla auctor. Aenean porttitor sed purus id ornare. Mauris sed fermentum sem, id dapibus dolor. Nullam ullamcorper ut sem in consectetur. Quisque accumsan mauris vitae mi faucibus, sed blandit libero scelerisque. Donec vitae luctus metus, non fermentum elit. Duis purus ante, tempor vestibulum facilisis id, iaculis sed eros. Maecenas condimentum tortor suscipit aliquam feugiat. Sed sed enim egestas, venenatis ex at, pharetra nibh. Nullam faucibus tincidunt erat in mollis. Nulla a nunc lacus. Proin in pellentesque lorem.
</p>
</div>
<div id='footer'>
</div>
</div>
This works in Firefox as well but not as a Stack Overflow HTML/CSS snippet (when in full screen mode).
This duplicate didn't solve because I don't want to use JS. CSS: Sidebar fixed width with background to edge of window
This is what I'm trying to achieve:
Basically all the content must be inside a div with a specific width and set to the center with margin: 0 auto. Inside this div there must be a main div with a white background and a sidebar with a blue background.
I don't want to use javascript. Isn't this possible with pure CSS?
CURRENT CODE (not working): https://jsfiddle.net/0p9jrnq1/1/
Try this..
.sidebar {
position: static;
}
.sidebar:after {
content: "";
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 22%; (adjust till get the right width)
height: 100%;
bacgkround: (the sidebar background);
z-index: (below sidebar);
}
Doing this with fixed with seems kind of tough for me. If you can do with percentages, then this works. All you have to add to this is use media queries in order to reduce the size or hide the left and right gutters when viewing this layout in smaller screens.
HTML:
<div class="container">
<div class="left-gutter"></div>
<div class='content'>
<div class="main"> </div>
<div class="sidebar"> </div>
</div>
<div class="right-gutter">
</div>
CSS:
.container {
width:100%;
}
.container > .left-gutter, .container > .right-gutter {
width:20%;
}
.container > .left-gutter {
height:100%;
float:left;
}
.container > .right-gutter {
height:100%;
background: #0000FF;
float:right;
}
.container > .content {
width: 60%;
height:100%;
float:left;
min-width: 200px;/*Your minimum fixed width here*/
}
.container > .content > .main {
width: 80%; /*Width for the content area in %*/
float: left;
height:100%;
background:#FFFFFF;
}
.container > .content > .sidebar {
width: 20%; /*Width for the sidebar area in %*/
float: right;
height:100%;
background:#0000FF;
}
Make sure width percent of main and sidebar add up to be 100%
Using padding and margins will require you to adjust the widths of the elements accordingly.
Take a look at this layout
body {
margin: 0;
padding: 0;
}
#header {
background-color: #02CC02;
width: 100%;
position: relative;
z-index: 2;
}
#header .clearfix {
padding: 40px;
}
#main-content {
background-color: white;
}
.page-content {
margin: 0 auto;
width: 55%;
}
#sidebar {
background-color: rgba(238, 130, 238, 0.92);
position: fixed;
right: 0;
top: 0;
width: 300px;
height: 100%;
z-index: 1;
}
#sidebar .clearfix {
padding: 60px;
}
<div id="header">
<div class="clearfix"></div>
</div>
<div id="main-content">
<div class="page-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor blandit mauris, vel ornare metus cursus eu. Maecenas faucibus nisl non mauris sagittis, at porttitor lorem vestibulum. Curabitur vulputate facilisis nunc nec imperdiet. Sed finibus risus eu quam bibendum, imperdiet commodo felis condimentum. Morbi dapibus, libero eu malesuada sagittis, justo urna ullamcorper odio, a venenatis orci turpis ac nisi. Ut porta commodo nibh, at auctor nisi dapibus sit amet. Nullam tincidunt urna at nisi finibus dictum.</p>
<p>Duis orci purus, varius vel dolor a, pharetra mattis ipsum. Duis aliquam velit sed ex consequat pretium. Donec eleifend mattis elit, sit amet accumsan diam sodales id. Nulla sed sem nisl. Sed mattis nunc massa, eget ultrices ex luctus sit amet. Curabitur porttitor turpis non tortor venenatis, at blandit dui elementum. Proin vehicula, augue ac tempor euismod, erat quam iaculis velit, a bibendum erat sapien sed dolor. Proin sed augue convallis, molestie sem id, finibus ante. Ut in tincidunt ligula, non rutrum tortor. Cras eu ex eleifend, volutpat nibh at, faucibus nunc. Nam eget augue porta, congue tellus id, viverra turpis. Curabitur quis felis ligula. Phasellus lacus erat, molestie eget sapien quis, luctus feugiat mi. Nam tristique, sem eget aliquam interdum, ligula neque malesuada diam, vitae rhoncus elit est eu arcu.</p>
<p>Etiam finibus purus mattis, elementum nibh sit amet, eleifend nulla. Duis tortor eros, bibendum eget mattis nec, feugiat quis sem. Curabitur consequat urna in turpis facilisis maximus. Nulla elementum molestie ligula. Vestibulum eleifend fermentum quam ut sagittis. Integer nunc tortor, condimentum et posuere vel, vestibulum quis leo. Ut feugiat vehicula arcu, laoreet vehicula mi rutrum vitae.</p>
<p>In venenatis, erat eu interdum ornare, leo magna eleifend elit, vitae fermentum metus dui vel quam. Vivamus auctor lacinia porta. Nullam vitae vestibulum libero. Quisque tincidunt pellentesque metus, sit amet pharetra est mattis quis. Sed mattis, nisl a interdum porttitor, velit ligula lacinia orci, sed hendrerit augue dolor vel nisi. Aliquam ut ex vitae nunc aliquam aliquam et in mi. Phasellus sit amet ante quis ipsum cursus volutpat eget eget lectus. Curabitur tempor sed odio id pulvinar. Suspendisse sed elit egestas, lobortis est id, aliquet urna. Mauris ac purus at justo condimentum rutrum non eget libero. Quisque scelerisque erat sed orci consequat suscipit. Quisque sit amet dui hendrerit, commodo arcu quis, tristique quam. Phasellus feugiat nulla velit, nec condimentum nisl varius eget. Mauris facilisis et arcu vitae ultrices. Vivamus viverra, lorem vitae eleifend vulputate, neque sem volutpat ante, eget rhoncus erat nisl ac turpis.</p>
</div>
</div>
<div id="sidebar">
<div class="clearfix"></div>
</div>
Use JS to show and hide the sidebar