Setting a Div's Height in HTML with CSS

How to set div's height in css and html

To write inline styling use:

<div style="height: 100px;">
asdfashdjkfhaskjdf
</div>

Inline styling serves a purpose however, it is not recommended in most situations.

The more "proper" solution, would be to make a separate CSS sheet, include it in your HTML document, and then use either an ID or a class to reference your div.

if you have the file structure:

index.html
>>/css/
>>/css/styles.css

Then in your HTML document between <head> and </head> write:

<link href="css/styles.css" rel="stylesheet" />

Then, change your div structure to be:

<div id="someidname" class="someclassname">
    asdfashdjkfhaskjdf
</div>

In css, you can reference your div from the ID or the CLASS.

To do so write:

.someclassname { height: 100px; }

#someidname { height: 100px; }

Note that if you do both, the one that comes further down the file structure will be the one that actually works.

For example... If you have:

.someclassname { height: 100px; }

.someclassname { height: 150px; }

Then in this situation the height will be 150px.

EDIT:

To answer your secondary question from your edit, probably need overflow: hidden; or overflow: visible; . You could also do this:

<div class="span12">
    <div style="height:100px;">
        asdfashdjkfhaskjdf
    </div>
</div>

Setting a div's height in HTML with CSS

Ahem...

The short answer to your question is that you must set the height of 100% to the body and html tag, then set the height to 100% on each div element you want to make 100% the height of the page.

Actually, 100% height will not work in most design situations - this may be short but it is not a good answer. Google "any column longest" layouts. The best way is to put the left and right cols inside a wrapper div, float the left and right cols and then float the wrapper - this makes it stretch to the height of the inner containers - then set background image on the outer wrapper. But watch for any horizontal margins on the floated elements in case you get the IE "double margin float bug".

How to set the height of divs in basic layout

You can add a position: absolute to the parent div and subsequently stretch it to achieve full width and height. Note that the width: 100% declarations are important to enforce block-level formatting context.

<div style="position:absolute; overflow: hidden; top:0; left:0; right: 0; bottom: 0;">
  <div style="background-color: blue; height: 70%; width: 100%;">Top</div>
  <div style="background-color: red; height: 30%; width: 100%;">bottom</div>
</div>

Here's the fiddle

Just note that this will remove this div from 'normal flow', and that sibling elements will be obscured/obscuring. The CSS 2.1 spec provides this advice:

...the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.

Set div height to fit to the browser using CSS

Setting window full height for empty divs

1st solution with absolute positioning - FIDDLE

.div1 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25%;
}
.div2 {
  position: absolute;
  top: 0;
  left: 25%;
  bottom: 0;
  width: 75%;
}

2nd solution with static (also can be used a relative) positioning & jQuery - FIDDLE

.div1 {
  float: left;
  width: 25%;
}
.div2 {
  float: left;
  width: 75%;
}

$(function(){
  $('.div1, .div2').css({ height: $(window).innerHeight() });
  $(window).resize(function(){
    $('.div1, .div2').css({ height: $(window).innerHeight() });
  });
});

Setting div's height according to browser height

You should be using vh for height. It also has responsive design. 1hv = 1% of the viewport height (broswer), meaning that 100vh will be the value you need ;)

Edit: If you're trying to do the same for width, you need to use vw instead of vh because vh refers to the height and vw refers to the width ;)

adjust a div's height based on another div by CSS

as I told above, I wanted sidebar to be scrolled when the sidebar is longer than content. so I solved it by pure CSS:

my new HTML code:

<section class="container">
    <div class="sidebar">
        <div class="sidebardiv">
            <ul>
                <li><li>
                <li><li>
                <li><li>
                <li><li>
                <li><li>
            </ul>
        </div>
    </div>
    <div class="content"></div>
</section>

my new CSS code:

.container {
    display: flex;
}
.sidebar , .content {
    flex: 1 0 auto;
}
.sidebardiv {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    overflow: auto;
    padding: 0 8px 0 8px;
}

How to set the height of a div to match the remaining height

Here is another Pure CSS solution, that works without specifying any height whatsoever.
[this solution deserves its own answer]

Here's a Working Fiddle

Why is it good?

because maybe your header will change one day affecting his height, or your menu will grow, or your footer will need an extra line causing his height to grow..

all of that changes will cause you to re-fix another height for the changing element, and recalculate the right height for the content.

my solution makes it easier, because all the parts are fluid.
let them take the space they need in the page, and the content will always take the remaining height.

