I'm trying to make an absolute positioned element to take 100% height of body, where body is set to take 100% of content, that might exceed window height. But, I cannot seem to nail it.
CSS:
html
{
height: 100%;
}
body
{
min-height: 100%;
}
#push
{
padding-top: <to exceed window height>;
}
#absolute
{
position: absolute;
left: 0px;
top: 0px;
width: 100%; /* to take full width of body */
height: 100%; /* to take full height of body */
}
HTML (assuming that this is all the content within <body>):
<div id="push"></div>
<div id="absolution"></div>
Fiddle: http://jsfiddle.net/psycketom/DbV4R/
I have tried to make #absolute first child of body, last child (assuming that DOM hasn't yet calculated height at the start of body). Also, tried removing it's height property in exchange of top: 0; bottom: 0; - no luck.
Well, I assume it's because of absolute takes element out of document's flow, but, isn't there a way around it?
My actual example is where I want to have an absolute positioned background attachment element that holds numerous absolutely positioned elements. The element is going to have overflow: hidden to not make any scrollbars.
What options do I have here, except javascript and defined height?
Update:
If you inspect fiddle, you'll notice that #absolution takes 536px in height, where body takes 600.
I want, #absolution, to also take 600px - full height of body.
Make the body position relative? Remove native margin/padding for body to get rid of all the red (http://jsfiddle.net/DbV4R/6/)
http://jsfiddle.net/DbV4R/5
body {
position: relative;
}
Related
All the examples I've seen say to do the below code, but this does not work (see jsfiddle below).
html { height: 100%; min-height: 100%; }
body { height: 100%; min-height: 100%; }
.stretchable { position: absolute; width: 100px; height: 100%; min-height: 100%; }
Showing it not working: http://jsfiddle.net/yVDXQ/481/
How do I use CSS only to force a div to be the height of the document body, not the window?
Look closer... your body element is not the full height of the content. Remove the height: 100% and instead add position: relative to the body element. Here is a fork of the fiddle:
http://jsfiddle.net/7j8vrnr8/
Remember that absolute positioned elements have their height/width based on the first relative positioned element as you move up the hierarchy.
position: relative
First of all, you need to remove height:100% for body – otherwise the body will only be as high as the viewport (with the rest of the content overflowing it).
And then, since your .stretchable element is positioned absolutely, you simply remove any height and min-height from that completely (so that effectively height:auto is in place) – and position it from the top and bottom, so that those two values determine its height. (position:relative added for body, so that this element gets taken as point of reference for the absolute positioning).
http://jsfiddle.net/yVDXQ/484/
I have a page at
http://uberhealth.co/register.php
I have set the property to set the min-height to 100% but still as you can see the footer is not at bottom and thus the height is not getting set to 100%. how can i fix this?
Update
I have already given there
html, body{
height:100%;
}
and a container class for body
.cbody-full { min-height:100%; }
Though you've set a min-height (percentage) value for the <html> element, it doesn't have a explicit height value. Hence, the min-height property is not working for the <body> element properly.
From the MDN:
min-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.
You could set a height of 100% for the <html> element, and min-height: 100%; for the <body>.
html { height: 100%; }
body { min-height: 100%; }
Update #1
Here's my attempt to fix your layout issue.
First note that you have to specify the height of the parent element, if want to use min-height for the child element.
You have multiple wrappers inside each other, changed all the min-height: 100% declarations to height: 100% (including the html, body, ...); and use min-height: 100% for the .cbody-full > container element.
Then, you may face the vertical scrollbar. That's because the computed height of the header and the footer is added to 100% of the height of the screen (In fact the .cbody-full > container element has the height of 100%).
You could fix that, by adding a negative top/bottom margin to the .cbody-full > container element:
.cbody-full > container {
min-height: 100%;
margin-bottom: -50px;
margin-top: -55px;
}
But, this cause the container goes over the header and/or the footer. In order to fix that, you could set a top/bottom padding to the container and use box-sizing: border-box to calculate the width and height of the box including the paddings and borders:
.cbody-full > container {
min-height: 100%;
margin-bottom: -50px;
box-sizing: border-box;
padding-bottom: 50px;
margin-top: -55px;
padding-top: 55px;
}
Just one more thing, you probably need to set z-index property for the header and footer elements, as follows:
#navbar, /* The header (navigation in this case) */
.footer {
position: relative;
z-index: 100;
}
Update #2
If you consider using Ryan fait's sticky footer, note that the footer shouldn't be inside of the .cbody-full element, it should be beside that. That's why it doesn't stay at the bottom of the page.
Hence, you could change your markup as follows:
<body>
<nav id="navbar"></nav>
<div class="cbody-full"></div>
<div class="footer"></div>
</body>
Then, follow the above approach for height and min-height properties, as well as position and z-index for the navigation and footer. Finally use the following for the .cbody-full element:
.cbody-full {
min-height: 100%;
margin-bottom: -50px;
box-sizing: border-box;
padding-bottom: 50px;
margin-top: -55px;
padding-top: 55px;
}
even if you dont put min-height:100% its always at 100%. The height is always relative to the content always given that the height is not staticcaly defined
This question already has answers here:
Make body have 100% of the browser height
(24 answers)
Closed 9 years ago.
I have been struggling to understand this scenario
I have set, in CSS
html, body {
min-height: 100%;
}
So that when there is no content on the page, the html and body take 100% of the height of page. And if there is content in body, these should change their height according to content height.
But when I add some content on the page (enough to display scroll bar), html and body are not taking 100% height of the document. i.e. if my screen height is 700px, in either case $('body').height() would return 700px;
Why is that?
EDIT:
In other words, I want my body Tag to be at least 100% of screen but it should grow if content is added.
I've misread the question at first, but on second thought I'd interpret it as:
The html element ignores min-height: 100%.
Why is that?
The answer to "Why" is in the relevant spec, emphasis mine:
min-height
...
Value: <length> | <percentage> | inherit
...
<percentage>
Specifies a percentage for determining the used value. 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').
This is why you need to set a height for the html element for min-height to work on the body element. Alternatively you can position the html element absolutely, like this:
html { border: 10px solid black }
body { border: 10px dashed red }
html { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
/* alternatively: html { min-height: 100%; height: 100%; } */
html { min-height: 100%; }
body { min-height: 100%; }
See the position: absolute demo or the height: 100% demo.
Thanks to #Alohci for correcting me on the interpretation of the spec.
In the case you describe, html and body do take up 100% of the screen height. Add a background-color to see this:
body {
background-color: lightblue;
}
You'll see the entire screen is now coloured. The jquery statement you're getting .height() from is still only returning the height of the content, not being stretched to the height of the screen. When you have a scrollbar, .height() of body will return the height of all the content, not just the visible area. You can get the height of the window with $(window).height(). See this fiddle for a demo.
I have a wrapper class that contains all the content on the web page. the problem is if the content is absolutely placed, it eats my footer. I have to place the content as absolute positioned.
It seems like the footer doesnot recognize that the content is absolute. Heres my code
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="activity/Chrysanthemum.jpg" style="z-index: 1; position:absolute; width: 420px; height: 400px; left: 100px;top:260px; ">
<div class="push">
</div>
</div>
<div class="footer" >copyrights</div>
</body>
If I change the image style by removing the position:absolute property , everything looks normal. so my question is how can we place the footer at the bottom with absolute positioned contents?
Updated answer, regarding comment.
As I mentioned at my previous answer, this effect cannot be achieved using pure CSS. So, I will show the JavaScript approach. Add relevant IDs (see Fiddle), and add the following code at the end of your body. This code snippet will resize your wrapper when necessary.Note: When the page is smaller than the window's height, the page wrapper will still take the full height, because it's not possible to distinguish a height change by an absolutely positioned element.
<script>
(function(){
var wrapper = document.getElementById("wrapper");
var height = document.documentElement.scrollHeight;
wrapper.style.height = height + "px";
})();
</script>
Previous answer:
The issue is caused by the fact that absolutely-positioned elements do not affect the height/width of their parent.
To fix your code, apply the following CSS (only showing relevant CSS, updated postfixed by descriptive comments). Fiddle: http://jsfiddle.net/4ja2V/
html, body {
height: 100%;
width: 100%;
padding: 0; /* Get rid off the padding */
}
.wrapper {
position: relative; /* Necessary to properly deal with absolutely positioned
child elements. */
height: 100%;
margin: 0 auto 4em; /* So that the content is visible when scrolled down*/
}
.footer {
height: 4em;
position: fixed; /* Positions your footer at a fixed position in the window*/
bottom: 0; /* At the bottom of the window*/
}
You were using a negative bottom-margin for .wrapper, which caused the element to "eat" the footer. When you're using absolutely poisitioned inner elements, there's no reliable pure-CSS method to get the real width/height of the .wrapper element. Hence the appearance of position:fixed.
The footer is defined to have a height of 4em. Because the footer is positioned at a fixed position (ie, the element won't move when scrolling down), it's necessary to apply an additional margin at the bottom of the wrapper element.
give your footer a fixed hight and then in your absolute class, do
bottom: heightOfYourFooter + 5px;
I know this has been discussed here many times, but none of the answers I found here, seem to address my problem.
I have this variable (in height) layout, and wnat the footer to always stick to the bottom.
I have used the min-height: 100%; to the container div, and got it somehow to always be in the bottom. trouble is, it's sinking too low to the bottom.
I've put an example here:
http://jsbin.com/erono3
As you can see, my footer is at the bottom, but will go too far in the bottom, and even though there's space on the page to display it, it's creating a scroll bar.
Also, I'd like the main container to to be shown as big as the content is (i.e. closing the square), but right now, it looks like the container is going all the way to the bottom, and my footer is covering it.
What am I doing wrong there?
Thanks in advance
You should take a look at the link by Ben Lee again :). I have used that in your layout to achieve the effect you want. See it here: http://jsbin.com/erono3/2
The important thing is for the footer to be part of the container. The container has a min-height of 100%. So it occupies the whole screen always. The header is normal what ever it is inside.
Then you should have an inner container element (important), where your main content resides. In the link above, it has the id #body. This would have a padding-bottom (to give space to the footer.
The footer is absolutely positioned with a bottom:0px meaning it is always going to be at the bottom of the container (the container has to be position:relative).
EDIT (in response to the comment)
To make your footer span the entire page, but keep everything else centered, just do this:
remove the width off of the #containter, #container spans the whole page. Provide a width to the #body element in the link above and center it, using margin: 0px auto. You get the effect you wanted.
New link: http://jsbin.com/erono3/5
Here's a simplified version of this, which is worth reading for the explanation. See if you can adapt yours to fit.
CSS:
html, body, div {
margin: 0;
border: 0;
padding: 0;
}
html, body {
height: 100%;
}
#wrap {
position: relative;
height: auto !important;
height: 100%;
min-height: 100%;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
background-color: #aaa;
}
and HTML:
<div id="wrap">
<div id="content">Stuff goes here.</div>
<div id="footer">FOOTER</div>
</div>
The problem is you have a min-height of 100% on your container div. That means that the container will be 100% the height of its parent, which is the body tag which has a height of 100%. So if your viewport is 600px, then your body will be 600px, then your container will be 100% of that which is 600px, and then it will stick the footer after the container div which is why it goes below the veiwport.
So one thing you can do is just absolutely position your footer inside the body. Do this by changing your position to be absolute, and bottom:0px. It will float at the bottom.
You might want to put it in your container as well depending on what style you are going for and position it absolute in that and at the bottom.
Your problem is not that the footer is too low, but by making the body 100% it pushes the footer below the bottom of the page.
Consider putting the footer div inside the container div and getting rid of the margin-top: -5.5em and position: relative and it will work just fine.
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 */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
This is particularly for anyone using ASP.NET master pages but also in general, if your content is also wrapped in a <form> element you will need to change
html, body {
height: 100%;
}
to
html, body, form {
height: 100%;
}