This is the structure of a page.
the height of header, menu and footer is known (fixed and set by pixels) but the body height is not. but I want it to be so height such that the site completely covers the screen vertically. I mean I need to set a min-height for the body that causes the page fits the screen. how can I do that?
Found it. I should set the display of the site wrapper DIV to table and its height to 100% and every first level DIV display must be table-row.
There are a few ways now with flex-box or calc() - but I have a feeling you aren't going to go that route at this time. Here is the best alternative.
The concept is that you have a master container around everything but the footer. You force this to be 100% of the page, but they your footer isn't above the fold. To correct this you can make a negative margin on your master-container, but then that has it's own issues too - and so you add this buffer div that matches the footer height - (and the negative margin of the master-container) This allows the page to fill to the footer, but if the page is longer, gently push the footer down.
Some people will say it's too "hacky," and those people don't seem to stay in this business very long. Of course, your theme is going to have a ton of styles that might conflict with this or mess it up - so watch out for those, and really understand what is happening - so you can adjust for conflicts. It's simple in theory, but anyone who ever built a website has fought this issue. Flex-box offers an incredibly easy solution, but it's hard to implement at the time of this post because of cross-browser compatibility.
Here is a jsFiddle with just the most basic code.
Here is a CodePen with a more extensive example
HTML
<div class="container master-container">
<header class="container global-header">
header
</header>
<nav class="container global-nav">
<ul class="menu">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</nav>
<section class="container main-content">
main-content
</section>
<div class="container footer-buffer"><!-- empty --></div>
</div>
<footer class="container global-footer">
footer
</footer>
CSS
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/*
Read about it...
http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
html, body {
height: 100%; /* let them know they can be this tall if they want - because they don't already know for some reason... */
}
body {
margin: 0;
}
.master-container {
min-height: 100%; /* force height of html and body */
margin-bottom: -79px; /* opposite of footer buffer! */
}
.container { /* what is common to all the big blocks */
width: 100%;
float: left;
}
.global-header {
height: 91px;
background: lightblue;
}
.global-nav .menu {
list-style: none;
margin: 0; padding: 0;
}
.menu li {
float: left;
margin-right: 1em;
}
.main-content {
/* ? */
}
.global-footer, .footer-buffer {
height: 79px;
}
.global-footer {
background: pink;
}
Use the following via onload:
//You will need to define the header height, footer height and menu height as vars:
function bodyHeight() {
var headerHeight, footerHeight, menuHeight;
var scr = screen.availHeight;
var setBodyHeight = scr - (headerHeight + footerHeight + menuHeight);
document.body.style.height = setBodyHeight + 'px';
}
Is it u need ?
updated: http://jsfiddle.net/RQFg3/2/
setting the parent element of body (html) as height 100% and body as well.
CSS
* {
padding:0;
border:0;
margin:0;
}
html, body {
height:100%;
width:100%;
}
body {
border:1px solid red;
}
There's a better way to do it, but here's a quick and dirty example:
http://cdpn.io/uzbdg
Related
I often use the method of an empty div to make my footer stay at the bottom of my page. The code idea is following:
<body>
<div id="canevas">
<article>My website's content</article>
<div id="push"></div>
</div>
<footer id="footer">Here my footer</footer>
</body>
The css:
html, body {
height: 100%;
margin:auto;
}
#canevas {
min-height: 100%;
height: auto;
margin-bottom: -33px;
}
#footer, #push {
height: 33px;
}
Today I'm looking for how to add a margin-top on my #caneva div without breaking the footer. Do you have any idea?
Note that my page's content can have many different size (a lot less and a lot more than 100% of the screen height).
Here a fiddle with previous code.
If using padding-top is an option, you could use box-sizing: border-box to calculate the width and height of the box including padding and border, as follows:
#canevas {
min-height: 100%;
margin-bottom: -33px;
padding-top: 50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
WORKING DEMO.
Also it's worth noting that border-box value is supported on IE8+.
Alternatively, you could add another spacer element as the first child of the #canevas element to push down the content, as follows:
.spacer {
height: 50px;
}
<body>
<div id="canevas">
<div class="spacer"></div>
<article>My website's content</article>
<div id="push"></div>
</div>
<footer id="footer">Here my footer</footer>
</body>
This will have a promising browser support :)
UPDATED DEMO.
For further info, you could refer my answer on a similar question on SO here:
Position footer at bottom of page having fixed header
If what you mean is to keep the height of the page, then the answer is to also add margin-bottom: -63px; to your #caneva div. This way basically only the top of the '#caneva div' will change, the rest of the page will remain the same.
I created an updated fiddle here for you.
Introduction
There are many good and well tested recipes for a footer that is always as the bottom of a page but is not fixed (or overlap content). Here is one that works for me: http://ryanfait.com/sticky-footer/
In short it works like follows:
HTML:
<html><body>
<div id="wrapper>SOME CONTENT</div><footer></footer>
</body></html>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: 100%;
margin: 0 auto -4em;
}
footer {
height: 4em;
}
The trick is that #wrapper is forced to use 100% of available height, but is margin bottom leaves some space for a footer (negative margin is exactly the size of the footer).
Problem description
While building a Single Page Application, some javascripts frameworks like Ember.js adds additional divs to our document structure (for example to handle events). This creates an addtional wrapper around our original document which may look like this:
<html><body>
<div class="framework-container">
<div id="wrapper>SOME CONTENT</div><footer></footer>
</div>
</body></html>
This additional div breaks our CSS setup. To improve the situation we want to say that framework-container should behave exactly as body, so we may try to add:
.framework-container {
position: relative;
height: 100%;
min-height: 100%;
}
And it almost work: if the content is smaller than the page height. Otherwise there is a noticeable distance between the footer and bottom of the page - which we cannot accept.
Does anyone know a pure CSS solution to this problem?
I'm not sure if you said the wrapper worked or not, but you can tell Ember to insert the application into a particular element, and it won't insert any elements outside(above) that element.
Set the root Element
App = Em.Application.create({
rootElement: '#body'
});
HTML
<div id="container">
<div id="header">I'm a header</div>
<div id="body"></div>
<div id="footer">I'm a footer</div>
</div>
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
http://emberjs.jsbin.com/OPaguRU/1/edit
I totally jacked some of this from: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
<body style="min-height:2000px;">
<div id="test" style="position:relative;bottom:0;">
some dynamically changed content
</div>
</body>
What do i expect:
-If #test height is greater or equal to body's it should stick to bottom (as it happens now cuz of block model)
-If #test height is less than body's it should however stick to bottom, having white space above it. (which doesn't happen, #test doesn't stick to bottom).
-Using position:absolute is not acceptable as then #test will not influence body height when #test is higher than body.
-Using position:fixed is not acceptable as then #test will stick to bottom of window, not body.
Q: Can I get what I expect using css only? How?
Sorry for poor English, however I think the question is easy to understand.
Thank you.
P.S.: I need that in css because some dynamically changed content is changed via js and I want to avoid recalculating #test div position each time it changes.
UPD:
I've also tried some display:inline-block; vertical-align:bottom; stuff still no result.
UPD2:
Thank you guys, still it seems, that easiest way is just to add a couple of lines to my javascript to recalculate body height on #test height change.
I know it's an old question, but you could try doing:
top: 100%;
transform: translateY(-100%);
Transform operates with the size of the element itself, therefore it will climb back to the container at the very bottom. You can use letters for all 3 axis.
Because of the dynamic height nature of #test you cannot do this with CSS alone. However, if you're already using jQuery, a quick .height() call should be able to get you what you need (#test height needs to be subtracted from positioning it 2000px from the top).
<style>
body {
min-height: 2000px;
}
#test {
position: relative;
top: 2000px;
}
</style>
<script>
var testHeight = $("#test").height();
$( "#test" ).css({
margin-top: -testHeight;
});
</script>
The only two pure-CSS ways to create sticky footer of dynamic height I know are using flexboxes (no support in IE9-, unfortunately) and using CSS tables:
html, body {
height: 100%;
margin: 0;
}
body {
display: table;
width: 100%;
min-height:2000px;
}
#test {
display: table-footer-group;
height: 1px; /* just to prevent proportional distribution of the height */
}
It is very much possible using relative position. this is how you do it.
Assume height of your footer is going to be 40px. Your container is relative and footer is also relative. All you have to do is add bottom: -webkit-calc(-100% + 40px);. your footer will always be at the bottom of your container.
HTML will be like this
<div class="container">
<div class="footer"></div>
</div>
CSS will be like this
.container{
height:400px;
width:600px;
border:1px solid red;
margin-top:50px;
margin-left:50px;
display:block;
}
.footer{
width:100%;
height:40px;
position:relative;
float:left;
border:1px solid blue;
bottom: -webkit-calc(-100% + 40px);
bottom:calc(-100% + 40px);
}
Live example here
Hope this helps.
#footer{
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE6 */
* html #footer{
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
JSFiddle: http://jsfiddle.net/As3bP/ - position: fixed; is the obvious way of doing this, and if this affects your layout, try posting your problems here. It'd be easier to modify the CSS of your content than trying to find another way of doing this.
The IE6 expression is not good for speed at all but it works, read about that here: http://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-7-avoid-css-expressions-7202.html
EDIT Read your edits, please forget the above. To be stuck at the bottom of the body, it'd be easy to position it in your HTML. This is simple stuff, please post example code if you need further help. Positioning something at the bottom of the page, by default, positions at the bottom of the page.
JSFiddle: http://jsfiddle.net/TAQ4d/ if you really actually need that.
short answer: No YOU can't do this with pure css because it is just the reversed direction to the normal flow of page (I mean bottom to top);
you can use this plugin which is very easy to use stickyjs;
use it with bottomSpacing: 0
EDIT
this plugin uses position: fixed too!
then I think you should write it down by yourself or have someone to write it for you :D
if u dont want to use position:absolute; left:0; bottom:0; then u may try simple margin-top:300px;...
Yes it is Posiible with CSS only:
HTML:
<body>
<div id="test">
some dynamically
changed content
</div>
</body>
CSS:
body{
line-height: 2000px;
}
#test{
display: inline-block;
vertical-align: bottom;
line-height: initial;
}
JSFiddle
If you want to have the text on the bottom of the screen then you can use:
body {
line-height: 100vh;
margin: 0px;
}
here are solution I come up with
<ul class="navbar">
<li> Welcome <i></i></li>
<li> Portfolio <i></i></li>
<li> Services <i></i></li>
<li> Blogs <i></i><i class="arrow right"></i>
<ul class="subMenu">
<li> Why Did Mint Net CMS Born <i></i></li>
<li> Apply AJAX and Mansory in gallery <i></i></li>
<li> Why did Minh Vo create Mint Net CMS <i></i></li>
</ul>
</li>
<li> About <i></i></li>
<li> Contact <i></i></li>
<li> Estimate <i></i></li>
</ul>
<style>
.navbar {
display: block;
background-color: red;
height: 100px;
}
li {
display: table-cell;
vertical-align: bottom;
height: 100px;
background-color: antiquewhite;
line-height: 100px;
}
li > a {
display: inline-block;
vertical-align: bottom;
line-height:initial;
}
li >ul {
display: none;
}
</style>
We do like that:
Html:
<body>
<div id="bodyDiv">
<!-- web site content is here -->
</div>
</body>
<footer>
<!-- Footer content is here -->
</footer>
Jquery:
$( document ).ready(function()
{
$('#bodyDiv').css("min-height",screen.height);
});`
dynamically change content element min-height attribute according to screen resolution.
Old post, I know, but yet another solution would be to create a wrapper for your content with a minimal height of 100vh - footerHeight
this solution requires that you know the height of the footer...
<body>
<div class="wrapper">
your content
</div>
<div class="footer">
footer content
</div>
</body>
and your css would look like this:
.wrapper {
min-height: calc( 100vh - 2em );
}
.footer {
height: 2em;
}
Please, consider the following jsFiddle - http://jsfiddle.net/mark69_fnd/hwCuB/ (you can find the code after the body of the question).
It represents a trivial example of the classic header, content, footer HTML layout. Notice that:
The content never overlaps with the footer. Resizing the window will finally create a vertical scrollbar rather than move the content over the footer.
There are no redundant scrollbars.
No absolute heights, except of the footer, which may be assumed to be no higher than 2em.
The content height is less than the available height between the header and the footer.
I would like to keep the first three properties, but change the last one, so that the content height is the full height between the header and the footer. And I would like to do so without resorting to javascript.
How can I do so, if at all?
EDIT
The given html and css are just an example. You are free to change them as long as the final result satisfies the conditions of my question.
EDIT2
Apparently, I am not very clear on what I want to achieve with the content. Here is what I have now:
Notice how the content does not extend the full height available to it between the header and the footer.
What I am after is this:
(edited in mspaint, I do not know to do it really)
EDIT3
Added an except clause to the 3rd condition:
except of the footer, which may be assumed to be no higher than 2em.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.7.3/build/cssreset/reset-min.css">
</head>
<body>
<div class="container">
<div class="header">
Header goes here.
</div>
<div class="content">
<div class="innerWrapper">
Content goes here.
</div>
</div>
<div class="footer">
<div class="status">
Footer goes here.
<div>
</div>
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
width: 100%;
}
.container {
position: relative; /* needed for footer positioning*/
margin: 0 auto;
height: auto;
min-height: 100%;
background-color: #ddd;
}
.content {
padding: 0em 0em 2em; /* bottom padding for footer */
background-color: #bbb;
}
.footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
}
.status, .header {
background-color: #999;
border: solid 1px #000000;
}
There might be couple ways to do this, but the only ways i can think of at the moment all involve setting/knowing the height of your header and footer.
Here is one using display:table http://jsfiddle.net/fLnkf/
There may be other solutions depending on if your requirements allow you to change your html or use CSS3.
hope this helps!
I've been trying to figure out a solution to this problem but haven't been 100% successful, just pseudo successful. The layout I'm looking for is one such that there is always a fixed padding/margin/height on the top and bottom of the page no matter the height of the content.
Further, the height of the content should start at the top of the page right after the padding and reach the bottom of the page right before the padding. If the height of the content isn't large enough, it should span the whole page. If it is larger than the height of the page, the scrollbar should appear as in normal situations, but the top/bottom paddings need to be preserved.
To view an example of my pseudo-solution to this, check out this fiddle...
http://jsfiddle.net/UnsungHero97/uUEwg/1/ ... height not large enough
http://jsfiddle.net/UnsungHero97/uUEwg/8/ ... height too large
The problem with my solution is that if there is a background image, it will be covered up where the padding is. So how do I extend my solution such that if there is a background image, it will still be visible where the top/bottom paddings are? I would prefer this to be a HTML/CSS only solution, which is what makes this really hard!
Let me know if I need to clarify anything.
I came up with this:
http://jsfiddle.net/bKsad/
Due to the use of box-sizing: border-box, it won't work in IE7 and older.
It should work in all modern browsers.
You could replace #padding-bottom with #content:after. Beware IE8 though, I couldn't quite get it working.
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: url(http://dummyimage.com/100x100/f0f/fff);
}
#wrapper {
margin: 0 auto;
width: 300px;
height: 100%;
padding: 15px 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#content {
background-color: #C9E6FF;
min-height: 100%;
}
#padding-bottom {
height: 15px;
}
HTML:
<div id="wrapper">
<div id="content">
<p>some content</p>
<p>some content</p>
<p>some content</p>
</div>
<div id="padding-bottom"></div>
</div>
Is this perhaps what you were after => http://jsfiddle.net/Husar/uUEwg/24/ ?
The best and easy solution for this issue is this one. In this case
you need two heights :
Windows height
Side-bar navigation height
Then check of windows height is less than div, then you need to increase the height of content area
$( document ).ready(function() {
var navh = $(".side-nav").height();//ide-nav
var h = window.innerHeight;
if (navh >h){
$("#mainBody").height(navh);
}
})