How to show a div.bottom of some 100px height at the bottom of the page. If the content height is less than window's height, div.bottom will be shown at the bottom of the window. If the height of the content is greater than window's height it will be shown at the bottom of the page.
Do you need something like this?
<div style="position:absolute; bottom:0;">Hi</div>
http://jsbin.com/ayaqo4
What you're talking about is called a sticky footer, and it can be done with just html and css. The basic idea is to use a wrapper with heights: 100% and a negative margin to move it above the very bottom. Stole the code snippet from here and here:
<body>
<div class="wrapper">content here!
<div class="push"></div>
</div>
<div class="footer">footer content</div>
</body>
* {
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 */
}
This is my personal favorite for sticky footers:
http://www.cssstickyfooter.com/
You need to use css,
div.pos_fixed_footer{
position:fixed;
bottom:0%;
right:0px;
background:transparent url(../img/bg_header.png) repeat scroll center top;
width:100%;
height:40px;
}
and then call in your script like this
<div id="pos_fixed_footer"><?php include "footer.html"; ?></div>
I think you mean a footer that is in the bottom of the window only if the content doesn't overflow the window, otherwise it has to go down on the page.
Just implement the code from here http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Related
I am trying to make my footer "sticky" but the heights vary so can't use most of the methods I've found or flexbox. Is there any way to check with javascript how much space is under a div so I can add that much margin?
The html looks like this:
<container>
<header></header>
<body><sometimes sub content></sub content></body>
<footer></footer>
</container>
Also tried putting the footer outside of the container, saw that in some solutions, but again they all require a fixed height.
You can check if $(document).height() > $(window).height(). That will tell you if the height of the content is longer than the viewport. If so, leave the footer where it is. If the doc height is <= the viewport height, add make the footer sticky. Like so:
To see the difference between sticky and non-sticky, run the snippet below to have the footer at the bottom of the page. To view it where the footer is sticky, run the snippet in full screen mode (on the top right corner of the snippet output). You can also just run it in full screen mode and then shrink your browser size down - it recalculates on window resize.
$(window).on("load resize", function() {
// if content height <= viewport height, make footer sticky
// else leave footer at the bottom of the content.
$(".footer").toggleClass("sticky", $(document).height() <= $(window).height());
});
.footer {
width: 100%;
background-color: #555588;
color: white;
}
.sticky {
position: fixed;
bottom: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre style="font-size: 16px;">
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
</pre>
<div class="footer">foo foo foo <br/>foo<br/>foo<br/></div>
You can set the main minimum height to 100vh, and position the footer at the bottom absolutely. The main should have bottom padding to at least the height of the footer, and box-sizing: border-box to main the 100vh height.
However the example to see the sticky footer in action.
body {
margin: 0;
}
main {
position: relative;
padding-bottom: 60px;
min-height: 100vh;
box-sizing: border-box;
}
.hidden {
background: blue;
height: 100vh;
}
main:not(:hover) > .hidden {
display: none;
}
footer {
position: absolute;
width: 100%;
height: 50px;
bottom: 0;
background: red;
}
<main>
<article>Short Article</article>
<article class="hidden">
long article
</article>
<footer>
I'm the footer
</footer>
</main>
This question builds upon that one, where in order to apply full screen width to a child of a non full width parent element, the following rule is used on the child element:
width: 100vw;
margin-left: calc(-50vw + 50%);
As shown in this Fiddle, this solution doesn't work in the presence of a vertical scrollbar though: 100vw doesn't take the scrollbar into account and hence the child element ends up being wider than the screen (note: works perfectly without scrollbar).
Is there a way to solve this problem so that the child element takes exactly full screen width? If not in pure CSS then with JS?
Note: an overflow rule on body isn't acceptable in my case as I need the child to fill the exact width of the screen.
https://jsfiddle.net/k3nvkL35/4/
One of the issues you'll come across with the solution here is that I believe scrollbar widths are not universal, and so you may need to implement some conditional logic to affect width/margin based on that.
That being said, you may find this useful. The function below will check to see if the document has a vertical scrollbar by comparing the document's height to the window's height. Based on the existence of said scrollbar, it will modify the child's width and margins to fit the window.
Again, it likely requires tweaking, though it should provide a decent foundation.
function adjustWidth() {
if ($(document).height() > $(window).height()) {
$(".child").css({
"width": "calc(100vw - 18px)",
"margin-left": "calc(-50vw + 50% + 9px)"
});
} else {
$(".child").css({
"width": "",
"margin-left": ""
})
}
}
$(window).resize(adjustWidth).trigger("resize");
.parent {
width: 500px;
height: 500px;
margin: 0 auto;
border: 3px solid green;
}
.child {
height: 100px;
background: red;
width: 100vw;
margin-left: calc(-50vw + 50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
content
</div>
</div>
Simple. Since the parent isn't positioned in any way, then the child can be positioned absolutely. No messing with calc or otherwise, works everywhere.
.child {
height: 100px;
background: red;
position:absolute;
left:0;
right:0;
}
Here is a working fiddle:
https://jsfiddle.net/vgbr6qw2/
I found this solution, which was sourced by this guy, but I don't know who originally did it. I haven't fully tested it, so it may not work in all browsers. I know the vw unit isn't supported in IE8, as if anyone cares.
body {
margin:0;
}
.wrapper {
width:100%;
max-width:400px;
margin:0 auto;
background:pink;
/* margin is for display purposes on stack overflows fullscreen snippet view */
margin-top:80px;
}
.full-width {
width:100vw;
margin-left:-50vw;
left:50%;
background:red;
position:relative;
color:white;
}
<div class="wrapper">
<span>Hi. I'm a paragraph.</span>
<div class="full-width">
<p>You aint no paragraph, sucka!</p>
</div>
<strong>Be quiet, you weak losers.</strong>
</div>
I have the following HTML.
<body>
<nav>..</nav>
<div class='container'>
<div class='row' id='header'>
...
</div>
<div class='row' id='content'>
...
</div>
</div>
</body>
My aim is to have the header remain constant height, while the content fill the rest of the page (I have a Highchart in there). I have tried to use the information here: how do I give a div a responsive height and here: http://codethatworks.blogspot.co.uk/2012/05/responsive-full-height-columns-using.html and here Make a div fill the height of the remaining screen space - but with no luck.
My basic understanding is that I set the body height to 100%, and the header height to say 25% and the content to say 75%. Is the nav confusing things here?
Please note that I am using Bootstrap 3.
It's not just the body you need to set to 100% height, it's all the parents of those two 'rows'. So in your case, html, body, .container.
html, body {
height: 100%;
}
body > .container {
height: 100%;
}
nav {
position: absolute;
top: 50px;
}
#header {
height: 25%;
background: yellow;
}
#content {
height: 75%;
background: red;
}
If you don't set your nav to be positioned absolutely, then it'll cause a scrollbar as it's pushing the content down and making the total height more than 100%.
Demo here!
You can use the viewport percentage. See this fiddle
Relevant lines:
#header
{
height: 25vh;
...
}
#content
{
height:75vh;
...
}
In this case you don't have to set the height of body, html, etc. If you want it to fill the page without padding you would add:
body
{
padding:0px;
margin:0px;
}
See support here.
See this answer for more details.
For the nav element, you either need to make this absolutely positioned as suggested in other answers or give up some percentage of the page for the nav. E.g. make content height 65vh and nav height 10vh.
How do I get the footer to take up the remainder of the page's vertical space without actually knowing how tall the content is? I can't figure out how to use javascript/css to accomplish this...
Just to be clear...
Scenario 1: The content ends halfway through the page, the footer would take up the remaining half. No scrollbars necessary.
Scenario 2: The content takes up 1 1/2 pages, the footer would take up only what it needs (~200px). Scrollbars necessary.
<body>
<div id="content">
<div id="footer">
</body>
Oh, and I'm open to a jQuery way of doing this.
You can always try using jQuery to detect the height of the browser window, then deduct the content height from it to assign a height in pixels to the footer.
Though it would be different on different sized monitors.
To get the browser height, and store it as a variable you can use:
var browserHeight = $(window).height();
Content height can be stored using:
var contentHeight = $("#content").height();
Footer height can then be worked out like so:
var footerHeight = browserHeight - contentHeight;
$("#footer").height(footerHeight);
So altogether, you'd have:
<script type="text/javascript">
$(document).ready(function(){
//Get Browser and Content Heights
var browserHeight = $(window).height();
var contentHeight = $("#content").height();
//Set footer height
var footerHeight = browserHeight - contentHeight;
$("#footer").height(footerHeight);
});
</script>
Or something like that :)
Anthony
I would do something like this:
$(function() {
var windowHeight = $(window).height();
if ($('body').height() < windowHeight) {
$('#footer').height(windowHeight - $('#content').height());
}
});
You probably need to adjust this according to paddings/margins, but this is how it should work, basically.
You can 'fake' it with just CSS. Example:
<div id="footer-background"></div>
<div id="content"></div>
<div id="footer"></div>
CSS:
#footer-background {
position:absolute;
width: 100%; // or the width of your content depending on if its fixed width, etc
height: 100%;
z-index: -1;
margin: 0 auto; // if you use a fixed width this will center it
top: 0;
background: #000;
}
#content, #footer {
position: relative;
width: 100%; // or fixed width
margin: 0 auto; //if you use a fixed width this will center it
background: #fff;
clear: both;
}
#footer {
background: #000;
}
What this does is set an empty div that contains the same background css as the footer but it actually fills the whole page. (height and width). The content has a white background so it will overlap the footer-background as far as the content height. Then your footer will scale according to your footer content but from a visual perspective the footer will appear to take up the rest of the page if it doesn't scroll.
Why use JavaScript when this can be done with CSS?
Firstly set the margin to 0
*{margin: 0;}
Make sure the page fills the browser in height wise
html,body{height: 100%;}
Create the content to fill 100% just remove the height of the footer
#content{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px;
}
then set the height of the footer, make sure its the same as the margin in #content
#footer{height: 142px;}
Jobs a good one :)
No need to use javascript! You can use only css for this:
#footer {
position:absolute;
top: 0;
left:0;
right:0;
bottom:0;
z-index:-100;
/* height: 100%; you don't need this, but you can put it to be sure */
}
What it does is position this layer on the whole screen (relative to the screen- not page, so it will have the same position after you scroll also) and put it far behind the other layer (z-index: -100)
Simple solution:
body {
min-height: 100%;
position: relative;
}
#footer {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
Adding these properties / rules to your css should do what you're looking for. Let me know if it works.
If you do use a script to size the footer, be sure to call the same function on resize events.
<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>untitled</title>
<style>
#footer{border:blue solid thick; position:relative}
</style>
<script>
window.onload= window.onresize=function(){
var b=document.documentElement.clientHeight,
f=document.getElementById('footer'),h=f.offsetTop,
hx= Math.floor(.96*(b-h));
f.style.height= hx+'px';
}
</script>
</head>
<body>
<h1>h1</h1>
<div>content</div>
<div id="footer">footer</div>
</body>
</html>
I have a container element which I need to resize as its contents change. It contains 2 absolutely positioned divs which can both change height. If I don't specify the height of the container then anything after the container disappears under the contents.
At the moment I am doing the following but I'd be pleased to find a less laborious alternative:
(container has position:relative, #main and #sidebar are position:absolute, the contents of #sidebar have no positioning specified)
css:
div#mapcontainer { position:relative; width:100%; height: 600px; }
div#main { position:absolute; top: 0; left: 10px; width: 500px; height: 400px; }
div#sidebar { position:absolute; top:10px; right:10px; width: 155px; height: 405px;}
html:
<div id="container">
<div id="main">variable height content here</div>
<div id="sidebar">
<div id="foo">...</div>
<div id="bar">....</div>
...
</div>
<div>
js:
fixHeights = function() {
var children_height = 0;
$('#sidebar'). children().each(function(){children_height += $(this).height();});
$('#container').height(Math.max(children_height, $('#main').height()));
};
This is a very odd question, as div's height is always the height of its children.
Are you floating content in your container div? When you float child content the containing div doesn't act the same anymore.
If you're floating content that extends past the bottom of the container div, add the following div to the very bottom of the children of the container div:
<div style="clear:both;"></div>
That will not allow children to float over it, thus forcing the containing div to be the height of its tallest child...
<div id="container">
<div id="dynamic" style="float:left;width:100px;">dynamic content goes here</div>
<div id="static" style="margin-left:104px;">Lots of static stuff here</div>
<div style="clear:both;"></div>
</div>
Okay, I'm not sure why you're doing the positioning the way you are, but I've done something similar for a website that had to look like a desktop application. I don't believe there is any way to do this other than with javascript. Html documents are designed to flow, not be rigid. If you want to bail on the javascript, you'll have to let go of the positioning styles and use your floating and clearing divs. Its not that horrible...
if you're floating the container div "overflow: auto" can also work magically, esp with regard to the whole IE hasLayout debacle
You didn't specify but I think you are having a problem with floating elements and you want the container they are in to be at least the size of the biggest floating element. You should try the following CSS hack that forces the browser to rerender the size of the container element to the size of the floating elements:
#wrapper:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
Let me know what you come up with and if this works. There are many other hacks to try, depending on your browser.
I would try changing the css not to use absolute positioning. In Firefox you would need to use the wrapper trick mention in the comments to get the mapcontainer the right height.
div#mapcontainer { clear:both; width:100%; min-height: 600px; }
div#main { float:left; margin-left: 10px; width: 500px; height: 400px; }
div#sidebar { float:left; margin-top:10px; margin-right:10px; width: 155px; height: 405px;}
Overflow:visible; That's the ticket. overflow:auto will create a scroll bar, if needed.