Browser support:

Tested On: IE10, Firefox, Chrome, Safari, Opera. (not working on older IE, not tested on other browsers)

any Downsides?

yes. unfortunately, because of the way that this trick works, you will need to change the arrangement of your HTML.

I found a Pure CSS way to create a div container, with two child div's.
the first will take the exact height he needs, and the second will take the remaining of the container height's.

but what if I want the opposite scenario,
What if I want second div to take his exact space and the first div to take the container's remaining height?

I didn't find an easy way to do that with Pure CSS.
thats why, I actually reverse the order of the divs, the first holds the second data, and the second holds the first data, now we let the first div to take his exact height, and the second stretch to the end of the container as we want, and then I rotate their view via CSS to make them appear in order.

For your case it means that you will have to create the HTML in that order.

Header
Menu
Footer
Content

The Solution:

HTML:

<div class="Container">
    <div class="Header">I'm in the header</div>
    <div class="Menu">I'm in the menu</div>
    <div class="HeightTaker">
        <div class="Wrapper Container Inverse">
            <div>
                <div class="Footer">I'm in the footer</div>
            </div>
            <div class="HeightTaker">
                <div class="Wrapper">
                    <div class="Content">
                        I'm in the content
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

*
{
    margin: 0;
    padding: 0;
}
html, body, .Container
{
    height: 100%;
}
    .Container:before
    {
        content: '';
        height: 100%;
        float: left;
    }
.HeightTaker
{
    position: relative;
    z-index: 1;
}
    .HeightTaker:after
    {
        content: '';
        clear: both;
        display: block;
    }
.Wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
}
.Inverse, .Inverse > *
{
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.Header
{
    /*for demonstration only*/
    background-color: #bf5b5b;
}
.Menu
{
    /*for demonstration only*/
    background-color: #6ea364;
}
.Content
{
    height: 100%;
    overflow: auto;
    /*for demonstration only*/
    background-color: #90adc1;
}
.Footer
{
    /*for demonstration only*/
    background-color: #b5a8b7;
}

Set div height to fit container with overflow

Use CSS table-layout:

.two-column {
    display: table-cell;
    width: 50%;
}
.right-column {
    background-color: gray;
}

Example jsFiddle: http://jsfiddle.net/5Lvp3n5h/1/

.modal {    display: table; }
.two-column {    display: table-cell;    width: 50%;}
.left-column {    height: 5000px; /* This is actually dynamic in my case */}
.right-column {    background-color: gray;}

<div class="modal">    <div class="two-column left-column">Stuff</div>    <div class="two-column right-column">I wish this div would keep a gray background color even after scrolling.</div></div>

CSS - how to set the height of a div when a nested div's height is set to fit-content?

When parent div(#outerDiv) has the relative position and child(#div1) has an absolute position then parent div can not resize itself to the child's size. So I changed some attributes and commented unnecessary parts. Also, I added contenteditable="true" style="outline: none;" to div1 and now it is easy to change size of the text and see the result:

#outerDiv {
  position: relative;
  background: darkblue;
  /* height: 400px; */
  width: 400px;
  padding-top: 100px;
  padding-bottom: 106px; /*height of boxes + 6px border top and bottom*/
}

#box1 {
  position: absolute;
  background: orange;
  height: 100px;
  width: 100px;
  border: 3px darkblue solid;
  bottom: 0;
  left: 0;
}

#box2 {
  position: absolute;
  background: orange;
  height: 100px;
  width: 100px;
  border: 3px darkblue solid;
  bottom: 0;
  right: 0;
}

#div1 {
  /* position: absolute; */
  margin: 0 auto;
  background: white;
  /* height: fit-content; */
  width: 250px;
  /* left: 75px;
  top: 100px; */
}

<div id="outerDiv">
  <div id="box1">
  </div>
  <div id="box2">
  </div>
  <div id="div1" contenteditable="true" style="outline: none;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel fringilla est ullamcorper eget nulla. Pharetra vel turpis nunc eget lorem dolor. At consectetur lorem donec massa sapien. Massa
    tempor nec feugiat nisl pretium fusce id velit. Orci ac auctor augue mauris augue neque gravida. Molestie a iaculis at erat pellentesque. Nisl vel pretium lectus quam id leo in. Quisque non tellus orci ac auctor augue mauris augue neque. Vestibulum
    sed arcu non odio euismod.
  </div>
</div>