This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 8 years ago.
I am trying to have my footer (just a div with a line of text in it) be at the bottom of the screen if the content doesn't go all the way to the bottom, or be at the bottom of the content if the content requires scroll bars. If the content doesn't require scroll bars, it works perfectly, but when the content is too long, the footer is still in the same spot, sitting right on top of the content.
My basic div structure is:
<div id="container">
<div id="body"></div>
<div id="footer"></div>
</div>
My corresponding CSS (stripped down somewhat):
body {
margin: 0;
padding: 0;
height: 100%;
}
html {
margin: 0;
padding: 0;
height: 100%;
}
#container {
width: 674px;
min-height: 100%;
height: 100%;
position: relative;
margin: 0 auto;
}
#body {
width: 616px;
padding: 5px 14px 5px 14px;
margin: 0 auto;
padding-bottom: 20px;
}
#footer {
position: absolute;
bottom: 0;
width: 644px;
height: 20px;
margin: 0 auto;
}
The simplest solution is to use min-height on the <html> tag and position the <footer> with position:absolute;
Demo: jsfiddle and SO snippet:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
padding: 25px;
}
footer {
background-color: orange;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
}
<article>
<!-- or <div class="container">, etc. -->
<h1>James Dean CSS Sticky Footer</h1>
<p>Blah blah blah blah</p>
<p>More blah blah blah</p>
</article>
<footer>
<h1>Footer Content</h1>
</footer>
Why not using: { position: fixed; bottom: 0 } ?
A simple solution that i use, works from IE8+
Give min-height:100% on html so that if content is less then still page takes full view-port height and footer sticks at bottom of page. When content increases the footer shifts down with content and keep sticking to bottom.
JS fiddle working Demo: http://jsfiddle.net/3L3h64qo/2/
Css
html{
position:relative;
min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
margin:0;
padding:0;
}
.pageContentWrapper{
margin-bottom:100px;/* Height of footer*/
}
.footer{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height:100px;
background:#ccc;
}
Html
<html>
<body>
<div class="pageContentWrapper">
<!-- All the page content goes here-->
</div>
<div class="footer">
</div>
</body>
</html>
Use this one. It will fix it.
#ibox_footer {
padding-top: 3px;
position: absolute;
height: 20px;
margin-bottom: 0;
bottom: 0;
width: 100%;
}
Use min-height as some pixel value, instead of %.
Like:
min-height:620px;
height:auto;
and footer as:
.footer {
height:70px;
clear:both;
position:relative;
bottom:0;
width: 100%;
}
do it using jQuery put inside code on the <head></head> tag
<script type="text/javascript">
$(document).ready(function() {
var docHeight = $(window).height();
var footerHeight = $('#footer').height();
var footerTop = $('#footer').position().top + footerHeight;
if (footerTop < docHeight) {
$('#footer').css('margin-top', 10 + (docHeight - footerTop) + 'px');
}
});
</script>
This should help you.
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer {
height: 155px;
}
the easiest hack is to set a min-height to your page container at 400px assuming your footer come at the end. you dont even have to put css for the footer or just a width:100% assuming your footer is direct child of your <body>
The model being shared here is very similar to Ryan Fait's StickyFooter
http://ryanfait.com/sticky-footer
Just one div is missing so far in this discussion (the model proposed here by Kenneth Palanganas worked fine for local Win81 design for about 48 hours and then in ie/chrome collapsed for unknown reason). Ryan's "push" div will satisfy some reluctant browsers. Note that px is usual, however, for liquid layout consistency, em may be preferred.
* { border: 0; margin: 0; padding: 0; }
html, body { height: 100%; }
.wrapper { height: auto !important; height: 100%; margin: 0 auto -1em; min-height: 100%; }
.footer, .push { height: 1em; }
<div class="wrapper"><p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer"><p>This is a footer</p>
</div>
I would like to share how I solved mine using Javascript function that is called on page load. This solution positions the footer at the bottom of the screen when the height of the page content is less than the height of the screen.
function fix_layout(){
//increase content div length by uncommenting below line
//expandContent();
var wraph = document.getElementById('wrapper').offsetHeight;
if(wraph<window.innerHeight){ //if content is less than screenheight
var headh = document.getElementById('header').offsetHeight;
var conth = document.getElementById('content').offsetHeight;
var footh = document.getElementById('footer').offsetHeight;
//var foottop = window.innerHeight - (headh + conth + footh);
var foottop = window.innerHeight - (footh);
$("#footer").css({top:foottop+'px'});
}
}
function expandContent(){
$('#content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus rutrum interdum. Pellentesque lorem. Curabitur sit amet erat quis risus feugiat viverra. Pellentesque augue justo, sagittis et, lacinia at, venenatis non, arcu. Nunc nec libero. In cursus dictum risus. Etiam tristique nisl a nulla. Ut a orci. Curabitur dolor nunc, egestas at, accumsan at, malesuada nec, magna.</p>'+
'<p>Nulla facilisi. Nunc volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut sit amet orci vel mauris blandit vehicula. Nullam quis enim. Integer dignissim viverra velit. Curabitur in odio. In hac habitasse platea dictumst. Ut consequat, tellus eu volutpat varius, justo orci elementum dolor, sed imperdiet nulla tellus ut diam. Vestibulum ipsum ante, malesuada quis, tempus ac, placerat sit amet, elit.</p>'+
'<p>Sed eget turpis a pede tempor malesuada. Vivamus quis mi at leo pulvinar hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque aliquet lacus vitae pede. Nullam mollis dolor ac nisi. Phasellus sit amet urna. Praesent pellentesque sapien sed lacus. Donec lacinia odio in odio. In sit amet elit. Maecenas gravida interdum urna. Integer pretium, arcu vitae imperdiet facilisis, elit tellus tempor nisi, vel feugiat ante velit sit amet mauris. Vivamus arcu. Integer pharetra magna ac lacus. Aliquam vitae sapien in nibh vehicula auctor. Suspendisse leo mauris, pulvinar sed, tempor et, consequat ac, lacus. Proin velit. Nulla semper lobortis mauris. Duis urna erat, ornare et, imperdiet eu, suscipit sit amet, massa. Nulla nulla nisi, pellentesque at, egestas quis, fringilla eu, diam.</p>'+
'<p>Donec semper, sem nec tristique tempus, justo neque commodo nisl, ut gravida sem tellus suscipit nunc. Aliquam erat volutpat. Ut tincidunt pretium elit. Aliquam pulvinar. Nulla cursus. Suspendisse potenti. Etiam condimentum hendrerit felis. Duis iaculis aliquam enim. Donec dignissim augue vitae orci. Curabitur luctus felis a metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In varius neque at enim. Suspendisse massa nulla, viverra in, bibendum vitae, tempor quis, lorem.</p>'+
'<p>Donec dapibus orci sit amet elit. Maecenas rutrum ultrices lectus. Aliquam suscipit, lacus a iaculis adipiscing, eros orci pellentesque nisl, non pharetra dolor urna nec dolor. Integer cursus dolor vel magna. Integer ultrices feugiat sem. Proin nec nibh. Duis eu dui quis nunc sagittis lobortis. Fusce pharetra, enim ut sodales luctus, lectus arcu rhoncus purus, in fringilla augue elit vel lacus. In hac habitasse platea dictumst. Aliquam erat volutpat. Fusce iaculis elit id tellus. Ut accumsan malesuada turpis. Suspendisse potenti. Vestibulum lacus augue, lobortis mattis, laoreet in, varius at, nisi. Nunc gravida. Phasellus faucibus. In hac habitasse platea dictumst. Integer tempor lacus eget lectus. Praesent fringilla augue fringilla dui.</p>');
}
/*sample CSS*/
body{ background: black; margin: 0; }
#header{ background: grey; }
#content{background: yellow; }
#footer{ background: red; position: absolute; }
#header, #content, #footer{ display: inline-block; width: 100vw; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="fix_layout()">
<div id="wrapper">
<div id="header" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
[some header elements here]
</div>
<div id="content" class="container">
[some content elements here]
</div>
<div id="footer" class="footer">
[some footer elements here]
</div>
</div>
</body>
Hope that helps.
Related
I want to add a footer to my website, and I want to be attached to the bottom of my screen, how can I do that?
I have tried this:
.footer {
position: absolute;
width: 100%;
background: #0084FF;
color: #fff;
padding: 25px;
margin-top: 0px;
margin: 0px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
z-index: 99999;
}
My issue is, if I do this, it will stick to the bottom, but a section of what I have on my div (on the right side) will be off my screen, if I remove the padding, it will look really bad. Is there any other way of doing this?
NOTE: The HTML code for the div I think isn't needed, since there isn't anything special with the HTML code section of my footer.
Did you try with box-sizing: border-box;?
See documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Example below (use the [<>] button to create a working example in your post!).
I used position: fixed; and bottom: 0; here to make the example look good, but use your own way of course.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
p {
margin-bottom: 20px;
}
.body {
width: 100%;
height: 100%;
padding: 15px;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
background: #0084FF;
color: #fff;
padding: 25px;
margin-top: 0px;
margin: 0px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
z-index: 99999;
}
<div class="footer">Footer</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</p>
<p>Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.</p>
<p>Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris.</p>
<p>Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus.</p>
<p>Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac</p>
</div>
You can use bottom: 0 (MDN Web Docs reference for more info) to push the footer to the bottom and use position: fixed or position: sticky (MDN Web Docs reference for more info) to make the footer stay at the bottom. Here's a working example :
body {
background-color: gold;
margin: 0;
}
.content {
<!-- Added this to show you that you can scroll and the footer stays at the bottom -->
height: 1500px;
}
footer {
position: fixed;
bottom: 0;
width: 100vw;
background: #0084FF;
color: #fff;
padding: 25px;
}
<div class="content"></div>
<footer>Footer</footer>
You can try position fixed or sticky:
I used fixed. Here's the code, I gave some styling and the positioning
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
footer{
width: 100%;
background-color: rgb(231, 0, 0);
position: fixed;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<!-- Put in text or other code -->
<footer>
Copyright lorem.com ©
</footer>
</body>
</html>
Solution:
If you want the footer to stick at the bottom then you must have bottom: 0; for your footer. Also, position: absolute; will only keep the footer till the end of its parent container so if you want the footer to stay at the bottom even while the user is scrolling, try using position: fixed; or position: sticky;.
Code
.scroll{
<!-- this is present here only to show you the scrolling mechanism -->
margin-top: 100px;
width:100%;
height:300vh;
background: #ff0000;
}
.footer{
position: fixed;
bottom: 0;
background: #000;
color: #fff;
min-height: 50px;
width: 100vw
}
<div class="scroll">...</div>
<div class="footer">This is a footer</div>
To start, I am aware that this question has been asked many times previously, and answered about as many times as it has been asked. Unfortunately I have not been able to get the solutions provided here, here and here to work for me.
I have only been using html and css for a few weeks, teaching myself through Codecademy. Sadly Codecademy's positioning tutorials are littered with bugs so the code I have here is the product of much trial and error and I'm not sure if any of it has been setup "correctly".
Without further ado, here's my current code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Header Test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
</body>
</html>
CSS
html, body {
height:100%;
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100%;
position: relative;
}
.header {
height: 75px;
padding: 10px;
background-color: red;
}
.content {
height:100%;
}
.footer {
width:100%;
height: 75px;
bottom: 0;
position: absolute;
background-color: red;
}
This code makes me a header and footer with a content div between them. However, the content div is 0px tall. I would like the div to stretch from the bottom of the header to the top of the footer.
Here's a JSFiddle of my current code. Thanks in advance for any help.
The 'modern' way is to use flexbox
DEMO
.wrapper {
min-height: 100%;
position: relative;
display:flex;
flex-direction: column;
justify-content: flex-start;
}
.content {
flex:1;
background:pink;
}
Edit: DEMO USING TABLE
Here is your solution.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100%;
position: relative;
}
.header {
height: 75px;
padding: 10px;
background-color: red;
}
.content {
height: 100%;
width: 100%;
position: absolute;
display: block;
background-color: blue;
}
.footer {
width: 100%;
height: 75px;
bottom: 0;
position: absolute;
background-color: orange;
}
<div class="wrapper">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
I think you need this code:
.content {
height:100vh;
}
Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.[reference]
Your code is working actually. If <div class"content"> is empty then the height is 0px. Otherwise use fixed height value.
HTML:
<body>
<div id="header"></div>
<div id="content"><div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque malesuada diam eu aliquet pretium. Donec dapibus condimentum lectus a porta. Fusce sed augue bibendum, egestas nisi rhoncus, varius lectus. Nullam vitae erat vitae purus dapibus aliquet. Praesent id urna aliquet, interdum mi sit amet, dictum nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris facilisis sodales ligula, nec pulvinar neque ornare et. Vivamus ultrices odio venenatis lectus semper, at luctus sem tempus. Ut molestie sem ac faucibus pulvinar. Ut in massa et mauris congue accumsan at eu magna. Sed augue risus, varius eget vehicula eget, fringilla in magna. Proin tempus ante leo, non tempor justo cursus a. Sed a posuere nisl.
Nulla imperdiet nulla auctor tellus ultricies, quis cursus libero finibus. Praesent sed justo nec ex blandit pretium non in eros. Praesent a mollis ante. Donec sit amet vehicula quam, ut euismod dolor. Vivamus vitae faucibus felis. Ut eget condimentum arcu. Curabitur vel felis tortor. Quisque a semper neque. Fusce a diam ac elit fringilla sodales sit amet vel ligula.
Donec blandit congue commodo. Etiam dolor tellus, viverra et molestie vel, bibendum non diam. Vivamus dignissim ac sapien eget vulputate. Pellentesque eu ex nec tellus malesuada sollicitudin. Vivamus non erat eu est dapibus accumsan nec a erat. Donec a ligula tellus. Maecenas et ullamcorper urna.
Morbi maximus, quam a vulputate hendrerit, augue enim consectetur massa, vel tristique dui felis vel leo. Ut id pellentesque nisi, eget congue magna. Nunc vitae auctor quam. Etiam varius, nisi sed cursus faucibus, felis metus luctus enim, eu consectetur elit nulla ut magna. Donec mi tortor, ultricies eget fringilla vitae, fringilla et nisl. Vestibulum vestibulum neque leo, in viverra sapien vehicula quis. Donec fermentum placerat dignissim. Duis vestibulum dolor a tellus eleifend ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris quis suscipit diam. Vivamus tristique dignissim fermentum. Phasellus eu cursus ipsum. Quisque magna purus, ultrices quis dolor vitae, dignissim pharetra nisi. Sed sollicitudin blandit nulla, a consequat lorem congue in. Fusce a dapibus orci. Aenean sed laoreet ex.
Aenean eget volutpat dui, a eleifend sem. Fusce malesuada sodales dapibus. Cras gravida ornare mauris, a ullamcorper massa pulvinar eu. Proin facilisis dapibus commodo. Nullam ac sem ultrices, iaculis nulla at, pulvinar velit. Cras auctor, mauris sit amet viverra tristique, nunc turpis faucibus lacus, at rutrum massa diam eu nisi. Aenean facilisis metus tempor accumsan tristique. Phasellus condimentum mauris a neque iaculis pretium ut vitae ligula. Vivamus congue mi eget sagittis iaculis. Praesent urna ipsum, porta in eros et, commodo vulputate odio. Vestibulum bibendum arcu sit amet orci viverra pellentesque. Etiam pellentesque sodales nisi, sit amet consequat mi ornare ut. Donec non cursus velit.
</div>
</div>
<div id="footer"></div>
</body>
CSS:
html { height: 100%; }
body {
height:100%;
min-height: 100%;
background: #000000;
color: #FFFFFF;
position:relative;
}
#header {
height:50px;
width:100%;
top:0px;
left:0px;
background: #CCCCCC;
position:fixed;
}
#footer {
height:50px;
width:100%;
bottom:0px;
left:0px;
background: #CCCCCC;
position:fixed;
}
#content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height:100%;
padding: 0 20px;
}
#content > div {
padding: 70px 0;
}
I am trying to get my main content and menu divs to stretch to the top of the footer div. My HTML is:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
}
#header {
padding: 10px;
background: #3095C7;
}
#main {
padding-bottom: 80px;
bull
}
#content {
padding-left: 310px;
background: #FFEFC4;
}
#menu {
background: #67b5d1;
width: 300px;
position: absolute;
float: left;
}
#footer {
text-align: center;
padding: 30px 0;
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
background: #3095C7;
}
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="menu">
menu here
</div>
<div id="content">
content here
</div>
</div>
<div id="footer">footer content</div>
</div>
I have set the main, content, and menu height to 100%, but that of course just is to the very bottom of the wrapper div, which is beyond footer. What I am trying for is for menu and content to stretch from the header all the way down to the top of footer, so it fills the whole page. I have played around with vh but isn't spot on constantly when re-sizing the window.
Are there any tricks that will make the divs fill all the blank space and not overlap the footer?
Very simple with flexbox (browser support is IE10+ and everything else that's remotely modern)
Set up #wrapper to be display: flex; flex-flow: column nowrap
Set up #main to be flex: 1 1 auto and display: flex so 1) that it grows to the necessary height and 2) so that it's children will also grow to the height of #main.
Set flex: 0 1 300px on #menu (and remove floats/position: absolute) and set #content to be flex: 1 1 auto.
EDIT
Forgot to remove position: absolute (and associated bottom/left rules) from the footer. I also added a ton of content (and modified the left menu to not shrink flex: 0 0 300px instead of flex: 0 1 300px so that a bunch of content doesn't collapse it into nothing-ness
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
display:flex;
flex-flow: column nowrap
}
#header {
padding: 10px;
background: #3095C7;
}
#main {
display: flex;
flex: 1 1 auto;
}
#content {
flex: 1 1 auto;
background: #FFEFC4;
}
#menu {
background: #67b5d1;
flex: 0 0 300px;
}
#footer {
text-align: center;
padding: 30px 0;
width: 100%;
height: 50px;
background: #3095C7;
}
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="menu">
menu here
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu tristique ex, at rhoncus sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec non ipsum ut nulla volutpat gravida. Donec euismod nibh venenatis fermentum dignissim. Nulla sagittis tristique felis vitae fermentum. Phasellus at viverra sem. In scelerisque mi ac dolor convallis, vitae convallis felis condimentum. Donec porta leo nec semper luctus. In dignissim bibendum viverra. Maecenas molestie, dui eget finibus hendrerit, arcu turpis dapibus arcu, laoreet aliquam lectus justo a lorem. In et enim ac elit tincidunt imperdiet. Phasellus eget erat sed nulla placerat venenatis et in ligula. Mauris volutpat feugiat diam sit amet bibendum. Donec vulputate tristique augue vel pharetra. Mauris orci quam, pharetra lacinia commodo eu, tristique at est.
Morbi metus sapien, venenatis a pulvinar eget, accumsan et nisi. Phasellus vitae blandit augue. Proin quis mollis orci. Ut consequat tempor nulla id dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce in euismod nibh, pharetra laoreet eros. Donec feugiat neque est, ac pharetra quam sollicitudin a.
Donec hendrerit ac magna at tincidunt. Pellentesque eget eros vel mauris porttitor aliquam ac vel tortor. Vestibulum vitae porttitor enim, eu scelerisque quam. Suspendisse tincidunt nisi non eros condimentum, quis faucibus arcu pellentesque. Morbi aliquet, est at pretium molestie, est arcu volutpat lectus, et condimentum leo risus sed velit. Maecenas at fermentum magna. Duis sit amet pretium ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, facilisis eu tellus vel, sagittis pretium metus. Aenean fermentum sem eu finibus dignissim. Fusce lacinia purus at libero ornare ultricies. Etiam pellentesque erat nisi, a ullamcorper arcu varius eu. Quisque lacinia bibendum ipsum vitae bibendum.
Maecenas non consequat augue, id euismod magna. Vestibulum ut maximus eros, ut efficitur neque. Aenean feugiat nunc et viverra pulvinar. Praesent vitae lobortis mi. Duis eu lorem a velit consequat fringilla at eu lacus. Ut mi mauris, cursus et lectus non, auctor iaculis eros. Sed sit amet efficitur arcu. Maecenas in enim quis massa vestibulum imperdiet ac quis dui. Curabitur malesuada, neque eu scelerisque sagittis, erat nisl condimentum sapien, vitae volutpat felis nisi ac lectus. Fusce iaculis mollis enim, vitae consectetur metus egestas sed. Proin lacus lorem, finibus ut tincidunt quis, tincidunt a urna. Donec fringilla risus augue, et bibendum diam cursus vitae. Aenean mattis sapien eget volutpat ornare.
</div>
</div>
<div id="footer">footer content</div>
</div>
I think your code is a bit messed.
If I understood correctly your question you have a header and footer with fixed height and you want the content of the web to fill the height of the (vertical) window.
When using height:100% remember all parents need to have same height 100% but then you may have a problem as height 100% plus the fixed height of footer and header will create a scroll bar.
you can use css calc to substract px's to 100% height. I calculate the pixels you need to subtract in your example and the height for your content shoudl be:
height:calc(100% - 110px);
AND the height of your main:
height:calc(100% - 20px);
The rest is your css's with many changes to achieve what I think you were looking for. corrent me if I am wrong: FIDDLE
(you can see I also used calc to set the width to your content since your menu also had fixed width)
Note: carefull with the use of this technique if you NOT using border-boxfor your containers as all the paddings you are using add width (or height) to your elements. I recomend you to get use to add
* {
box-sizing: border-box;
}
in your css sheets. Once you get use to your live will be easier (just my humble opinion, some may disagree)
Assuming your footer has a fixed height, you can automatically set the height of #menu and #content using position: absolute:
position: absolute;
top: 0;
bottom: 110px; /* #footer height */
Most of the time, absolutely positioned elements have auto values of height and width computed to fit the contents of the element. However, non-replaced absolutely positioned elements can be made to fill the available space by specifying (as other than auto) both top and bottom and leaving height unspecified (that is, auto). Likewise for left, right, and width.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/position#Notes
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
}
#header {
padding: 10px;
background: #3095C7;
}
#main {
position: absolute;
top: 20px;
bottom: 0;
width: 100%;
}
#content {
position: absolute;
left: 310px;
right: 0;
top: 0;
bottom: 50px;
background: #FFEFC4;
}
#menu {
background: #67b5d1;
top: 0;
bottom: 50px;
width: 300px;
position: absolute;
}
#footer {
text-align: center;
padding: 30px 0;
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
background: #3095C7;
}
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="menu">
menu here
</div>
<div id="content">
content here
</div>
</div>
<div id="footer">footer content</div>
</div>
Add a specified height into your CSS, e.g. height: 100px and then set overflow to hidden.
So basically, just add:
height: 100px;
overflow: hidden;
to your menu and content.
I expect my question has already been answered numerous times but I couldn't find it.
I'm trying to create 2 divs which are next to each other within a container. However as soon as I add content, they overflow. I've included a JSFiddle but for some reason my 2 divs are already appearing outside of the container - it doesn't on my local version. I'd like the div which the content is in to expand as well as the container. Hope I've explained it ok.
JSFiddle
* {
margin:0px;
padding:0px;
}
body {
background-color:#C0D498;
}
#page-wrap {
background-color:#FFF;
width:940px;
margin:0 auto;
margin-top: 40px;
border-radius: 5px;
padding: 20px;
}
.logo {
width:175px;
height:auto;
}
.banner {
width:755px;
height:175px;
float:right;
border-radius: 5px;
background-image:url('images/banner.png');
}
.contentWrap {
padding-bottom: 20px;
}
.contentMain {
width:70%;
background-color:blue;
float:left;
}
.contentSub {
width:30%;
background-color:red;
float:left;
}
replace your html with this:
<div id="page-wrap">
<div class="banner"></div>
<div class="contentWrap">
<div class="contentMain">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac semper mauris. Maecenas orci dui, auctor ac auctor eu, pretium et mi. Donec interdum diam in est euismod gravida. Curabitur ligula tortor, bibendum nec odio maximus, efficitur lobortis mauris. Vestibulum in est rutrum, imperdiet turpis quis, elementum massa. Sed quis odio ut urna porttitor lobortis. Vivamus feugiat accumsan porttitor. Quisque sed ligula ac neque faucibus tristique. Suspendisse molestie eleifend purus vitae maximus. Proin posuere ante ut velit condimentum aliquam. Nullam pellentesque, mi rhoncus sagittis efficitur, libero ante scelerisque turpis, quis cursus dui libero eget dui. Suspendisse fringilla ut massa at aliquam. Praesent ut tempus erat, nec euismod ligula. Aliquam dui ex, viverra id commodo a, cursus sed sem. Praesent vel egestas nisl.</div>
<div class="contentSub">g</div>
</div>
<div style="clear:both; float:none;"></div>
</div>
The important part is this: <div style="clear:both; float:none;"></div>
and of course you can do it like this (recommended)
<div class="clear"></div>
and CSS
.clear{clear:both; float:none;}
.contentWrap { overflow: hidden; }
only this!
don't know if you want to float your banner
http://jsfiddle.net/flocko/fhrpghjb/
.contentWrap {
padding-bottom: 20px;
clear: both;
overflow: hidden;
}
as a rule of thumb: every element you float - you should clear in the parent element.
a clearfix class could help you on your way: http://nicolasgallagher.com/micro-clearfix-hack/
I have created a page with a static image positioned to the ride side of the browser at full height (with a gradient over it) and a block of text to the left. I want the image to resize with the browser window, however I do not want the image to go behind the text or to get smaller than the text. When I set a min-width and min-height on the body, for example 1024x768, this doesn't solve the problem. Am I doing something wrong? How should I go about doing this?
Thanks in advance!
Here's my code:
<style type="text/css">
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
min-width: 1024px;
min-height: 768px;
}
#background-image {
position: absolute;
right: 0;
top: 0;
height: 100%;
background-image: url('image.jpg');
z-index: -1;
}
#background-gradient {
position: absolute;
right: 0;
top: 0;
z-index: 0;
height: 100%;
}
#content {
position: absolute;
left: 15%;
top: 15%;
width: 500px;
font-family: Georgia;
font-size: 16px;
}
p.dropcap:first-letter {
float: left;
font-size: 50px;
line-height: 30px;
padding-top: 2px;
padding-right: 4px;
font-family: Georgia;
}
h1 {
font-size: 55px;
}
</style>
</head>
<body>
<img id="background-image" src="image.jpg" />
<img id="background-gradient" src="gradient.png" />
<div id="content">
<h1>[TITLE]</h1>
<p class="dropcap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nibh lectus, vehicula quis elementum nec, pellentesque vitae est. In in libero pulvinar felis ultrices varius vel at augue. Suspendisse sollicitudin risus eu mauris ultrices nec auctor neque facilisis. Pellentesque commodo tellus quam. Praesent dictum sodales nisi, id tempor neque hendrerit id. Ut non mi a ante pulvinar tempor. Morbi scelerisque metus eu sem iaculis hendrerit. Integer pulvinar ipsum quis ante tincidunt gravida.</p>
<p>Nullam vel tellus sed mauris sagittis egestas at sed lacus. Pellentesque sit amet justo felis. Donec sit amet est in urna consectetur convallis vitae id justo. Sed adipiscing accumsan augue, at cursus lorem bibendum nec. Etiam diam odio, sagittis ut tempor fermentum, elementum eu erat. Vivamus pharetra, nibh vel elementum pulvinar, risus leo ornare felis, eget tincidunt velit odio non turpis. Proin semper metus eget nisi varius varius elementum nisl eleifend. Nulla facilisi. Suspendisse urna sapien, pulvinar non porttitor pellentesque, laoreet id leo. Praesent sed tortor quis tellus eleifend ultricies et eu eros. Sed massa eros, hendrerit eu facilisis sed, fermentum sit amet purus. Nulla aliquam eleifend ante, tincidunt pulvinar dolor elementum eu. Proin quis justo in arcu sollicitudin faucibus ac tincidunt ligula.</p>
</div>
</body>
Put all your HTML code inside a container div which is directly inside body. You can then move the CSS code from body to #container, like this:
#container {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
min-width: 1024px;
min-height: 768px;
}
IIRC you can't set min-width on body. You'll want to be careful though, because the earlier versions of IE don't support min-width.
Just float:right and float:left
And add a margin to give it the previous look
Demo