In this fiddle I want to create a footer that stays at the bottom of the page, as in this screenshot:
However, when the browser window is minimized so that the viewport is less than the content area, and the page is scrollable, the footer stays in the middle of the page rather than below the content. Once a user scrolls, the footer stays in the middle of the content boxes, like in this screenshot:
How do I create a footer that stays at the bottom of the viewport when there is no scrollbar, but then stays at the bottom of the content boxes when a scrollbar appears and content is outside the viewport?
I am using position:absolute; bottom:0; on the footer. Do I need to add declarations to my content box, or to the footer? Thanks for your help!
There are a lot of attempts to do this via CSS, most are hacky workarounds, and honestly its WAY easier to do with Javascript. But for pure CSS, it usually goes something like this:
1) Setting * to border-box:
* {
-webkit-box-sizing:border-box;
-moz-bos-sizing:border-box;
box-sizing:border-box;
}
2) Set footer to position:absolute, with fixed height:
#footer {
position:absolute;
left:0;
right:0;
bottom:0;
height:40px;
}
3) Set html,body, and your container to height:100%, min-height:100%, and your container position to something other than static, and padding-bottom to whatever your footer height is + a little gap (if you want):
html,body,#container {
height:100%;
min-height:100%;
}
#container {
position:relative;
padding-bottom:50px;
}
This should handle it decently well for IE8 and above. For IE7 and below ... well that gets pretty damn tricky, you can google that one if you'd like. :) Some notes:
The box-sizing declaration is needed to ensure height of 100% includes padding (otherwise it would just be 100% plus the padding you gave it).
when position:absolute is used on a child element, position other than static must be declared on the parent for the childs position to be relative to the parent, otherwise it will be the first parent up the DOM tree with position other than static (in this case, it will just be the window).
Related
I have a footer that have this css style
position: absolute;
bottom:0;
left:0;
right:0;
width:100%;
background-color:#000000;
color:#ffffff;
text-align:center;
but if I open the browser in a small window (so without see all the content of the page) the footer is on the bottom and when I scroll down footer remains fixed in the middle of the page!
How can I solve?
is your parent container (parent of footer) set to position:relative. try setting body to position:relative or footer to position:fixed and body to padding-bottom: height of your footer (so it doesn't cover the content).
Hope it helps
I think you have to use position: fixed; to have the desired output.
absolute position make your footer on the bottom of the current height of the window, relative to the parent (here the parent is the body) when you load it. (So when you scroll in doesn't follow the scroll to the bottom)
An element with position:fixed is fixed with respect to the viewport.
It stays where it is, even if the document is scrolled.
Fiddle
Here's the wiki about difference between absolute/fixed position
https://www.w3.org/wiki/CSS_absolute_and_fixed_positioning
I have at the top of my page a div dedicated as a top bar. I want the position to be fixed so that it stays in the same place when scrolling. BUT.. once I apply the fixed positioning, all of the content moves up by about 30px (the size of the bar) and sits behind the bar making the header appear smaller in height than what it should be.
Once the css for position:fixed is removed from #topbar the content moves down to it's desired place
code via codepen: http://codepen.io/Hafkamp/pen/jabmE
css
#topbar{position:fixed}
To the #topbar, add CSS:
#topbar{
top:0;
}
Also, to the #header add:
#header{
margin-top:30px;
}
This way, your #topbar will stick to the top of the page and the following html will be pushed down by 30px(the height of the #topbar)
Just give the margib top to the header of 30 px
I have an iFrame that loads flash content. I want this content to take up whatever portion of the screen is left. So the frame has a height of 100%, but I noticed the bottom gets cut off a little bit, causing the some of the flash content to be cut off. How can I write some CSS to sort of calculate what 100% of the rest of the page is (I have some bootstrap buttons at the top of this interface that take up some space).
If you are using CSS3, you can use the calc function like this:
height: calc(100% - 30px);
Or whatever the height of you button bar.
Try positioning your flash box as absolute, don't set its width and height explicitly in CSS and just set the offset left, top, right, bottom like this:
div {
background:green;
position:absolute;
bottom:10px;
top:30px;
left:100px;
right:100px;
}
Fiddle
I noticed a behavior that drives me crazy.
I have two divs, that have both similar css:
.one, .two {
position: fixed;
bottom: 6%
}
One div is for navigation, and other is for content, that has max 300px height. The problem is, that if the user resizes the browser window to really small one, the scrollbar is not shown.
I tried to change position to absolute, but then the ajaxify plugin breaks the position if new page is loaded. I couldn't find other ideas, how to position those divs at fixed position at bottom.
p.s. I pasted a sample test on http://pastebin.com/Bp1490dj
the background-green div is at the bottom with position:absolute;
from what I know a position:fixed; and or position:absolute; will never make a scroll. (please correct me if I'm wrong) so a way to go arround this is to set a min-height to body
body {
min-height:200px;
}
have a look at the fiddle http://jsfiddle.net/u2ZWa/
also, there is a fix with a scroll now. But you have to know the fixed elements will never be scrollable because they're fixed
Scrollbars are not compatible with a fixed positioning.
We need to display data in a scrollable div.
We have created a simplified fiddle to demonstrate: http://jsfiddle.net/ZsQ5J/3/
The div contains two parts, a header and the content.
We want the Header to scroll horizontally along with the content, but to be fixed while vertical scrolling through the content.
We would like to achieve this completely in CSS if possible, we could solve it with jQuery I guess, but would prefer not to have to.
We have got most of the way there in CSS, but we can't get the content div to stretch the full width of the header. Because, I guess, making the content div 100% of the containing div isn't the full width of the header.
In a little more depth:
HEADER:
We want the header to stay visible all the time when scrolling up/down through the content. However the header is wider than the containing div so we do want it to scroll horizontally. (So no vertical scroll on the header, just horizontal). We have got this part working. The header is a table.
CONTENT:
The content is a div that we want to scroll both horizontally (in sync with the header) and vertically (independently of the header). This is the part we are having problems with. The scroll is working well, but the width is not expanding to match the header. It will only go as wide as the containing div.
I know it's weird to have a table as the header and a div as the content, but due to legacy issues we need to keep it this way.
Not sure from the question if you can add addition elemnts to markup, but if you can, possible solution is this: http://jsfiddle.net/ZsQ5J/8/
But there is possible problem — scrollbar will not be seen bu default. Is it ok this way?
Not sure if this is exactly what you want but this works.
-Wakeeta
body
{
width:100%;
}
#outer_container
{
margin-top:20px;
margin-left:auto;
margin-right:auto;
width:100%;
border:6px solid #FF0000;
overflow-x:auto;
overflow-y:hidden;
}
#top_container
{
display: block;
width:1500px;
padding:10px;
background-color:#CC66FF;
}
#bottom_container
{
height: 400px;
width:1500px;
padding:10px;
background-color:#FFFF66;
overflow-y:scroll !important;
}
em
{
font-weight:bold;
}