I would like to re-create this revealing sticky-footer effect found at http://www.akc.org/dog-breeds/
I know the footer has to be fixed.
I know the content needs to have a higher z-index
I'm guessing (sort of) that the body needs to have a margin-bottom which is equal to the height of the footer???
Please would someone help me out.
I'm using Twitter Bootstrap 4. The general markup looks like this:
<body>
<div class="container"> <!-- This part should scroll up to reveal the footer below -->
<!-- Content goes in here -->
</div>
<footer class="footer"> <!-- This should be hidden initially -->
<div class="container">
<div class="row">
<!-- Footer stuff goes in here -->
</div>
</div>
</footer>
</body>
You will want to add a main content div and then give this div a background color of whatever you want your page to be otherwise you will just end up having text overlapping but yes you are right you will want to give your main content div a z-index of 1 or something and then fix your footer behind that and give it a z-index smaller than that in my example I gave it a z-index of -1. Then your main content div will scroll over the top of your footer. You will probably want to give your footer a height and your body a padding-bottom of the same height.
Here is an example of how I did it Fiddle Demo:
Html:
<div class="main-content">
<div class="container">
<div class="row">
Your main Content Scroll down
</div>
</div>
</div>
<footer>
<div Class="container">
<div CLass="row">
Footer Content
</div>
</div>
</footer>
Css:
body{
padding-bottom:200px;
}
.main-content{
min-height:200vh;
background:#fff;
z-index:1;
}
footer{
position:fixed;
bottom:0;
left:0;
width:100%;
height:200px;
background:#000;
color:#fff;
z-index:-1;
}
Related
I am facing problem. My page doesn't look like what i am expecting.
*{margin:0; padding:0;}
.width{width:980px;margin:0 auto;}
.header{width:100%;background-color:#ffffbb;}
.leftpanel{float:left;height:50px;}
.rightpanel{float:right;height:50px;}
.clear{clear:both;}
h2{font-size:32px;}
<!-- HEADER AREA -->
<div class="header">
<div class="width">
<div class="leftpanel">
<h2>This is first sentence</h2>
</div>
<div class="rightpanel">
<h2>This is second sentence</h2>
</div>
<div class="clear"></div>
</div>
</div>
On window minimize my header color is getting shrinks and not covering whole width of the content. How to fix it ? I tried to use max-width:980px; but that is collapsing the content when minimizing the browser. I want bottom scroll to cover the whole width without collapsing the content and background color to get fixed.
I see what you're doing wrong. Basically, your header only extends to a width of 100%, that is 100% of the viewport. When you shrink your screen past 980px, as denoted by your .width element some of your content goes out of the viewport thereby extending outside of the header. You can do many things to fix this, a really quick fix would be to add a float to the header and set its minimum width to 100%. e.g.
*{margin:0; padding:0;}
.width{width:980px;margin:0 auto;}
.header{min-width:100%;float:left;background-color:#ffffbb;}
.leftpanel{float:left;height:50px;}
.rightpanel{float:right;height:50px;}
.clear{clear:both;}
h2{font-size:32px;}
<!-- HEADER AREA -->
<div class="header">
<div class="width">
<div class="leftpanel">
<h2>This is first sentence</h2>
</div>
<div class="rightpanel">
<h2>This is second sentence</h2>
</div>
<div class="clear"></div>
</div>
</div>
This is because you are giving fixed width to the elements .
Use the following Css and your problem will be solved:
*{margin:0; padding:0;}
.width{width:100%;margin:0 auto;}
.header{width:100%;background-color:#ffffbb;}
.leftpanel{float:left;height:50%;}
.rightpanel{float:right;height:50%;}
.clear{clear:both;}
h2{font-size:32px;}
Also try reading why not to give fixed width and height, this would help you understand better
Sorry, I couldn't post images without a higher reputation, so I linked them below:
PSD:
HTML:
Okay, the PSD screenshot is of what I want the alignment to do.
And the HTML screenshot is it's current form.
As you can tell, the sidebar is currently below the orange bar (nav) and the grey bar (banner). I know there is a way to make its position absolute and overlay it on top, but seeing that this is built on a responsive grid, I think that would ruin it.
Does anyone know of anyway to overlap the sidebar like it is shown in the psd without ruining the responsiveness?
I'm open to any and all suggestions.
Thanks!
Code:
<div class="container">
<div class="row">
<header> content </header>
</div>
</div>
<nav> content </nav>
<div class="container">
<div class="row">
<div class="col-sm-9">
<section>
<!-- Services Section Content -->
</section>
<services>
<!-- Clients Section Content -->
</section>
<section>
</div>
<div class="col-sm-3">
<!-- Sidebar -->
</div>
Using position:absolute would not ruin your responsive layout if you edit your media queries to compensate.
Alternately, try a negative margin on the sidebar element and set the z-index to be higher than the top bar element. Example:
header {
width:100%;
height:100px;
background:#ccc;
z-index:100;
}
.col-sm-9 {
width:200px;
height:500px;
margin:-50px 0 0 0;
background:#000;
z-index:200;
}
Have a fiddle: http://jsfiddle.net/68ANR/
It will perfectly works.Try it because position:absolute give the position to the main div or the parent div.
.col-sm-9 {
position:absolute;
left:/*give here from left*/px;
top:/*give here from top*/px;
width:200px;
height:500px;
background:#000;
z-index:200;
}
Hope the answer !
EDIT 10.12am 17th April.`Your jsfiddle and on the emulator works perfectly and as I would expect however I am having no luck. My html is
<img src="/images/mobile/m_tech_fuss.png" alt="Payco Tech logo" width="100%">
<div id="wrap">
<div id="main">
<div><img src="images/mobile/m_tech_welcome.png" width="100%" />
</div>
<div><img src="images/mobile/m_tech_self_e-contracts.png" width="100%" />
</div>
<div><img src="images/mobile/m_tech_optout.png" width="100%" />
</div>
</div>
</div>
<div id="footer"><img src="images/mobile/m_tech_soundsgood.png" width="100%" />
</div>
and css is exactly as you stated however not only does this not move the orange footer image at all but it also messes with my homepage layout :(
EDIT: 5.10pm 6th April
I found a guide which appears to work ok http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
The orange footer stays at the bottom on any mobile screen however there is still some a gap between the last bit of content and the footer which forces me to scroll down whereas on a page where there is little content, the footer should just be sitting there already. Also this guide has messed up with my green strip images which are now no longer 100% in width :(
Here is my code:
<div id="container">
<div id="header"></div>
<div id="body">
<div><img src="images/mobile/m_tech_welcome.png" width="100%"></div>
<div><img src="images/mobile/m_tech_self_e-contracts.png" width="100%"></div>
<div><img src="images/mobile/m_tech_optout.png" width="100%"></div>
</div>
<div id="footer"><img src="images/mobile/m_tech_soundsgood.png" width="100%"></div>
</div>
and my css
`}
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#fff;
padding:10px;
}
#body {
padding:10px;
padding-bottom:70px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:70px; /* Height of the footer */
content:url("../images/mobile/m_tech_soundsgood.png");
}
#container {
height:100%;
}`
If all you want is for that image to always sit at the bottom of the screen, it looks like you are making it a bit too complicated. Try:
div#content
{
position: fixed;
bottom: 0px;
}
To get CSS sticky footer to work you can't have any content outside of the #wrap or the #footer divs or it will mess up the height calculations. It will push the #wrap div, which has a min-height of 100%, down the page. This means that the bottom of the #wrap div is lower than the bottom of the screen. Resulting in unreliable behavior. Especially if the height of the content outside the #wrap or the #footer divs is of variable height, which is what was happening in this particular case.
You can either place a header inside the #wrap div in a config much like this:
<div id="wrap">
<div id="header">
<!-- Header content -->
</div>
<div id="main">
<!-- Main content -->
</div>
</div>
<div id="footer">
<!-- Footer content -->
</div>
Or you can leave it outside of the #wrap and #footer div and compensate by adding a padding-top value equal to the height of the header on the #main div. This is to stop the content inside the #main div from rendering over the top of the header outside of the #wrap and #footer divs.
I have the following problem.
I am using a twitter bootstrap to make my new website but I have difficulties with the background. The following is what I have :
<body>
<div class="wrapper">
<div class="navbar navbar-inverse navbar-fixed-top">
...
</div>
<div id="header">
...
</div>
<div id="content">
...
</div>
<div class="push>
</div>
</div>
<div class="footer">
....
</div>
</body>
The navbar is fixed at top. (fixed height)
The header (title stuff) is scrolling with the page and is fixed height.
the footer is at the bottom of the page but scrolls if there is more content (not fixed at bottom but fixed height)
What I want is that the content has a background that takes all the avaiable space (from right after the header till the footer)
Image to clarify
Full HTML & CSS(without bootstrap css) code
So you want the content area to be at least 100% less header and footer so to speak?
This is how i would do it:
demo:
http://jsbin.com/ofijap/1/edit
.head {
height:100px;
background-color:green;
}
.wrap {
min-height:100%;
background-color:red;
}
.footer {
height:100px;
background-color:grey;
margin-top:-100px;
}
.content {
padding-bottom:100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="wrap">
<div class="head">Head</div>
<div class="content">content</div>
</div>
<div class="footer">footer</div>
</body>
</html>
EDIT:
as a rule of thumb, if you want something to fill up all the vertical space it probably needs min-height:100%; But, its parent should have 100% height too, and so on up to the body element.
To the people who want to see my final result: thanks to #user1721135 ;)
http://jsbin.com/udoxet/2/edit
Now I'm gonna try and port it to my own website see if that works :)
I'm looking for a possibility to set the footer to the end of my page or the end of my content if the content is greater than one page.
I do not want to have a fixed footer where the content is scrollable.
I do not know whether it is possible.
So, this is my code.
The div with class="div1" contains the content.
The content contains the content as well as the footer.
<div class="div1">
<div class="content">
<div class="myContent"></div>
<div class="myContent"></div>
<div class="myContent"></div>
<div class="footer"></div>
</div>
</div>
The footer has a height of 50px.
My problem is following:
If I have a screen height with height:500px and the content is only 150px high, the footer is set after the last div-element with class="myContent".
It should be set to the end of the page like the effect I receive with
bottom:0;position:fixed
But if the content is 600px high the footer should be set right after the last div with class="myContent". No styles would be needed here.
Have you got an idea how to solve it?
do you mean Make the Footer Stick to the Bottom of a Page ?
or this one
the css
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
and the html
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
I think this may help you get rid off this problem:
.footer {position:absolute;left:0;right:0;bottom:0;background:green;height:50px}
This may solve the objective:
<div style="position:absolute">
<div style="position:absolute">
<div id="top" style="height:50px;width:100%;position:fixed;left:0;top:0;background:red"> content 1 </div>
<div id="middle" style="background:green;position:fixed;top:50px; left:0;bottom:50px;right:0">content 2 </div>
<div id="middle" style="background:blue;position:fixed;top:100px; left:0;bottom:50px;right:0">content 3 </div>
<div id="bottom" style="height:50px;width:100%;position:fixed;left:0;bottom:0;background:orange">Footer</div>
</div>
</div>