Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
How to make a footer fixed without giving the position property like
position:fixed
I have tried a lot, but footer doesn't stand at bottom every time. Any suggestion ?
Maybe you're talking about sticky footer...
In order for this to work, the footer can’t be in a wrapper class. The code would have to be structured like this example:
<div id="page"></div>
<footer id="colophon"></footer>
Also, it is required that you set margin and padding for body to 0. These are the only requirements as far as I know of that have to do with CSS.
body {
margin: 0;
padding: 0;
}
The idea behind the jQuery was pretty simple. Check the height of the element, then check the height of the viewport. If the viewport height is greater than #page’s height, then we need to set some CSS on the footer. That CSS will just absolutely position it at the bottom of the frame. It’s a good idea to make sure your footer’s width is 100% so it looks right.
brought in jQuery and inserted the code.
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var bodyHeight = $("body").height();
var vwptHeight = $(window).height();
if (vwptHeight > bodyHeight) {
$("footer#colophon").css("position","absolute").css("bottom",0);
}
});
</script>
In order to make this work with older versions of IE (< IE9), include Google's HTML5 shiv.
<!– Add conditional for IE7 + 8 support –>
<!–[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
See the original demo or on jsFiddle
Source: Joseph Fitzsimmons
Try this
body{margin:0; padding:0;}
.footer{bottom:0 !important; position:absolute; width:100%; height:300px; text-align:center; background:#000; }
------------------ Here is complete code ----------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">html, body { height: 100%;}div.header, div.foo { display:block; text-align: center; }div.header { height:30px; background-color:#f5f5f5 }.navbar-fixed {
left: 0; position: fixed; right: 0; top: 0; z-index: 1030;}`.content {
position: relative;
min-height: 100%;
height: auto !important;
margin-bottom: -50px; /* the bottom margin is the negative value of the footer's height */
}
div.container{
padding:20px 0px 50px 0px;
}
div.foo {
height: 50px;
position: relative;
background-color:#dddddd;
}
</style>
</head>
<body>
<div class="header navbar navbar-fixed">
This is the Header
</div>
<div class="content">
<div class="container">
<p>see the forest for the trees.</p>
</div>
</div>
<div style="clear:both;"></div>
<div class="foo">
This is the footer, which will stay at the bottom!
</div>
</body>
</html>`.content {
position: relative;
min-height: 100%;
height: auto !important;
margin-bottom: -50px; /* the bottom margin is the negative value of the footer's height */
}
div.container{
padding:20px 0px 50px 0px;
}
div.foo {
height: 50px;
position: relative;
background-color:#dddddd;
}
</style>
</head>
<body>
<div class="header navbar navbar-fixed">
This is the Header
</div>
<div class="content">
<div class="container">
<p>see the forest for the trees.</p>
</div>
</div>
<div style="clear:both;"></div>
<div class="foo">
This is the footer, which will stay at the bottom!
</div>
</body>
</html>`
Related
I have a parent DIV with a child DIV that I'd like to have stretch to the bottom of the parent. At present it does not despite having height:auto!important; A screenshot illustrating the issue can be seen here.
The relevant HTML (as a Jade template) is as follows:
.main.top0
.infoPanel.koneksa_bg_blue
.innerPanel.mtop0.mbottom0
.infoCaption.font8em.koneksa_white 404
.infoCaption.koneksa_white We can't find the page you are looking for
.infoCaption.koneksa_white
| Don't worry. Just try to go back or
a.koneksa_white.underline(href='/') home
.footer.stickyBottom.koneksa_bg_gray.koneksa_fg_light_gray
The main DIV is the parent and the infoPanel is the child (colored in blue in the image above) that I am struggling to stretch.
The corresponding CSS is as follows:
.main {
width:100%;
min-height:700px;
height:auto!important;
overflow: hidden;
z-index: 1;
top:3em;
position: relative;
}
.infoPanel {
width:100%;
height:auto!important;
display: block;
padding:0;
}
.innerPanel {
width:90%;
padding:40px 0;
height:auto!important;
margin:0 5%;
display: block;
}
I'm aware that this is a fairly common question but it seems like the answer is always to include a hard-coded height. I would like to avoid this because while that was a perfectly fine solution for the desktop styling this is intended to be displayed on mobile devices and as such I'd like it to be a bit more responsive than a hard-coded height.
Thanks for any insights that you can provide.
EDIT:
The generated HTML as requested:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html"></html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 0.8, user-scalable = yes">
// Imports removed
<link href="/assets/css/mvp.css" type="text/css" rel="stylesheet" media="screen and (max-width: 768px)">
<link href="/assets/css/mvp_wide.css" type="text/css" rel="stylesheet" media="screen and (min-width: 769px)">
</head>
<body class="tk-futura-pt koneksa_gray">
<div class="fullNav koneksa_bg_white boxShadow">
<div class="centerPanel">
<div class="mleft2 left khmoniker"></div>
<div class="menu right">customer login</div>
</div>
</div>
<div class="main top0">
<div class="infoPanel koneksa_bg_blue">
<div class="innerPanel mtop0 mbottom0">
<div class="infoCaption font8em koneksa_white">404</div>
<div class="infoCaption koneksa_white">We can't find the page you are looking for</div>
<div class="infoCaption koneksa_white">Don't worry. Just try to go back or home</div>
</div>
</div>
<div class="footer stickyBottom koneksa_bg_gray koneksa_fg_light_gray">
<div class="innerPanel">
<div class="caption left">
<h5 class="konekea_blue_gray mtop2">© template-filler</h5>
<div class="kh_reverse_logo mtop2"></div>
</div>
<div class="caption right">TermsPrivacyCorporate</div>
</div>
</div>
</div>
</body>
One solution that works in all modern browsers is to do the following:
html, body {
height: 100%
}
.main {
position: absolute;
top: 3em;
bottom: 0;
width: 100%;
}
This seems an unusual solution but modern browsers will actually respect all 4 sides being defined at the same time and stretch the element to match. Here is an example jsFiddle: http://jsfiddle.net/nqt7vqs1/2/
You can do the same with all child elements as well because position: absolute implies position: relative for the purposes of positioning child elements.
If this solution doesn't work, another option is to do the following:
html, body {
height: 100%
}
.main {
position: absolute;
top: 0;
height: 100%;
margin: 3em 0 -3em 0;
overflow: hidden;
}
This is a "hidden margin" trick that also works in all modern browsers. Same Fiddle with these settings: http://jsfiddle.net/nqt7vqs1/3/
I am having issues to fix the header. I already manage to make the footer sticky and responsive, now I want the header to be fixed and responsive for different screen size.
This is what I tried so far:
Live Demo http://jsbin.com/vevay/1/edit?html,css,output
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Sticky Footer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body class="container">
<div class="block header_block">
<h1>Responsive Fixed Header</h1>
</div>
<div class="block push body_block">
<h2>Body Content</h2>
</div>
<div class="block footer_block">
<h2>Responsive The Sticky Footer</h2>
<h1>cool</h1>
</div>
</body>
</html>
CSS code
html {
height: 100%;
}
.container {
display: table;
height: 100%;
}
.block {
display: table-row;
height: 1px;
}
.push {
height: auto;
}
.container {
width: 100%;
margin: 0 auto;
}
.block:nth-child(odd) {
}
.header_block{
background: grey;
}
.body_block{
background: lightblue;
}
.footer_block{
background: green;
}
update:
I did some researcher before posting this question, their are this one but the footer is not responsive, that's why I posted this question.
EDIT
I've come up with another solution : http://jsbin.com/gevafi/2/edit but I still have a margin left at the bottom of the footer.
EDIT 2
Temporary solution: http://jsbin.com/vokiqi/1/edit?html,css,output
Decided to have mercy on you and create one from scratch for you: http://jsfiddle.net/yo2ukrua/3/
Instead of using tables, I removed all of it and kept them as blocks. For your setup, you didn't really need any tables and I'm guessing you only used it so that you could make your footer stick to the bottom.
Once they're back to blocks, you can just give the footer and header a fixed position, set the footer to bottom and header to top.
Then apply a top and bottom margin to the body and the margin should be the height of the footer and header.
CSS:
.header_block {
background: grey;
position: fixed;
width: 100%;
top: 0px;
}
.body_block {
background: lightblue;
margin-bottom: 18px; /* height of your footer */
margin-top: 18px; /* height of your header */
}
.footer_block {
background: green;
bottom: 0px;
position: fixed;
width: 100%;
}
HTML:
<body class="container">
<div class="block header_block">
<h1>Responsive Fixed Header</h1>
</div>
<div class="block push body_block">
<h2>Body Content<br>Body Content<br>Body Content <br>Body Content <br>Body Content<br>Body Content<br>Body Content<br>Body Content</h2>
</div>
<div class="block footer_block">
<h2>Responsive The Sticky Footer</h2>
<h1>cool</h1>
</div>
</body>
Alternatively, you can have a better footer
http://jsfiddle.net/yo2ukrua/15/
It uses a div (push) that has a minimum height of the window size but if the window size is smaller than the content (creating a scroll) it then uses the height of the content itself, thus always pushing the footer to the bottom. The footer also retains a position of relative.
My goal is to have a footer that stays at the bottom of the page if there is little content, and moves to the bottom of all content if the page has a lot of content (requiring a scroll down).
I read this post Flushing footer to bottom of the page, twitter bootstrap , tried the layout and css, but still can't seem to get my page to work correctly.
This is my code layout - maybe I just made a slight mistake?
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
// Header Stuff
</div>
<div class="container">
<div class="jumbotron">
// h2
</div> // end jumbotron
<div class="row">
//ALL OF THE INFORMATIONAL CONTENT
</div> //end row
</div> //end container
<footer class="footer">
//INFORMATION / LINKS
</footer> //end footer
</body>
and with the name changes to the CSS code...
html, body {
height: 100%;
}
.container {
min-height: 100%;
}
.row {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
}
I think, css flexbox can help you in this. But, just beware of browser support.
HTML:
<body class="Site">
<header>...</header>
<main class="Site-content">...</main>
<footer>...</footer>
</body>
CSS:
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
demo: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
Click on Toggle Content Button right there to see the difference.
try this one...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
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">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
Today I came across this code. It works as I would expect in Chrome, but it is adding a margin on a wrong element with Firefox:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Site Title</title>
<style type="text/css" media="screen">
body {
background-color: #aaa;
margin: 0;
}
#header {
background-color: #fff;
}
#logo {
float: left;
}
#menu {
float: right;
}
.container {
width: 960px;
margin: 0 auto;
}
.main {
margin-top: 36px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="header">
<div class="container">
<div id="logo">Logo</div>
<div id="menu">Home</div>
<div class="clear"></div>
</div>
</div>
<div class="container main">
Content
</div>
</body>
</html>
Firefox seems to add the margin in the .main rule to the content div, which was expected, and to the header div too.
If I add some text inside the header it would work as expected and the header won't have that margin:
<div id="header"> Some text here
<div class="container">
<div id="logo">Logo</div>
<div id="menu">Home</div>
<div class="clear"></div>
</div>
</div>
</div>
I can also add some text after the header block and it would also do the trick for Firefox.
I can't figure out why is Firefox adding that margin to the header element.
Very strange problem, I don't see why this happens.
It however seems to help when you add a padding of at least 1px to .container.
Also check this demo.
The problem has something to do with the container with automatic height and floating children...
Adding display:inline-block; to the #header will make it works in every browser (well except old IE), will include in the white box the right-floated div too (that now is not), and will continue to adjust the height automatically.
Fiddle: http://jsfiddle.net/AndreaLigios/VfAq7/1/
Is there a way to make a div appear half off-screen using just CSS without knowing the width of the div?
Unless I've misunderstood the question, I think it is possible with CSS, as I hope should be clear from this jsfiddle.
Example HTML
<div class="container one">
<div class="half">Hello there.</div>
</div>
<div class="container two">
<div class="half">Hello there, you old dog.</div>
</div>
<div class="container three">
<div class="half">Hello there you old dog. Been up to your old tricks?</div>
</div>
The CSS
.container {
position: absolute;
}
.half {
position: relative;
right: 50%;
}
.two {
top: 30px;
}
.three {
top: 60px;
}
Actually, no.
The div will have it's top positioned at 50% the screen... you could assume values that would "sort of" make it look like it would be in the middle if you knew more or less the height of the div before-hand. But in short, no.
Only with tables or Javascript.
i made something from jQuery. Hope its what you are after - http://jsfiddle.net/6Guc8/1/. it gets half the width of the element and then chucks half of it out the screen.
here is the jquery
$(document).ready(function(){
var half_width = $("div").width() / 2;
$("div").css("left", -half_width);
});
here is the css
div{
background: #555;
height: 100px;
width: 100px;
position: absolute;
}
here is the html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"> </script>
</head>
<body>
<div>
</div>
</body>
</html>
It is absolutely possible in CSS only. You need 1 wrapper div, however:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#wrapper {
position: absolute;
left: 0;
}
div#wrapper div {
position: relative;
padding: 30px;
background: yellow;
left: -50%;
}
</style>
</head>
<body>
<div id="wrapper">
<div>this div is halfway hidden, no matter what size it is.</div>
</div>
</body>
</html>