This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 5 years ago.
If you have an html document that goes like this:
<body>
<div id="top"></div>
<div id="rest"></div>
</body>
and I give the "top" div a height of 40px, is there a way to give "rest" div the rest of the height of the body in css. I know it's possible in Javascript like this
function derest(){
var bodyheight = window.getComputedStyle(document.getElementsByTagName('body')[0], null).height;
bodyheight = bodyheight.substring(0, bodyheight.length - 2);
var topheight = window.getComputedStyle(document.getElementById('top'), null).height;
topheight = topheight.substring(0, topheight.length - 2);
restheight = bodyheight - topheight;
document.getElementById("rest").style.height = restheight;
}
but this takes a lot of time, so is there a better way to do this?
You could just use pure CSS
#top{
height:40px;
background:green;
}
#rest{
height:calc(100% - 40px);
background:red;
}
body,html{
height:100%;
margin:0;
padding:0;
}
You can use flex to allow the #rest to stretch to fill the height:
html {
height: 100%;
margin:0;
padding:0;
}
body {
height: 100%;
margin:0;
padding:0;
display: flex;
flex-direction: column
}
#top {
height: 40px;
background: red;
}
#rest {
flex: 1 1 auto;
background: blue;
}
<div id="top"></div>
<div id="rest"></div>
If the container is display: flex then you can set an element to grow (with flex-grow) to fill the remaining space.
html,
body {
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
header {
background-color: #aaf;
}
main {
background-color: #afa;
flex: 1 0 auto;
}
footer {
background-color: #faa;
}
<header>
Header
</header>
<main>
Main
</main>
<footer>
Footer
</footer>
You can use:
#top {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 40px;
}
#rest {
position: fixed;
top: 40px;
left: 0px;
width: 100%;
height: calc(100% - 40px);
}
or even use padding-top 40px instead of doing fixed the #rest div
https://jsfiddle.net/lonking/L5mwd6r5/
Related
I am trying to make this effect on a project
http://www.cera-groupecera.com/en/
like this page the footer is hidden and appears as you scroll.
The page is wrapped in a page-content element and the footer is fixed to the bottom z-indexed 0
what happens is as you reach the end of the window the page -content margin rises as you scroll.
I can't really find a way to do it with j query
Here is an example,you just position it on the bottom of the page or in any other place you want it to stay,to hide it you can use z-index=-1;
//<br><br><br><br><br><br><br><br><br>
<h2><code>fixed</code></h2>
<div class="fixed"><div class="expand"></div></div>
<br><br><br><br><br><br><br><br>
CSS
#import "compass/css3";
h2 {
text-align: center;
margin-top: 48px;
}
div {
height: 200px;
width: 50%;
max-width: 600px;
margin: 32px auto;
overflow-x: hidden;
// overflow-y: scroll;
}
.fixed {
background: url('http://lorempixel.com/600/200/animals');
background-attachment: fixed;
overflow: hidden;
}
.expand {
height: 400px;
width: 100%;
}
https://jsfiddle.net/cu01m218/
I did one example for you.
$(function(){
calcFooter();
function calcFooter () {
var footer = $('.footer').height();
var mainContent = $('.main-content');
mainContent.css('margin-bottom', footer);
}
$(window).resize(calcFooter);
});
body {
margin: 0;
}
.main-content {
position: relative;
z-index: 100;
height: 100vh;
background-color: grey;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
z-index: 10;
height: 200px;
width: 100%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="wrapper">
<div class="main-content" style="margin-bottom: 200px;">
<h1>This is main content.</h1>
<p>Scroll down to reveal footer!</p>
</div>
<div class="footer">
<p>This footer.</p>
</div>
</div>
Let's say that this element which appears at the bottom is footer tag.
In this case it will be something like this:
html:
<footer></footer>
in your css:
footer {
position: fixed;
bottom: 0;
display: none;
}
Then you have to add a class which will make footer appear
.active {
display: block;
}
and your jquery will be something like this:
$(window).on('scroll', function () {
if ($(this).scrollTop() > 50) {
if (!$(footer).hasClass('active')) {
$(footer).addClass('active');
}
} else {
if ($(footer).hasClass('active')) {
$(footer).removeClass('active');
}
}
});
I have this:
I want this:
I've tried this:
html, body
{
height: 100%; //and this -> 100vh
}
but it didn't works.
Here is my code:
https://jsfiddle.net/zbjaaxe6/9/
Any solutions?
This problem is a good candidate for flexbox:
CSS
body {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100vh; // set min-height instead of height, otherwise body won't
// grow with content, if content is bigger than viewport
}
header {
height: 50px; // adjust to what you want
}
main {
flex: 1; // This will make the 'main' block to expand !
}
footer {
height: 30px; // adjust to what you want
}
HTML
<body>
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>
</body>
Result:
Fiddle
Flexbox is an IE10+ solution. Browser support in detail
"With vw/vh, we can size elements to be relative to the size of the
viewport. The vw/vh units are interesting in that 1 unit reflects 1/100th > the width of the viewport. To make an element the full width of the
viewport, for example, you'd set it to width:100vw."
-- Jonathan Snook, Sizing With CSS3's VW and VH Units
CSS:
[class*="col"] {
border: 1px solid black;
}
#menu{
display:none;
margin-top:20px;
position:absolute;
background: #fff;
z-index: 1;
}
body {
font: caption;
}
#content{
min-height: 90vh;
}
#footer{
min-height: 5vh;
}
#header{
min-height: 5vh;
}
HTML:
<div class="container">
<div class="row">
<!-- Small devices >= 768px Collapsed to start, horizontal above breakpoints -->
<div id = "header" class="col-xs-10"><span id="btnMenu" class="glyphicon glyphicon-menu-hamburger" aria-hidden="true">TITLE</div>
<div id="menu" class="col-xs-3 menu">
MENU
</div>
<div id="content" class="col-xs-10 content">
</span>CONTENT
</div>
<div class="col-xs-10" id = "footer">FOOTER</div>
</div>
</div>
Not ideal, but you could use absolute positioning:
.content {
position: absolute;
top: 20px;
bottom: 0;
}
Or, you could use viewport percentages if you are cool with supporting ie9+:
.content {
height: 100vh;
}
The styles should be on the content section, not the html/body.
EDIT: fiddle
I don't know if that's what you want but take a look :
https://jsfiddle.net/zbjaaxe6/23/
.content{
position: relative;
margin: 0;
min-height: 100vh;
}
I solved your issue using flexbox property.
.container,
.row {
display: flex;
flex-direction: column;
height: 100%;
}
#title,
#footer {
flex: none;
}
#content {
flex: 1 0 auto;
}
You can see here the solution.
I want to make the div 30% of the height of the window and then on click make it 90%. The thing is I'm only being allowed to specify widths in percentages but with height it breaks unless its px. Any thoughts? Here's a link:
http://codepen.io/chris86/pen/avvWwJ
Here's the html:
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<div id="button" class="banner" value="Switch Class"></div>
Here's the CSS:
.banner {
background-color: #c3c3c3;
height: 100px;
width: 50%;
padding: 0;
margin:0 auto;
}
.bannerbig {
background-color: #000000;
height: 200px;
width: 80%;
padding: 0;
margin:0 auto;
}
And the jQuery:
$(function() {
$('#button').click(function(){
$(".banner").switchClass("banner","bannerbig",'fast');
$(".bannerbig").switchClass("bannerbig","banner",'fast');
return false;
});
});
The reason your code breaks is because using percentage as the value for height or width is dependent on the height of the parent. As far as the DOM is concerned, the only element that has absolute height / width by default is the document object.
So, you have to specify the first DOM elements which don't have absolute height by default as a percentage of the document's height, like so:
html, body {
height: 100%;
}
Then use the appropriate percentage heights for your .banner and .bannerbig classes in CSS:
.banner {
background-color: #c3c3c3;
height: 30%;
width: 50%;
padding: 0;
margin:0 auto;
}
.bannerbig {
background-color: #000000;
height: 90%;
width: 80%;
padding: 0;
margin:0 auto;
}
Hope this helps.
i am trying to make my main content div 100% height base on browser windows size but i want it will start after header. i am getting 100% height but it is start from top but i want it will leave header are then it will 100% height. bellow is code.
mainly i want to make my contentarea div will cover 100% width and height but minus will be header height
<style>
* {
margin: 0;
padding: 0
}
body {
background-color: #F90;
}
header {
width: 100%;
float: left;
height: 100px;
background-color: #36F;
border-bottom: solid 2px #FF3300;
opacity: 0.3;
z-index: 5;
}
.contentarea {
background-color: #396;
z-index: 2;
}
</style>
<script>
jQuery(function($){
//Fix height of the slider wraper
$(window).on('resize', function(){
var h = $(this).height() - $('header').height();
if(h<=200) h=200
$('#home').height(h);
}).trigger('resize');
});
</script>
<header>
<div class="companyname"> sdf </div>
<div class="nav">
<ul>
<li>Home</li>
<li>Space Available</li>
<li>Parking / Amenities</li>
</ul>
</div>
</header>
<div class="contentarea" id="home">adasdasdasdas
adsada
dasdasdas
<div class="footer">copy right</div>
</div>
demo http://jsfiddle.net/o0Lcrv3w/
i already search some in here and got many solution, many post i tried with those but not really work any yet.
like
height: -o-calc(100% - 100px); /* opera */
height: -webkit-calc(100% - 100px); /* google, safari */
height: -moz-calc(100% - 100px); /* firefox */
Update Content area class as:
.contentarea {
background-color: #396;position:relative; z-index:2;
top:100px;bottom:0px;}
You can check it at http://jsfiddle.net/o0Lcrv3w/2/
Why not make the body 100% height and put the header inside it like this:
body {
height: 100%;
background-color: blue;
padding-top: 100px 0 0;
position: relative;
margin: 0;
}
header {
top: 0;
position: absolute;
height: 100px;
background-color: red;
width: 100%;
}
http://jsfiddle.net/91qwq6rn/
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 8 years ago.
So I have a webpage with a header, mainbody, and footer.
I want the mainbody to fill 100% of the page (fill 100% in between footer and header)
My footer is position absolute with bottom: 0. Everytime I try to set the mainbody to 100% height or change position or something it will also overflow the header. If if set the body to position absolute with top: 40 (cause my header is 40px high), it will just go 40px too far down, creating a scroll bar.
I created a simple html file since i cannot actually post the entire page/css from the actual project. With the sample code, even though the maincontent body fills the screen, it goes 40px too far down (cause of the header I assume).
html,
body {
margin: 0;
padding: 0;
}
header {
height: 40px;
width: 100%;
background-color: blue;
}
#maincontent {
background-color: green;
height: 100%;
width: 100%;
}
footer {
height: 40px;
width: 100%;
background-color: grey;
position: absolute;
bottom: 0;
}
<html>
<head>
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header></header>
<div id="maincontent">
</div>
<footer></footer>
</body>
</html>
Anyone knows the answer?
These are not necessary
remove height in %
remove jQuery
Stretch div using bottom & top :
.mainbody{
position: absolute;
top: 40px; /* Header Height */
bottom: 20px; /* Footer Height */
width: 100%;
}
check my code : http://jsfiddle.net/aslancods/mW9WF/
or check here:
body {
margin:0;
}
.header {
height: 40px;
background-color: red;
}
.mainBody {
background-color: yellow;
position: absolute;
top: 40px;
bottom: 20px;
width:100%;
}
.content {
color:#fff;
}
.footer {
height: 20px;
background-color: blue;
position: absolute;
bottom: 0;
width:100%;
}
<div class="header" >
</div>
<div class="mainBody">
<div class="content" >Hello world</div>
</div>
<div class="footer">
</div>
No Javascript, no absolute positioning and no fixed heights are required for this one.
Here's an all CSS / CSS only method which doesn't require fixed heights or absolute positioning:
/* Reset */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
/* Essentials */
.container {
display: table;
}
.content {
display: table-row;
height: 100%;
}
.content-body {
display: table-cell;
}
/* Aesthetics */
.container {
width: 100%;
height: 100%;
}
.header,
.footer {
padding: 10px 20px;
background: #f7f7f7;
}
.content-body {
padding: 20px;
background: #e7e7e7;
}
<div class="container">
<header class="header">
<p>This is the header</p>
</header>
<section class="content">
<div class="content-body">
<p>This is the content.</p>
</div>
</section>
<footer class="footer">
<p>This is the footer.</p>
</footer>
</div>
The benefit of this method is that the footer and header can grow to match their content and the body will automatically adjust itself. You can also choose to limit their height with css.
There is a CSS unit called viewport height / viewport width.
Example
.mainbody{height: 100vh;} similarly html,body{width: 100vw;}
or 90vh = 90% of the viewport height.
**IE9+ and most modern browsers.
This allows for a centered content body with min-width for my forms to not collapse funny:
html {
overflow-y: scroll;
height: 100%;
margin: 0px auto;
padding: 0;
}
body {
height: 100%;
margin: 0px auto;
max-width: 960px;
min-width: 750px;
padding: 0;
}
div#footer {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
height: 60px;
}
div#wrapper {
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
div#pageContent {
padding-bottom: 60px;
}
div#header {
width: 100%;
}
And my layout page looks like:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="pageContent"></div>
<div id="footer"></div>
</div>
</body>
</html>
Example here: http://data.nwtresearch.com/
One more note, if you want the full page background like the code you added looks like, remove the height: auto !important; from the wrapper div: http://jsfiddle.net/mdares/a8VVw/
Using top: 40px and bottom: 40px (assuming your footer is also 40px) with no defined height, you can get this to work.
.header {
width: 100%;
height: 40px;
position: absolute;
top: 0;
background-color:red;
}
.mainBody {
width: 100%;
top: 40px;
bottom: 40px;
position: absolute;
background-color: gray;
}
.footer {
width: 100%;
height: 40px;
position: absolute;
bottom: 0;
background-color: blue;
}
JSFiddle
Well, there are different implementations for different browsers.
In my mind, the simplest and most elegant solution is using CSS calc(). Unfortunately, this method is unavailable in ie8 and less, and also not available in android browsers and mobile opera. If you're using separate methods for that, however, you can try this: http://jsfiddle.net/uRskD/
The markup:
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
And the CSS:
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
}
#footer {
background: #f0f;
height: 20px;
}
#body {
background: #0f0;
min-height: calc(100% - 40px);
}
My secondary solution involves the sticky footer method and box-sizing. This basically allows for the body element to fill 100% height of its parent, and includes the padding in that 100% with box-sizing: border-box;. http://jsfiddle.net/uRskD/1/
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
#footer {
background: #f0f;
height: 20px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
#body {
background: #0f0;
min-height: 100%;
box-sizing: border-box;
padding-top: 20px;
padding-bottom: 20px;
}
My third method would be to use jQuery to set the min-height of the main content area. http://jsfiddle.net/uRskD/2/
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
}
#footer {
background: #f0f;
height: 20px;
}
#body {
background: #0f0;
}
And the JS:
$(function() {
headerHeight = $('#header').height();
footerHeight = $('#footer').height();
windowHeight = $(window).height();
$('#body').css('min-height', windowHeight - headerHeight - footerHeight);
});
Not sure exactly what your after, but I think I get it.
A header - stays at the top of the screen?
A footer - stays at the bottom of the screen?
Content area -> fits the space between the footer and the header?
You can do this by absolute positioning or with fixed positioning.
Here is an example with absolute positioning: http://jsfiddle.net/FMYXY/1/
Markup:
<div class="header">Header</div>
<div class="mainbody">Main Body</div>
<div class="footer">Footer</div>
CSS:
.header {outline:1px solid red; height: 40px; position:absolute; top:0px; width:100%;}
.mainbody {outline:1px solid green; min-height:200px; position:absolute; top:40px; width:100%; height:90%;}
.footer {outline:1px solid blue; height:20px; position:absolute; height:25px;bottom:0; width:100%; }
To make it work best, I'd suggest using % instead of pixels, as you will run into problems with different screen/device sizes.
Relative values like: height:100% will use the parent element in HTML like a reference, to use relative values in height you will need to make your html and body tags had 100% height like that:
HTML
<body>
<div class='content'></div>
</body>
CSS
html, body
{
height: 100%;
}
.content
{
background: red;
width: 100%;
height: 100%;
}
http://jsfiddle.net/u91Lav16/1/
Although this might sounds like an easy issue, but it's actually not!
I've tried many things to achieve what you're trying to do with pure CSS, and all my tries were failure. But.. there's a possible solution if you use javascript or jquery!
Assuming you have this CSS:
#myheader {
width: 100%;
}
#mybody {
width: 100%;
}
#myfooter {
width: 100%;
}
Assuming you have this HTML:
<div id="myheader">HEADER</div>
<div id="mybody">BODY</div>
<div id="myfooter">FOOTER</div>
Try this with jquery:
<script>
$(document).ready(function() {
var windowHeight = $(window).height();/* get the browser visible height on screen */
var headerHeight = $('#myheader').height();/* get the header visible height on screen */
var bodyHeight = $('#mybody').height();/* get the body visible height on screen */
var footerHeight = $('#myfooter').height();/* get the footer visible height on screen */
var newBodyHeight = windowHeight - headerHeight - footerHeight;
if(newBodyHeight > 0 && newBodyHeight > bodyHeight) {
$('#mybody').height(newBodyHeight);
}
});
</script>
Note: I'm not using absolute positioning in this solution, as it might look ugly in mobile browsers
This question is a duplicate of Make a div fill the height of the remaining screen space and the correct answer is to use the flexbox model.
All major browsers and IE11+ support Flexbox. For IE 10 or older, or Android 4.3 and older, you can use the FlexieJS shim.
Note how simple the markup and the CSS are. No table hacks or anything.
html, body {
height: 100%;
margin: 0; padding: 0; /* to avoid scrollbars */
}
#wrapper {
display: flex; /* use the flex model */
min-height: 100%;
flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}
#header {
background: yellow;
height: 100px; /* can be variable as well */
}
#body {
flex: 1;
border: 1px solid orange;
}
#footer{
background: lime;
}
<div id="wrapper">
<div id="header">Title</div>
<div id="body">Body</div>
<div id="footer">
Footer<br/>
of<br/>
variable<br/>
height<br/>
</div>
</div>
In the CSS above, the flex property shorthands the flex-grow, flex-shrink, and flex-basis properties to establish the flexibility of the flex items. Mozilla has a good introduction to the flexible boxes model.