I'm building a website that I want to have a minimum height of 100%, so if there's not too much content on the page, the footer will be at the bottom of the page.
If there's more content, it will simply expand.
I used a website that has this as an example, and changed it to my needs.
At first it seemed to work great, but now it's showing two problems:
- The site always seems to be a bit more than 100% height; a small part extends beyond the screen.
- The footer isn't displayed at the bottom, but rather somewhere in the middle, despite having set the Bottom property.
This is the markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%# Master Language="VB" CodeFile="Site.Master.vb" Inherits="Site" %>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Site (bèta)</title>
</head>
<body>
<form id="form1" runat="server" autocomplete="off" class="formCss">
<ajax:ToolkitScriptManager ID="Toolscriptmanager1" runat="server" EnableScriptGlobalization="true" EnableScriptLocalization="true">
<Scripts>
<asp:ScriptReference Path="~/js/jquery-1.8.2.min.js" />
<asp:ScriptReference Path="~/js/jquery.curvycorners.packed.js" />
<asp:ScriptReference Path="~/js/Site.jquery.js" />
<asp:ScriptReference Path="~/js/jquery.colorize-1.3.1.js" />
</Scripts>
</ajax:ToolkitScriptManager>
<asp:Label ID="ContentTitle" runat="server" CssClass="content_title"></asp:Label>
<div id="container">
<div id="headerContainer">
<div id="header">
<telerik:RadMenu ID="HoofdMenu" EnableEmbeddedSkins="false" Height="20px" EnableImageSprites="false" Font-Size="11px" runat="server" CollapseDelay="0" ExpandDelay="0" ClickToOpen="true" ExpandAnimation-Type="None" CollapseAnimation-Type="None" CausesValidation="false"></telerik:RadMenu>
</div>
</div>
<div id="content">
<asp:ContentPlaceHolder ID="Content" runat="server"></asp:ContentPlaceHolder>
</div>
<div id="footer">
This is the footer
</div>
</div>
</form>
</body>
</html>
This is the CSS:
html,body
{
margin:5px;
padding:0;
height:100%; /* needed for container min-height */
font-family:tahoma;
font-size:11px;
color:#000000;
background-color: #8FB1B1;
/*background-image: url(../../Images/Afbeelding1.jpg);*/
}
.formCss
{
height:100%;
min-height: 100%;
}
div#container
{
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:100%;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
background-color: #FFFFFF;
}
div#headerContainer
{
background-color: #8FB1B1;
}
div#header
{
padding-left:5px;
padding-top: 12px;
height: 30px;
background-color: #1C2948; /*#833D62;*/
z-index: 100;
}
div#content
{
padding-left: 10px;
padding-right: 10px;
padding-top:10px;
background-color: #FFFFFF; /* #E0E5D7; #FFFFFF;*/
padding-bottom:25px; /* bottom padding for footer */
/*filter:alpha(opacity=80);
-moz-opacity:0.80;
opacity:0.80; */
}
div#footer
{
position:absolute;
height: 25px;
bottom:0; /* stick to bottom */
background:#FFFFFF;
padding-left: 10px;
}
I have put the code in a Fiddle: http://jsfiddle.net/7uuD6/1
(It contains ASP.NET code that JSFiddle can't handle, unfortunately)
What am I doing wrong?
Cheers,
CJ
There are two methods you could use to maintain a sticky footer, they depend on your browser support though.
If you do not care about IE7 or Firefox versions earlier than 17 you can use this approach which uses the box-model border-box property.
Border-box Version
For this you will only need two elements.
HTML
<div class="page">
</div>
<div class="page-footer">
</div>
CSS
*, *:before, *:after {
/* Fix the box model to include padding */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
position: relative;
}
.page {
min-height: 100%;
position: relative;
margin-bottom: -150px;
padding-bottom: 150px;
}
.page-footer {
height: 150px;
position: relative;
z-index: 1;
}
If you need to support older browsers then you will need to use an extra div to push the footer down.
Legacy Version
The code you will need for this version is as follows.
HTML
<div class="page">
<div class="page-push">
<!--
This div just pushes the footer down so content does not overflow it
-->
</div>
</div>
<div class="page-footer">
</div>
CSS
html, body {
height: 100%;
margin: 0;
position: relative;
}
.page {
min-height: 100%;
position: relative;
margin-bottom: -150px;
}
.page-push,
.page-footer{
height:150px;
}
.page-footer {
position: relative;
z-index: 1;
}
For that I recommend this: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
div#container {
min-height:100%;
position:relative;
}
div#header {
background:#ff0;
padding:10px;
}
div#content {
padding-bottom:___px; /* Height of the footer */
}
div#footer {
position:absolute;
bottom:0;
width:100%;
height:___px; /* Height of the footer */
background:#6cf;
}
if you apply and adjust to your html/css it wil lwork fine.
//NOTE//
It is a risk to use a absolute footer!
Try this jquery
Sticky Footer jquery
Related
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 6 years ago.
How do I write inside my footer and keep it at the bottom of the page?
.underbar {
bottom:0;
width:100%;
height:60px;
background:#000000;
}
<footer class="underbar">
</footer>
.underbar {
bottom:0;
width:100%;
height:60px;
background:#000000;
position: fixed;
}
Add Property position:fixed;
Use position:fixed property
.underbar {
bottom:0;
width:100%;
height:60px;
background:#000000;
position:fixed;
}
<footer class="underbar">
</footer>
You can add the position property in the css.
.underbar {
position:fixed;
bottom:0;
width:100%;
height:60px;
background:#000000;
}
And you can put your text inside the footer tag.
<footer class="underbar">
Your text here
</footer>
i have tried, check may be this will help u
.underbar {
bottom:0;
width:100%;
height:60px;
padding:0px;
margin:0px;
background:#000000;
position:fixed;
}
<footer class="underbar">
</footer>
You can use the following:
position: fixed;
right: 0;
bottom: 0;
left: 0;
and it will work!
Below you may find a jfiddle example for your code:
https://jsfiddle.net/2wqrg2zu/
<style>
.underbar {
bottom:0;
width:100%;
height:60px;
background:#000000;
position: fixed;
}
</style>
<HTML>
<HEAD>
</HEAD>
<BODY>
<footer class="underbar">
footer
</footer>
</BODY>
</HTML>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin: 0 auto -60px;
background:green;
}
footer{
height: 60px;
background:#000000;
color:#ffffff;
text-align:center;
}
.push {
height: 60px;
}
header{
background:gold;
}
<!DOCTYPE html>
<div class="wrapper">
<header>
<h1>Fixed Footer</h1>
</header>
<div class="push"></div>
</div>
<footer>
<h5>
Fixed Footer
</h5>
</footer>
check it
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0 none repeat scroll 0 0;
padding: 10px;
}
#body {
padding: 10px 10px 60px;
}
#footer {
background: #6cf none repeat scroll 0 0;
bottom: 0;
height: 60px;
position: absolute;
width: 100%;
}
#header p,
#header h1 {
margin: 0;
padding: 10px 0 0 10px;
}
#footer p {
margin: 0;
padding: 10px;
}
<div id="container">
<div id="header">
<!-- Header start -->
<p>« Back to the CSS article by Matthew James Taylor
</p>
<h1>How to keep footers at the bottom of the page (CSS demo)</h1>
<!-- Header end -->
</div>
<div id="body">
<!-- Body start -->
<p>In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade
gracefully by positioning the footer under the content as per normal. Read the full article for all the details.</p>
<!-- Body end -->
</div>
<div id="footer">
<!-- Footer start -->
<p><strong>Footer</strong> (always at the bottom). View more website layouts and web design articles.</p>
<!-- Footer end -->
</div>
</div>
First add these scripts to your document.
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
And then add the class "footer navbar-fixed-bottom" to the footer.
Thats should work.
<footer class="footer navbar-fixed-bottom"> </footer>
I want a frame-like behavior, where I have a header (non-scrolling), footer stays at the bottom (non-scrolling), and in the middle to have two vertical divs. If content in these divs is too long for a window, they should show their own scrollbars - that is- no scrollbars in the body itself. I can't figure out how to make the div's width be: current-window-size - (footer + header). Is there a way to do it with CSS alone? (browser support needed IE9+)
HTML
<body>
<header>
<p>Header here</p>
</header>
<div> Something else here</div>
<main>
<div id="pane-1" style="background-color:#eee;">
Have your own scrollbar
</div>
<div id="pane-2" style="background-color:#ccc;">
Have your own scrollbar too
</div>
</main>
<footer style="background-color: #FFC;"> Footer here - should not scroll</footer>
</body>
CSS
html,
body {
overflow: hidden;
margin:0;
}
#pane-1,
#pane-2 {
display: inline-block;
vertical-align: top;
overflow: auto;
width: 49%;
}
footer {
height: 70px;
width:100%;
position: absolute;
bottom: 0;
}
Here is my code
http://codepen.io/anon/pen/tyvAe
Why not use the magic of semantic HTML and absolute positioning (note, background colors are used below to clearly show the various sections)
HTML
<header></header>
<section></section>
<section></section>
<footer></footer>
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
header, footer, section {
position:absolute;
width:100%;
}
header, footer {
height:50px;
background:red;
}
footer {
bottom:0;
}
section {
width:50%;
overflow:auto;
background:blue;
top:50px;
bottom:50px;
}
section:last-of-type {
background:yellow;
left:50%;
}
I don't know a realy good way to do this without Javascript, but here's mine with as little Javascript as possible (you'll need JQuery for this one):
http://jsfiddle.net/g13ogq2u/2/
Basically it's for the CSS:
html {
height:100%;
width:100%;
}
body {
width:100%;
height:100%;
margin: 0px;
padding: 0px;
background-color: #ffffff;
}
.header {
width:100%;
height: 50px;
min-height:50px;
padding:0px;
background-color:#CCAA00;
}
.page {
min-height: 100%;
height: auto !important;
/*Cause footer to stick to bottom in IE 6*/
height: 100%;
margin: 0 auto -70px;
/*Allow for footer height*/
vertical-align:bottom;
}
.content {
height:100%;
width:100%;
margin:0;
position:relative;
overflow:hidden;
}
.subContent {
height:100%;
width:50%;
min-height:100%;
margin:0;
float:left;
overflow:auto;
}
#subContentA {
background-color:#EEEEEE;
}
#subContentB {
background-color:#CCCCCC;
}
.pushFooter {
height: 70px;
/*Push must be same height as Footer (including its paddings) */
min-height:70px;
}
.footer {
height: 70px;
/*Push must be same height as Footer */
min-height:70px;
width:100%;
padding:0px;
margin:0px;
background-color:#FFFFCC;
position:relative;
overflow:hidden;
}
The little JQuery code is:
$.fn.doFitSize = function () {
var dHeight = $(window).height();
var hHeight = $(this).prevAll().outerHeight();
var fHeight = $(this).nextAll().outerHeight();
var cHeight = dHeight - hHeight - fHeight;
$(this).height(cHeight);
}
$(document).ready(function () {
$('.content').doFitSize();
});
$(window).resize(function () {
$('.content').doFitSize();
});
And the HTML would be:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
/* add mentioned style here */
</style>
<script src="jquery-1.9.1.js" type="text/javascript" ></script>
<script type="text/javascript">
/* add mentioned script here */
</script>
</head>
<body>
<div class="page">
<div class="header">
<span>this is the header</span>
</div>
<div class="content">
<div id="subContentA" class="subContent">
<span>This is the left content.</span>
</div>
<div id="subContentB" class="subContent">
<span>This is the right content</span>
</div>
</div>
<div class="pushFooter"></div>
</div>
<div class="footer">
<span>And this is the footer</span>
</div>
</body>
</html>
Hope it helps ;)
You can do this with css...
#pane-1, #pane-2 {
width: 200px;
height: 200px;
overflow: scroll;
}
Depending on what you need, you may also like to play with css property: max-height in place of height.
I have an outer element that is a fixed size with a footer immediately below it. Inside the element are two sections; the first should be a fixed height and the second should expand to fill the other element but not overflow it.
Let me show you.
How do I do this? setting height: 100% on the second element causes it to oveflow the outer element and overrun the footer. The only other alternative I see is to se the height explicitly in pixels which seems like it would be a mess.
What's the right way to do this?
Edit: setting overflow-y: hidden will work in this very limited example, but its not actually limiting section.inner2 and will look weird if for example I want to give section.inner2 a border-radius
The simplest solution that I can think of (and I don't think very much) is just using position: absolute;: http://jsfiddle.net/WLZmT/3/.
HTML:
<div id="outer">
<div id="fixed">
Fixed.
</div>
<div id="fluid">
Fluid.
</div>
</div>
CSS:
#outer {
position: relative;
background: rgb(255, 200, 200);
padding: 10px;
height: 400px;
}
#fixed {
height: 100px;
padding: 10px;
background: rgb(200, 255, 200);
}
#fluid {
padding: 10px;
background: rgb(200, 200, 255);
position: absolute;
top: 100px;
bottom: 10px;
left: 10px;
right: 10px;
}
like this?
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style media="screen" type="text/css">
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
left:50%;
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#container {
height:100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
head
<!-- Header end -->
</div>
<div id="body">
<!-- Body start -->
<!-- Body end -->
</div>
<div id="footer">
<!-- Footer start -->
footer
<!-- Footer end -->
</div>
</div>
</body>
</html>
I am trying to find a way to center the logo + text. The image+text should be center vertically and horizontally.
I tried couple of things and now i have this html
<html>
<head>
<title>XXX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
text-align:center; /* Hack for IE5/Win */
}
#floater {float:left; height:50%; margin-bottom:-120px;}
#Content {
clear:both;
width:500px;
margin:0px auto; /* Right and left margin widths set to "auto" */
text-align:center; /* Counteract to IE5/Win Hack */
padding:15px;
height:240px;
position:relative;
}
#text-center{
text-align:center;
font-family:Tahoma, Geneva, sans-serif
}
</style>
</head>
<body>
<div id="Content">
<img src="logo_small.jpg" width="400" height="143">
<p id="text-center">Coming soon</p>
<p id="text-center">more text</a></p>
</div>
</body>
</html>
I don't know anything related to html/css
Here's what I came up with: http://jsfiddle.net/CMfEH/
I used a variant of what's descriped in Vertically Centering in CSS.
Vertically aligning content is typically a bad practice but can be achieved using
EDIT: had to switch up some css...
#Content {
margin: 0px auto;
...
height: 100%;
}
#subContent {
position: absolute;
top: 50%;
height:240px;
margin-top: -120px;
}
And creating a <div id="subContent"> div inside your Content parent div.
Trying to implement "sticky" footer but its not working as planned. It throws it at the bottom and on first scroll it works as supposed to (except that it shows an inner-scroll bar). When scrolling back up, the stick footer doesn't disappear right away, it takes a few scrolls then it seems to go back to the "bottom". So my question is how do I keep the footer at the bottom at all times and eliminate the inner scroll bar. I am wondering if my absolute positioning is problematic on the main-content-inner. That div is expandable in height.
Here is the code:
<div id="page-wrap">
<div id="main-content>
<div id="main-content-inner></div>
</div>
<div class="footerpush"></div>
</div>
<div id="footer">copyright info</div>
#page-wrap {
width:100%;
min-height:100%;
height:auto;
height:100%;
margin-bottom:-20px;
position:relative;
overflow:auto;
}
#main-content {
width: 100%;
height:100%;
margin-left: -295px;
position:relative;
}
#main-content-inner {
left: 560px;
border-radius:8px;
border-style:solid;
border-width:2px;
border-color:#53D8FF;
padding:20px;
padding-bottom:0;
background-color:#000000;
position:absolute;
top:100px;
min-width:60%;
max-width:60%;
}
#footer {
text-align: right;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
color: #A7A9AC;
font-size: 12px;
height:20px;
}
.footerpush
{
height:20px;
}
If I remove overflow auto from page-wrap, the footer actually moves to the bottom of my page-wrap div. So it appears that because of my absolute main-content-inner being absolute, it is expanding outside of my wrapper? If I set a fixed value on the height of page-wrap, the footer moves to the bottom as it should. So this is the real question, how do I keep my footer at the bottom of the page even with expandable content?
Further research shows that when i set overflow to hidden on page wrap, that my absolute content "main-content-inner" gets cut off. How do I get the height of page-wrap expand to the height of main-content-inner, no matter what it is?
As I answered here, you can use http://www.cssstickyfooter.com/:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom: 150px; /* must be same height as the footer */
}
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="main">
<div id="content">
<!-- Main content here -->
</div>
</div>
</div>
<div id="footer">
<!-- Footer content here -->
</div>
</body>
</html>
You can see a working example here: http://jsfiddle.net/dZDUR/
Resize the right-hand "Result" pane to be shorter/taller than the text
to see the scroll bar appear / disappear.
As per the CSS Sticky Footer how-to, you can insert your normal
'column' layout inside the main div.
Try this :
Rewrite your HTML code like this :
<div id="page-wrap">
<div id="main-content">
<div id="main-content-inner">
</div>
</div>
<div class="footerpush"></div>
<div id="footer">copyright info</div>
</div>
And rewrit your CSS file style properties :
html,body
{ height:100%;
padding:0;
margin:0;
}
#page-wrap {
width:100%;
min-height:100%;
position:relative;
overflow:auto;
}
#main-content {
background:#FF0;
padding-bottom:40px;
}
#main-content-inner {
border-radius:8px;
border-style:solid;
border-width:2px;
border-color:#53D8FF;
padding:20px;
padding-bottom:0;
background-color:#000000;
}
#footer {
text-align: right;
color: #A7A9AC;
font-size: 12px;
height:20px;
position:absolute;
bottom:0;
width:100%;
}
.footerpush
{
position:absolute;
bottom:20px;
height:20px;
width:100%;
}