I have been following this tutorial on how to keep the footer at the bottom of the page, even when there isn't much content:
http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/
As far as I can tell, I have put in all of the necessary properties specified by the tutorial, but the footer still won't stick to the bottom of the page.
When I looked at the page using firebug, I could see that the HTML and body had a height of 100%, but despite using "min-height: 100%;" for #wrapper, it still does not fill 100% of the window.
Here are the important sections of the CSS, but if you want to see the full source code, it is live here: http://ewanroycroft.co.uk/bc/
html {
padding: 0;
margin: 0;
height: 100%;
}
body {
width: 100%;
height: auto;
min-height: 100%;
padding: 0;
margin: 0;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
background-color: #E9E9E9;
}
#wrapper {
width: 100%;
height: 100%;
position: relative;
}
#headerWrap {
width: 100%;
height: 120px;
min-width: 600px;
padding-bottom: 1px;
background: url("images/bg-header.png") repeat-x scroll left bottom #FFFFFF;
}
#content {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
min-width: 600px;
max-width: 900px;
margin: 0 auto 0 auto;
padding: 0px 25px 80px 25px;
}
#footerWrap {
clear: both;
width: 100%;
height: 80px;
min-width: 600px;
background-color: #231F20;
box-shadow: 0px 0px 10px 0px #231F20;
position: absolute;
bottom: 0;
}
Thanks in advance for your help!
I went to your website http://ewanroycroft.co.uk/bc/. I don't know what you want exactly, but if you want it to be always fixed at the bottom of the page, you should look at 'position: fixed' attribute for CSS.
If you want it to be at the bottom, but still going when user scrolls down, I'd suggest 'min-height: ###px' attribute.
I visited your webpage and made this fixe:
#content{
...
min-height: 600px;
...
}
and the bottom went down. For better usage, you should get user's height with Javascript then set it to #content's min-height (doing the exact math).
Hope it can help!
There's two things that you're missing according to the guide that you posted:
Set the body's height to 100%. It is currently auto.
Don't set height for the wrapper. Instead, set min-height.
After that, it should behave like you expect.
Related
I have a static html page, unfortunately when when I run my page and check responsiveness, I see white space on the right side of of my page, I followed many solution here in stack overflow by adding the following code:
inline I tried to add
html, body {
font: normal 16px sans-serif;
color: #555;
box-sizing: border-box;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow-x: hidden;
}
but this didn't work. I tried to add this in my CSS file:
html, body {
font: normal 16px sans-serif;
color: #555;
box-sizing: border-box;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow-x: hidden;
}
also didn't work. here is the page I am building: demo
What is wrong with my page?
The issue is due to the .Navbar element which exceedes the 100% of the viewport
Since its left offset is 30px instead of width: 100% set to width: calc(100% - 30px) (or alternatively, set left: 0) and rearrange the space/size of the inner elements
Add position: relative in your css body and "!important" in your margin see code below.
html, body {
font: normal 16px sans-serif;
color: #555;
box-sizing: border-box;
margin: 0 !important;
padding: 0;
height: 100%;
width: 100%;
overflow-x: hidden;
position: relative;
}
Then move your menu a little bit to the right use this update your .main-banner set the new value for padding
.main-banner {
background-image: url(../images/bg.png);
background-repeat: no-repeat;
background-size: auto;
width: 100%;
height: 100%;
padding: 20px 65px;
I'm designing a page for my blog, and I discovered that when I have my div.page-content within the body, it's glitching out and resizing the whole body to the top of the div... I need the body to fill the viewport no matter what.
Relevant HTML
<body>
<div class="page-content"> <!-- THIS IS MY .page-content DIV -->
asdasd
</div>
</body>
Relevant CSS
body, html {
height: 100%; width: 100%; /* Shouldn't this make the page guaranteed to fill the viewport? */
margin: 0; padding: 0;
background-color: #fdfdfd;
font-family: Roboto, Arial;
color: #424242;
background-repeat: no-repeat;
background-size: cover; /* I'm gonna have a blurred background image */
}
.page-content {
min-height: 300px; width: 600px;
margin: 60px auto 30px auto;
background-color: blue;
}
JSFiddle: http://jsfiddle.net/deansheather/5et5kgsn/
I have not an idea if there is a javascript way to fix this, but I'd prefer CSS and HTML only answers please.
I'm sorry about the really weird explanation, it's what came into my head.
You have to set the .page-content class height to auto. Think your problem solved.try this:
body, html {
margin: 0; padding: 0;
background-color: #fdfdfd;
font-family: Roboto, Arial;
color: #424242;
background-repeat: no-repeat;
background-size: cover; /* I'm gonna have a blurred background image */
}
.page-content {
min-height: 300px; width: 600px; height: auto;
margin: 60px auto 30px auto;
background-color: blue;
}
I'm having trouble eliminating the vertical scrollbar when applying a 50px padding (black) to the .background style.
html, body {height:100%; margin: 0; padding:0;}
div.background
{
width: 500px;
height: 100%;
background-color: black;
padding: 50px;
}
div.transbox
{
width: 100%;
height: 100%;
background-color: #ffffff;
position: relative;
background-color: rgba(255,255,255,0.3);
}
div.transbox p
{
margin: 50px;
position: absolute;
bottom: 0;
color: white;
}
This is what it looks like
http://jsfiddle.net/sm6LLgp4/2/
If I remove the top and bottom padding (black), the scrollbars are gone, but I've also lost my padding:
http://jsfiddle.net/sm6LLgp4/3/
How can I maintain the 50px padding all around without the vertical scrollbar?
Insert box-sizing:border:box, than it works.
*{
box-sizing:border-box;
}
I'm having an issue with the age-old problem of 100% height. I know this problem is asked a lot, and I have reviewed this, this, this and countless more. I want to create a basic fixed header, side navigation and main article area, that looks like this:
But, for some reason it's looking like the following (I put 200px padding in the blue bar just to have it appear).
My HTML looks like the following:
<!DOCTYPE html>
<html>
<head></head>
<body>
<header></header>
<section>
<nav></nav>
<article></article>
</section>
</body>
</html>
And my CSS looks like this:
* { -moz-box-sizing: border-box; background-color: transparent; border: 0 none; color: #000000; list-style: none outside none; margin: 0; outline: medium none; padding: 0; text-decoration: none; }
body, html { height: 100%; }
header {
background: #6c6363;
top: 0;
z-index: 100;
height: 100px;
left: 0;
position: fixed;
right: 0;
}
section {
min-height: 100%;
overflow: auto;
position: relative;
padding-top: 100px;
}
nav {
background-color: #747feb;
float: left;
min-height: 100%;
padding-bottom: 200px;
width: 150px;
}
article {
background: #74eb8a;
margin: 20px 20px 20px 170px;
min-height: 100%;
padding: 20px;
position: relative;
}
As you can see, nothing too special. I know that section needs 100% height, and so does body and html. I can position the nav and acticle absolutely, and make something like this:
But, in my actual site (I simplified it for this), the side navigation has drop-downs, which will change the navigation height dynamically. This causes the following to happen:
Absolutely positioned elements won't change the height of the relative wrapper, so I need to float them. However, floating them doesn't make the height become 100%.
I have even made a JSFiddle to show the problem: http://jsfiddle.net/g8VjP/
If anybody can help me out, I'll really appreciate it.
Thank you!
PS: I'm all for using calc() if it works!
SOLUTION
I modified Mayank's answer and managed to come up with a solution. I had to add a couple wrappers, but it worked. My HTML now looks like the following:
<!DOCTYPE html>
<html>
<head></head>
<body>
<header></header>
<section>
<nav></nav>
<div class="cell-wrap">
<div class="table-wrap">
<article></article>
</div>
</div>
</section>
</body>
</html>
With the key being the cell-wrap and table-wrap. I have the nav is one table-cell and the .cell-wrap is another. With the nav having a fixed with, the .cell-wrap fills in the rest. However, I want spacing around the article, so I added .table-cell and made that into a table. That then expands and fills the height and width of the .cell-wrap. I then add 30px padding to give a space around the article (because margins don't work on table-cells) and made the article a table cell.
A bit confusing, but it works!
My CSS is as follows:
* { -moz-box-sizing: border-box; background-color: transparent; border: 0 none; color: #000000; list-style: none outside none; margin: 0; outline: medium none; padding: 0; text-decoration: none; }
body, html { height: 100%; }
header {
background: #6c6363;
top: 0;
z-index: 100;
height: 100px;
left: 0;
position: fixed;
right: 0;
}
section {
display: table;
height: 100%;
min-height: 100%;
padding-top: 100px;
position: relative;
width: 100%;
}
nav {
background-color: #657182;
display: table-cell;
min-height: 100%;
width: 150px;
}
.cell-wrap {
display: table-cell;
height: 100%;
min-height: 100%;
}
.table-wrap {
display: table;
height: 100%;
padding: 30px;
width: 100%;
}
article {
background: none repeat scroll 0 0 #FFFFFF;
display: table-cell;
min-height: 100%;
padding: 20px 20px 120px;
z-index: 1;
}
Here's the fiddle. Not sure why there's a scroll bar at the bottom though, but it seems fine if you show it just normally in your browser.
height: 100% means 100% of the containing block's height. Your containing block, section, does not have a defined height (but a min-height instead). You can either:
Change min-height: 100% on section to height: 100%. or...
Keep min-height: 100% and add a height: 1px (or anything less than 100%) which will be overridden by min-height.
The key here is to have a height property set on the parent.
display:table and display:tabel-cell are you friends here mate!!
Updated your fiddle to slight workarounds and here you go : DEMO
CSS to modify :
section {
min-height: 100%;
overflow: auto;
position: relative;
padding-top: 100px;
display:table;/* addition */
}
article {
background: #74eb8a;
margin: 0px 20px 0px 170px;
min-height: 100%;
width:100%;
height: 100%;
position: relative;
display:table-cell; /* addition */
}
Additionally i took the liberty to remove the extra padding that you have placed inside article , insert a div or section inside article and assign padding to it if it works!!
try this :
nav {
background-color: #747feb;
width: 150px;
position : absolute;
top : 100px;
left : 0;
bottom : 0;
}
article {
background: #74eb8a;
position: absolute;
top : 100px;
left : 150px ; /* nav width*/
bottom : 0;
right : 0;
}
My header is not displaying with 100% width (entire width of the screen), instead it has margins: top, left, right and I did not tell it to have.
CSS:
div#header {
background-color: #FF4800;
float: top;
height: 200px;
width: 100%;
}
By Default most browsers have margins set to html elements.
Try using a css reset http://meyerweb.com/eric/tools/css/reset/
You may just need
body { margin: 0; }
body {
margin: 0;
padding: 0
}
div#header {
background-color: #FF4800;
height: 200px;
width: auto;
margin: 0;
padding: 0;
}
Output on Safari: