My footer will not stick to the bottom of the page in the latest Firefox, while it works in Chrome and IE11. From what I can tell the min-height:100% for the wrapper has no effect in Firefox.
HTML
<div id = "wrapper">
<div id = "content">
</div>
<div id = "push">
</div>
</div>
<div id = "footer"></div>
CSS
#wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -235px;
}
#push{
height:235px;
}
#footer{
position:relative;
height:235px;
width:100%;
}
It's hard to say by the posted code but according to CSS level 2 spec:
10.7 Minimum and maximum heights: 'min-height' and 'max-height'
The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the percentage
value is treated as '0' (for 'min-height') or 'none' (for
'max-height').
Hence you should make sure that the parent of #wrapper has an explicit height. If the #wrapper is located in <body>, try specifying height: 100% on <body> and <html> elements as well:
html, body {
height: 100%;
}
Because a percentage value for height property is relative to the height of the generated box's containing block as well, in this case the <html>. Otherwise the value computes to auto.
In addition, using height: auto !important; and height: 100%; together doesn't make sense and they're pointless; So it's better to remove them.
#wrapper{
min-height: 100%;
margin: 0 auto -235px;
}
Finally if it didn't work, you could give the following approach a try:
Position footer at bottom of page having fixed header
Let's simplify what you have a little.
Your #push can be replaced with the pseudo element :after on your wrapper.
Remove the height on the wrap and avoid !important.
html,body needs to have a height of 100% in order for other elements to have percentage heights
Have an example!
HTML
<div class="wrap">
<!-- main content -->
</div>
<footer class="footer"></footer>
CSS
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.wrap {
min-height: 100%;
margin-bottom: -235px;
}
.wrap:after {
content: "";
display: block;
}
.footer, .wrap:after {
height: 235px;
}
.footer {
background: #F00;
}
If you are trying to have your your footer stick to the bottom, use:
#footer{
position:fixed;
bottom:0;
height:235px;
width:100%;
}
I just tried it with your code and verified that it works on the latest firefox.
Related
I want the child elements of a height:100%; container to apply height:100%;. This seems to fail when there is a doctype present.
If you use min-height:100%; for the parent, the child elements don't apply height:100%;.
If you use height:100%; the child elements get stretched, but will overflow the parent.
If you then try to use height:100%; on the parent and keep min-height:100%; on the children, the children won't stretch anymore.
Here's a little sample:
<!DOCTYPE html>
<html>
<head>
<title>Oh Well</title>
<style>
html, body {
width: 100%;
height:100%;
background: white;
margin:0;
padding:0;
}
#min-h-100 {
background-color: #eee;
min-height: 100%;
}
#min-h-100 > div{
min-height: 100%;
}
#h-100 {
background-color: #ccc;
height: 100%;
}
#h-100 > div {
height: 100%;
}
</style>
</head>
<body>
<div id="min-h-100">
<div>If this is heigher than the container, the container expands.</div>
<div>The child elements do not get 100% height.</div>
</div>
<div id="h-100">
<div>The child elements get 100% height.</div>
<div>But there will be an overflow.</div>
</div>
<div>THIS SHOULD BE PUSHED DOWN</div>
</body>
</html>
edit:
min-height doesn't inherit. #GCryrillus came up with the idea to apply display:table to the parent, which at least stretches the parent. #Volker E. created a codepen.
edit:
If you don't want to support IE≤8, you can set the child min-height:100vh; which will make it at least as high as the viewport.
I find this question interesting, especially case #2 with id="h-100" implying several height: 100% children on height: 100% parent.
I've come up with a Codepen including the different options.
To prevent a overflow on the second case, you could also use overflow: hidden, but that would be an information loss.
#GCyrillus said it right, use display: table; and display: table-row/table-cell; conformingly to the child divs.
#h-100-table {
background-color: #ddd;
display: table;
width: 100%;
height: 100%;
}
#h-100-table > div {
display: table-row;
width: 100%;
}
#h-100-table > div > div { // you don't need to go for extra nesting, but it's clearer.
display: table-cell;
width: 100%;
}
The grand-children of #h-100-table are not essential, it's more for maintainability. You could go with table-row children only too.
If you don't want to support IE≤8, you can set the child min-height:100vh; which will make it at least as high as the viewport (so basically gives you the wanted effect). (seen here)
I have a document structure that maintains the header at the top of the page and the footer at the bottom. It's working well as long as the content in the middle is less than the height of the window. If the content is too long, the footer gets pushed further down the page and a full body scrollbar is displayed.
How can I get the scrollbar to be limited to the content DIV.
Note that the content of the header and footer are not fixed so I don't know the height of those elements and can't set the top position of the content element as a fixed value. I've added a show/hide feature in the example to demonstrate this.
I'm trying to resolve this in pure CSS (avoiding Javascript). I know that using javascript, I could monitor changes to window size and element visibility, I could calculate the height of the header and footer and set fixed dimensions to the content element. But is there a non-javascript solution?
http://jsfiddle.net/sA5fD/1/
html { height: 100%; }
body {
padding:0 0;
margin:0 0;
height: 100%;
}
#main {
display:table;
height:100%;
width:100%;
}
#header, #footer {
display:table-row;
background:#88f;
}
#more {
display: none;
}
#content {
display:table-row;
height:100%;
background:#8f8;
}
It should work for all modern browsers, desktop, tablets and mobiles. For old browsers, a full body scrollbar would be ok.
If you add two wrap blocks:
<div id="content">
<div id="content-scroll-wrap">
<div id="content-scroll">
content...
Then use CSS:
#content-scroll-wrap {
position: relative;
height: 100%;
}
#content-scroll {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
overflow: auto;
}
http://jsfiddle.net/sA5fD/8/
Don't know about support in old browsers. IEs might need some fixes.
For future visitors:
HTML
<div class="parent">
<div class="child">
<div class="large-element> </div>
</div>
</div>
CSS
.parent {
height: 1000px
overflow-y: scroll;
}
.child {
background-color: royalblue;
height: auto;
}
.large-element {
height: 1200px;
}
In this scenario, the child element will create an overflow. Since the child's height is set to auto, it will stretch out to fill the container. If you had set it to 100%, it would only go 1000px, leaving some white space beneath!
Here is a pen: https://codepen.io/meteora/pen/JJYoZM
This should work in all browsers :)
I'm trying to align a html-page with the bottom of the browser-window. This is my apporach:
<body>
<div class="outer-wrapper">
</div>
</body>
.outer-wrapper{
min-height: 950px;
width: 100%;
position: absolute;
bottom: 0;
}
The problem with this solution is that when the screen is smaller than 950px high, the top of the outer-wrapper disapears above the screen and no scroll is added. Both the body and the outer-wrapper has a background-image.
Here is a sample, as you can see, the top of the red box is above the body.
http://jsfiddle.net/C5Nce/1/
The following demo should work, if I understand what you want correctly:
http://jsfiddle.net/C5Nce/10/show/
I just used a media query to detect when the page is less than 550px and set the element to be pinned to the top instead:
#media screen and (max-height: 550px) {
.outer_wrapper {
top: 0;
}
}
I've coloured it green so you can tell when the query fires.
.outer {
position:absolute;
height:100%;
width:100%;
background-color:#aaaaaa;
margin:0;
padding:0;
}
.content {
position:relative;
width:90%;
height:90%;
background-color:#444444;
margin:5%;
}
.inner {
position:absolute;
height:20%;
width:100%;
background-color:#eeeeee;
bottom:0;
margin-bottom:10%;
}
<div class="outer">
<div class="content">
<div class="inner"></div>
</div>
</div>
http://jsfiddle.net/L8H9J/
1) Remove the margin-bottom style from the inner class
2) All the content you add inside the inner class will be aligned with the bottom
3) Because of the flow of the document in HTML, you cannot explicitly align them with the
bottom
4) You can use this trick to do so, but again all elements inside the inner class will be
with flow of position:static
5) There comes the use of JavaScript to determine suitable margins for each element inside
the inner class
Tip: Use percentages; although you want the wrapper to be of height ~950px, but if you can use percentages for the dimensions, you would really love watching your web applications scale with the browsers:
I would just give your outer-wrapper a height of 100% (along with html, body):
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.outer-wrapper {
height: 100%;
width: 100%;
position: absolute;
bottom: 0;
overflow-y: auto;
background-position:bottom; //Edit
}
Then the outer-wrapper will always keep the body's height. There’s no need for the 950px height min because in the case that the viewport is too small you wanted for this to scroll and in the other case the viewport is bigger than 950px - well, it's bigger than 950px - that's a good thing.
Edit section from your code here
.outer_wrapper
{
background-color:red;
/*min-height: 550px;*/
margin-left: -75px;
top:auto;
bottom: 0;
position: absolute;
left:50%;
}
and you are specifying your red box is above the body, if you put it inside body it supposed to be placed like it as you also have specify min-height of container.
I'm trying to force my content div to fill the whole wrapper div.
The wrapper is set up to force my footer to the bottom of the window, or page. Which it does just fine.
If I use:
min-height: 500px (or 40em); the content div stretches as requested.
However, if I use:
min-height: 100% (or any other %); nothing happens to the content div.
This makes no sense to me. What am I missing?
Per the request (excluding borders and colors and stuff):
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
width: 80%;
margin: 0 auto -4em;
}
#content {
min-height: 100%; // nothing happens, change to em or px something happens.
}
#sidebar {
float: right;
}
#footer {
clear: both;
height: 4em;
}
#push {
height: 4em;
}
<body>
<div wrapper>
<div header>
<div menu></div>
</div>
<div sidebar></div>
<div content></div>
<div push></div>
</div>
<div footer></div>
</body>
You can try using "line-height: 100%" on your content div. Although... if there is an explicit height set on your wrapper div, you should be able to use 100% on one of the various height measurements to force it to expand.
Post some quick example markup that shows your wrapper and your content.
I have a web page as follows:
http://www.transeeq.com/health/bq17a.html#
The yellowish footer does not get pushed all the way to the bottom. Any ideas? Here is the CSS code:
#container {
min-height:100%;
position:relative;
}
#body {
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#CCCC66;
}
It works; your CSS is probably being cached locally. Have you done a forced browser refresh lately? Hit Ctrl+F5.
Try the CSS code to achieve a "sticky footer" (per http://ryanfait.com/sticky-footer/).
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
I use this css.
* {
margin: 0;
}
html, body {
height: 96%;
}
.wrapper {
min-height: 96%;
height: auto !important;
height: 96%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
And you can use it in your html page like this
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
It works very well in IE AND Firefox
I just tested it; it extends to the bottom in Chrome, Firefox, Opera, Safari, IE8, IE7, and even IE6. In which browser do you experience this problem, and can you describe your problem in more detail?
have you tried floating the footer to the bottom and changing the position to relative?
You have "height: 60px;" in #footer. Try making that a smaller number in the .css.
Put your footer inside the container div - if you want to have the footer at the bottom of the page (not the bottom of a window) using position:absolute, you need to put it in a relatively positioned div, such as your container.
Have a look at this article
Try position: fixed on the footer instead if you want to ensure that it's always at the bottom of the window. Otherwise, to ensure it's always at the bottom of the document, you can keep its position as relative/auto.