I would like to create footer effect just like on this site. I think I need a wrapper for my content and then add footer.
So structure would be like:
<div class="content"></div>
<div class="footer">
<div class="footer-content">
</div>
</div>
And CSS like:
.footer{
width: 100%;
}
.footer-content{
position: fixed;
bottom: 0;
width: 100%;
z-index: 0;
}
.content{
z-index: 9999 !important;
background-color: #fff;
position: relative;
margin-bottom: 600px; //height of my full footer
}
However this doesn't make this effect. Please help and sorry for my english.
To achieve this you'll need to make the footer fixed and have the content scroll above it.
A rough example of the CSS would be:
.content {
position: relative; /* required for z-index to work */
z-index: 2; /* bring above footer */
margin-bottom: 100px; /* the height of the footer */
}
.footer {
position: fixed; /* fix in position */
z-index: 1; /* bring below content */
bottom: 0; /* anchor to bottom of screen */
left: 0; /* go full width */
width: 100%; /* go full width */
}
please check this code
HTML
<div class="content">
<h1>Content</h1>
</div>
<div class="footer">
<div class="footer-content">
<h1>Footer</h1>
</div>
</div>
CSS
.footer{
width: 100%;
height: 1px;
display: block;
}
.footer-content{
bottom: 0;
display: block;
position: fixed;
width: 100%;
z-index: 0;
background: #f1f1f1;
}
.content{
z-index: 9999 !important;
background-color: #fff;
display: block;
position: relative;
width: 100%;
height: 1500px;
margin-bottom: 600px;
margin-top: -30px;
}
A sample
Fixed footer effect in CSS
Related
I have a page with a collapsable sidebar (black area). On the right we have the content area. In my example I have a grey square which represents a table. Now I have a div to float on top of this table (red on the picture) and make it fixed to the screen. So it scrolls with the page, but is centered to the content area. See example 1.
Right now it is centered to the viewport, meaning that the sidebar is also taken in account. Which makes the red square look like example 2.
Example 1:
Example 2: (current state)
Does anyone know any CSS tricks to center the fixed div to the content area, and not to the viewport. Maybe using calc or more margin on the left?
Code Pen
Here the code pen which demonstrates example 2
<div class="sidebar"></div>
<div class="content">
<div class="content-body">
<p>Content in here</p>
</div>
</div>
<div class="popup">
<p>This should be centered on content instead of the viewport</p>
</div>
.sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 250px;
background-color: #000;
}
.content {
width: calc(100% - 250px);
position: absolute;
top: 0;
right: 0;
background-color: #efefef;
}
.content-body {
width: 100%;
height: 2000px; /* to create some scrollable page*/
max-width: 1200px;
margin: 1em auto;
background-color: #afafaf;
}
.popup {
position: fixed;
width: 100%;
max-width: 1200px;
top: auto;
bottom: 0;
left: 0;
right: 0;
background-color: red;
margin: 1em auto;
}
https://codepen.io/finiox/pen/mdmJVwK
If I understood your question correctly, you can just change left: 0 to left: 250px for .popup
If the sidebar has a static width. Which is has in this case. You need to use the transform property and transform it to half the width of the sidebar.
transform: translate(125px, 0);
Optionally you can store the sidebar width in a root variable and use calc to get half the width.
:root {
--sidebar-width: 250px;
}
.popup {
transform: translate(calc(var(--sidebar-width)/2), 0);
}
if the sidebar is not always visible, then add a class (ex: is-sidebar-active) then you can select popup using something like .is-sidebar-active + nextSibling + nextSibling. Then just add left: SIDEBAR_WIDTH into popup.
Example:
:root {
--sidebarWidth: 250px;
}
.sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: var(--sidebarWidth);
background-color: #000;
}
.content {
width: calc(100% - 250px);
position: absolute;
top: 0;
right: 0;
background-color: #efefef;
}
.content-body {
width: 100%;
height: 2000px; /* to create some scrollable page*/
max-width: 1200px;
margin: 1em auto;
background-color: #afafaf;
}
.popup {
position: fixed;
width: 100%;
max-width: 1200px;
top: auto;
bottom: 0;
left: 0;
right: 0;
background-color: red;
margin: 1em auto;
z-index: 9;
}
.is-sidebar-active + .popup {
width: calc(100% - var(--sidebarWidth));
left: var(--sidebarWidth);
}
<div class="sidebar is-sidebar-active"></div>
<div class="popup">
<p>This should be centered on content instead of the viewport</p>
</div>
<div class="content">
<div class="content-body">
<p>Content in here</p>
</div>
</div>
Whenever I set my navbar to fixed and my header height is 100vh, my header seems to be under the navbar. How can I make the navbar not cover my header and make header 100vh
.nav {
height: 80px;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: red;
}
.hero {
background: blue;
height: 100vh;
margin-top: 80px;
}
* {
margin: 0;
}
<div class="nav">
</div>
<div class="hero">
</div>
Use position: sticky instead of position: fixed. This way your main container will always be 100vh.
In css I made edits.
* {
margin: 0;
}
.nav {
height: 80px;
position: sticky;
top: 0;
/*left: 0;*/
width: 100%;
background: red;
}
.hero {
background: blue;
min-height: 100vh;
/*margin-top: 80px;*/
}
<div class="nav">
</div>
<div class="hero">
</div>
Try setting the nav to position:sticky; instead
example: https://jsfiddle.net/sq5ae3u1/
I have two independently scrolling divs, one with a header and footer.
<body>
<div class="container col-1">
Many listings
</div>
<div class="container col-2">
<div class="header">Fixed Header</div>
<div class="content">Lots of content</div>
<div class="footer">Fixed footer</div>
</div>
</body>
See this fiddle: https://jsfiddle.net/bhmvv05n/
The problem is, I'd like the second container div to have a fixed header and footer that are always visible and have only the content scrollable.
As soon as I change the scrolling of the col-2 div, the two columns don't scroll independently anymore.
Any advice?
Thanks!
This will adjust to whatever width you have for your columns.
The idea is that you only make .col-2.content scrollable, not the whole .container.
* {
box-sizing: border-box;
}
html, body {
margin: 0;
height: 100%;
}
.container {
height: 100%;
}
.col-1{
float: left;
width: 33%;
overflow: auto;
}
.col-2{
float: left;
width: 67%;
position: relative;
}
.col-2 .content {
position: absolute;
left: 0; right: 0;
top: 20px; /* header height */
bottom: 20px; /* footer height */
overflow: auto;
}
.header, .footer {
height: 20px;
background-color: red;
position: absolute;
left: 0; right: 0;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
Could something like this work for you?
https://jsfiddle.net/vz7eb8uc/
Code changed;
.col-1{
float: left;
width: 33%;
position: relative;
}
.col-2{
float: left;
width: 67%;
position: relative;
}
.header, .footer {
height: 20px;
background-color: red;
position: fixed;
left: 33%;
width:67%
}
I have readed alot and still didn't position my footer proper. I am trying to position my footer to stay at the bottom of the page and be visible only when I scroll to the bottom.
I have added the folowing classes to the page:
<div class="wrap">
<!-- Holds all the page content inside -->
<div class="spacer"></div>
</div>
<div class="footer">
.....
</div>
I have added the folowing css to the classes:
.wrap {
min-height: 100%;
margin-bottom: -100px;
padding:5%;
}
/* Set the fixed height of the footer here */
.footer {
position: relative;
background-color: #222;
z-index: 1;
}
.spacer, #footer {
height: 100px;
}
What am I doing wrong and preventing the footer to stay always at the bottom?
Position your footer as absolute and add bottom: 0 to your footer class.
.footer {
...
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
More elegant solution would be like this
html, body{
margin: 0;padding:0;
}
.fake-body{
height: 200px;
overflow: auto;
}
.wrap {
position:relative;
}
/* Set the fixed height of the footer here */
.footer {
position: absolute;
background-color: #222;
z-index: 1;
bottom:0;
left:0;
right:0;
color:white;
}
.spacer, #footer {
height: 300px;
}
<div class="fake-body">
<div class="wrap">
<div class="spacer">spacer</div>
<div class="footer">footer</div>
</div>
</div>
Add this to the footer class
position: relative;
bottom: 0;
margin: 20px 0 0 0;
width: 100%;
This will keep the footer to the bottom
<div class="footer">
Your content
</div>
In this code I have a sticky footer and a content section above, but why height:100% doesn't work for content section?
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
height: 100%;
}
.content {
background-color: #116655;
height: 100%;
}
.footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
background-color: #ffcc44;
}
<div class="content">
<div>content</div>
</div>
<footer class="footer">
My footer
</footer>
You need to set an actual height on the html
html {
position: relative;
height: 100%; /* not min-height */
}
JsFiddle Demo
Use position: absolute on the content as well, then use top: 0 and bottom: 60px this will make the content take up the remaining space. then use overflow: auto; to allow scrolling the content;
(Demo)
.content {
position: absolute;
top: 0;
bottom: 60px;
background-color: red;
overflow: auto;
}