Two divs bottom div to height adjust with browser window [duplicate] - html

This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 8 years ago.
I have a header div and a div underneath it. I need the div underneath the header div to adjust depending on the height of the browser window size.
In CSS, when I add height:100% it creates a scroll bar at the side of the page. When I adjust the percentage of the width, spacing at the bottom of the page constantly changes because it is done with percentages.
I would like the div below the header to always adjust with the window size in height with no spacing at the bottom.
How do I do this?
Here is the Fiddle
JS Fiddle
I am not sure why but in JSFiddle the bottom div is not extending height: 100%
here is the code:
HTML
<div class = "main">
Header
</div>
<div class="left">
Bottom Div
</div>
CSS
.main {
width:100%;
height:60px;
border: solid;
}
.left {
height: 100%;
width: 300px;
border:solid;
}

try to use something like this code
html:
<div class = "main">
Header
</div>
<div class="left">
Bottom Div
</div>
css:
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
html, body {
height:100%;
}
body {
padding:60px 0 0 0; /* 60 — header height*/
margin:0;
}
.main,
.left {
border:1px solid #000;
}
.main {
width:100%;
height:60px;
margin-top: -60px; /* 60 — header height*/
}
.left {
height: 100%;
width: 300px;
}

You have a few options to achieve the layout you would like.
There are plenty of answers that address your problem from this similar question:
Make a div fill the height of the remaining screen space
However, here is my solution:
Just change your CSS a bit
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.main {
width:100%;
height:60px;
border: solid;
position: absolute;
background-color: #fff;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.left {
height: 100%;
width: 300px;
border:solid;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-top: 60px;
}
The box-sizing will prevent the padding-top and the borders from pushing the dimensions outside the browser window. The body,html height: 100%; is needed to allow other items to be 100% height (why your fiddle wouldn't work).

CSS allows you to do some basic math, so the following would help you:
Given that your header has a fixed height of 60px:
.left {
height: calc(100% - 60px);
}
Edit: you also have some extra padding and borders that you might want to take into consideration while calculating. Although I'm not a big fan of hard-coding values like that.

Try this in your style sheet
CSS
.left {
height: 100vh;
width: 100%;
border:solid;
}
Refer link
https://stackoverflow.com/questions/1622027/percentage-height-html-5-css

Related

Make div fixed height by percent [duplicate]

This question already has answers here:
How to make a div 100% height of the browser window
(40 answers)
Closed 6 years ago.
I'm creating a div with 100% width of parent and now i want it to be 10% height of parent (no mater how long the content is).
I set height: 10% but it still didn't solve my problem.
Here is my css:
body {
margin: 0px;
padding: 0px;
height: 100%;
}
.header {
display: inline-block;
background-color: #008CDA;
width: 100%;
height: 10%;
margin: 0px auto;
padding: 0px;
}
All his parent must have height: 100%.
usually it looks like this:
html,
body {
height: 100%;
background-color:grey;
}
.wrap {
height: 100%;
background-color:yellow;
}
.your_div {
height: 10%;
background-color:red;
}
<div class="wrap">
<div class="your_div"></div>
</div>
Here's a quick JSfiddle showing a parent-child layed out as you describe:
https://jsfiddle.net/k0jur7yf/
{.child {
height:10%;
width:100%;
background-color: red;
}
Could you show us a snippet of your code if this doesn't solve your problem?
Check it, first make a div and its class parent.
enter image description here
Added the following class in your Css file or in head.
.parent {height:10%; width:100%;}
In div If you use width and height style in % then it will adjust according to content but when you use style in px then it will take according to size of the width and height.
example:
<div style="width:100%;height:10%;border: 3px solid red">FOr example</div>
<div style="width:100px;height:10px:border:3px solid red">

div height to fill the whole page

I have a div and I want it to fill the whole page without any horizontal or vertical scrolling.
The html is like:
<body>
<div class="container">
</div>
</body>
and the css like:
body{
background: #222;
margin:0;
padding: 0;
}
.container{
margin:0 auto;
padding:20px;
width:800px;
background: rgba(20,20,20,0.2);
height: 100vh;
}
Normally with vh it works, but because of some padding applied on container it doesn't work. So what technique can I use to solve this problem?
The JSFiddle is here
Try using box-sizing: border-box on your .container element. Doing so will have the padding and border of an element included with width and height assignments.
.container {
box-sizing: border-box;
margin: 0 auto;
padding: 20px;
width: 800px;
background: rgba(20,20,20,0.2);
height: 100vh;
}
This has to do with the way that css adds the padding to the height to calculate the total height. There's one quick and flexible fix for all of your elements though, as explained in Paul Irish's box-sizing:
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Not Sure Will this help you but you can give it a try-
give position relative to your body and position fixed to your div.container with width 100% and height 100%.
body{
background: #222;
margin:0;
padding: 0;
position:relative;
}
.container{
position:fixed;
left:0;
top:0;
width:100%;
background: red;
height: 100%;
}
Box-sizing FTW! If you need to include the padding as part of the elements dimensions then box-sizing: border-box is your only hope.
FWIW you should be aware that Viewport Units are not fully supported so if you need something more cross-browser you can easily avoid using 100vh by using 100% instead.
E.G:
html, body {
height:100%;
min-height:100%;
}
body{
background: #222;
margin:0;
padding: 0;
}
.container{
margin:0 auto;
padding:20px;
width:800px;
background: red;
height: 100%;
box-sizing: border-box;
}
<div class="container">
</div>

Fix a container overflow issue in the footer

on this page, i'm trying to get the footer (the newsletter signup form) to fall to the bottom of the page.
but #container is somehow bigger than the body and it's messing everything up. any ideas?
here is an image of the issue. the blue is the end of the tag. http://i.imgur.com/1Ww3C6R.png
body#page {
background-color: white;
background-image: none;
width: 100%;
height: 100%;
container {
width: 100%;
margin: 0 auto;
margin-left: 0px;
}
The problem is that your div.container is set to height:100%; It would be okay if it started at the top of the page, but it is offset by your header. You need to do following:
First of all, use border-box to keep all paddings within your elements' dimensions.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Now you need to create a wrapper for your content and put your footer right below it
<div class="wrapper">
<div id="drawer">...</div>
<div class="container">...</div>
</div>
<footer>...</footer>
And css:
.wrapper{
height: 100%;
width: 100%;
padding-bottom:50px; /* reserving bottom space for footer */ }
.container{
display: inline-block; /* don't force it to 100%, just make it flexible */
float:left; /* using float will spare you from extra white-space bug occuring in pages with elements having display:inline-block property */
clear:both;
width: 100%; }
footer {
width: 100%;
float:left;
clear: both;
height:50px;
margin-top:-50px; /*moving it into the padded bottom space of wrapper*/ }
There you go. Now your footer will stick to your bottom of the page unless your content is larger than 100% of the screens height. Then it will just go down respectively.

Create three divs such that the top and bottom ones have fixed height, and the middle one has dynamic height?

I want to create three, stacked divs. The top and the bottom ones will be of fixed height, whereas the one in the middle will have a dynamic height that expands to fill the remaining space:
I've tried numerous things, such as setting the height to auto. I do have a solution, but it involves JavaScript (i.e., calculating the remaining height) but I was wondering if there was a pure CSS solution.
There's a CSS solution, but it won't work in older browsers. You need to use the calc "function" that is new to CSS, combined with height: 100%. If you've never used height: 100% before, you know that every parent element of the one you want to be 100% tall must also be set to height:100%. calc can take a percentage value and subtract pixels from it, so you just need to set it to be 100% minus however tall the top and bottom divs are.
Supported by: IE9+, Firefox 4+, Chrome 19+, Safari 6+
http://caniuse.com/calc
HTML
<div id='top'></div>
<div id='mid'></div>
<div id='bot'></div>
CSS
html, body
{
height: 100%;
}
#top, #bot
{
height: 50px;
background: red;
}
#mid
{
height: calc(100% - 100px);
}
FIDDLE: http://jsfiddle.net/jakelauer/9cYUB/
One solution is to do it with position absolute.
The downside of this approach is that if the total height of surrounding is smaller then the sum of the fixed heights the container will not be visible anymore.
Another thing to be noted is that this is probably a bad solution if you want to target mobile devices. It always depends on the exact situation if this solution is suitable.
If i remember right you will only have problems with IE 6 (on desktop) which does not support the top bottom combination for the position absolute.
HTML
<div class="header"></div>
<div class="container"></div>
<div class="footer"></div>
CSS
.header, .container, .footer{
position: absolute;
outline: 1px solid black;
}
.header {
left: 0px;
top: 0px;
right : 0px;
height: 50px;
}
.container {
left: 0px;
top: 50px;
right : 0px;
bottom: 50px;
}
.footer {
left: 0px;
bottom: 0px;
right : 0px;
height: 50px;
}
JSFiddle
You can do it with a HTML table if you need older browser support, or if you need to support IE8+ or higher you could use the CSS table layout.
Here's a jsFiddle using CSS table layout.
HTML
<div>
<div>
<div>Fixed Height</div>
</div>
<div>
<div>
<div>Variable Height</div>
</div>
</div>
<div>
<div>Fixed Height</div>
</div>
</div>
CSS
html, body {
height:100%;
width: 100%;
margin: 0px;
padding: 0px;
text-align: center;
font-size: 20pt;
font-family: Verdana;
}
body > div {
display:table;
width: 100%;
height:100%;
}
body > div > div {
display: table-row;
}
body > div > div > div {
display: table-cell;
vertical-align: middle;
}
body > div > div:nth-child(odd) {
background: grey;
color: #FFF;
height: 100px;
}
body > div > div:nth-child(even) {
height:100%;
width:100%;
}
body > div > div:nth-child(even) >div {
height:100%;
width:100%;
overflow:hidden;
}
If i understand you request you need to use wrap div: http://www.cssstickyfooter.com/using-sticky-footer-code.html

Header causing unnecessary scrollbar.

I have two main div. One is #header for menu, and one is #container for the content. I want that #container to reach the bottom of the page, whether is filled with content or not.
The problem is that adding height:100%; to body, html and #container causes the additional white space and scrollbar, which i do not want when not necessary.
HTML:
<div id='header'></div>
<div id='container'></div>
CSS:
body{
margin:0;
}
body,html {height:100%;}
#header {
height:70px;
width:100%;
background-color:red;
}
#container {
width:600px;
background-color:gray;
height:100%;
margin:0 auto;
}
JSFIDDLE: http://jsfiddle.net/ymBnw/
If you play with the padding and the margin of the #container, and position the #header absolutely, you can achieve this. I'm not taking into consideration the width, which you can set as you like.
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
#header {
position: absolute;
top: 0;
width: 100%;
height: 70px;
background-color: red;
z-index: 10;
}
#container {
width: 600px;
height: 100%;
background-color: gray;
margin: -70px auto -70px auto;
padding-top: 70px;
}
#content
{
padding-top: 70px;
}
Working example: http://jsfiddle.net/ymBnw/15/
EDIT
I've made a mistake setting the padding, which needs to be (obviously) the double of the margin (140px instead of 70px). Code fixed.
EDIT 2
Not happy again. The previous edit made the scrollbars to come back. The new solution proposed adds a new div within the #container.
Yes it would do that. Because you've given the #container 100% height, that is relative to the body. So you've given the #container the same height as the body. On top of that, you've got the #header height. So your total content is now 100% + 70px (header).
The way around this would be to set no height on the #container and have the grey background colour on the body.
You could also try:
#container {
position: relative;
z-index: 0;
top: -70px;
padding-top: 70px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box; }
#header {
position: relative;
z-index: 10; }
Or you could try:
#container {
margin-top: -70px;
padding-top: 70px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box; }
I'm not a fan of the second method. You could also do this with absolute positioning and a 70px padding on the top of the container.
You could do a position:absolute on the container div.
Code:
#container {
width:600px;
background-color:gray;
margin:auto;
bottom:0;
top:70px;
position: absolute;
left:50%;
margin-left:-300px;
}
Demo
You should use min-height: 100% instead of height: 100% to fix the background-color issue.
Here is a working solution:
CSS
#header {
height:70px;
width:100%;
background-color:red;
position: relative;
z-index: 10;
}
#container {
width:600px;
background-color:gray;
min-height: 100%;
margin:0 auto;
margin-top: -70px;
padding-top: 70px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
JSFiddle Demo #1
JSFiddle Demo #2
As an alternative solution, instead of box-sizing, you can use ::before pseudo-element as the following:
#container {
width:600px;
background-color:gray;
min-height: 100%;
margin:0 auto;
margin-top: -70px;
}
#container:before {
content: ' ';
display: block;
height: 70px;
}
JSFiddle Demo #3
You're specifying the height of the container to be 100% but you're then setting the header height to be 70px. This will ultimately lead to your full body being 100% of the browser window + 70px.
That's why you will be getting a scrollbar, because 100% + 70px results in overflow.
Edit:
As others have suggested, you could use an absolutely positioned header, with a padded container. You would obviously lose flow in this scenario though. When it comes to specifying heights in HTML, there are always trade-offs...
try this
#container {
width:100%;
background-color:gray;
height:100%;
margin:0 auto;
}
#header {
height:70px;
width:100%;
background-color:red;
position:absolute;
}
demo
Using the new flexbox layout, all you have to do is to add these CSS properties to the body.
body {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
This sets the layout to flexbox and specifies that the direct children of the body element should be aligned top to bottom. For a more thorough guide to flexbox, have a look at this tutorial. Note that the flexbox layout is currently a candidate recommendation and older browsers are not going to support it. Current Webkit based browsers still need the -webkit vendor prefix.