How to Get the Height of an Element Using CSS Only

How can I get the height of an element using css only

Unfortunately, it is not possible to "get" the height of an element via CSS because CSS is not a language that returns any sort of data other than rules for the browser to adjust its styling.

Your resolution can be achieved with jQuery, or alternatively, you can fake it with CSS3's transform:translateY(); rule.

The CSS Route

If we assume that your target div in this instance is 200px high - this would mean that you want the div to have a margin of 190px?

This can be achieved by using the following CSS:

.dynamic-height {
    -webkit-transform: translateY(100%); //if your div is 200px, this will move it down by 200px, if it is 100px it will down by 100px etc
    transform: translateY(100%);         //if your div is 200px, this will move it down by 200px, if it is 100px it will down by 100px etc
    margin-top: -10px;
}

In this instance, it is important to remember that translateY(100%) will move the element in question downwards by a total of it's own length.

The problem with this route is that it will not push element below it out of the way, where a margin would.

The jQuery Route

If faking it isn't going to work for you, then your next best bet would be to implement a jQuery script to add the correct CSS for you.

jQuery(document).ready(function($){ //wait for the document to load
    $('.dynamic-height').each(function(){ //loop through each element with the .dynamic-height class
        $(this).css({
            'margin-top' : $(this).outerHeight() - 10 + 'px' //adjust the css rule for margin-top to equal the element height - 10px and add the measurement unit "px" for valid CSS
        });
    });
});

How can I get the height of an element using css only

Unfortunately, it is not possible to "get" the height of an element via CSS because CSS is not a language that returns any sort of data other than rules for the browser to adjust its styling.

Your resolution can be achieved with jQuery, or alternatively, you can fake it with CSS3's transform:translateY(); rule.

The CSS Route

If we assume that your target div in this instance is 200px high - this would mean that you want the div to have a margin of 190px?

This can be achieved by using the following CSS:

.dynamic-height {
    -webkit-transform: translateY(100%); //if your div is 200px, this will move it down by 200px, if it is 100px it will down by 100px etc
    transform: translateY(100%);         //if your div is 200px, this will move it down by 200px, if it is 100px it will down by 100px etc
    margin-top: -10px;
}

In this instance, it is important to remember that translateY(100%) will move the element in question downwards by a total of it's own length.

The problem with this route is that it will not push element below it out of the way, where a margin would.

The jQuery Route

If faking it isn't going to work for you, then your next best bet would be to implement a jQuery script to add the correct CSS for you.

jQuery(document).ready(function($){ //wait for the document to load
    $('.dynamic-height').each(function(){ //loop through each element with the .dynamic-height class
        $(this).css({
            'margin-top' : $(this).outerHeight() - 10 + 'px' //adjust the css rule for margin-top to equal the element height - 10px and add the measurement unit "px" for valid CSS
        });
    });
});

How to use CSS calc() with an element's height

I think you are trying to run script in a css syntax, which is NOT POSSIBLE.

calc() can do basic math operation with absolute values, it cannot find the height of an element and then perform math on it.

Set div height to height of browser using CSS ONLY

I've got this result: http://jsfiddle.net/ZC7BT/

html, body {margin: 0; padding: 0; height: 100%;}

#header {width: 100%; height: 100px; background-color: #333;}

#content {width: 100%; min-height: calc(100% - 100px); background-color: #999; overflow:auto; }

How can an html element fill out 100% of the remaining screen height, using css only?

The trick to this is specifying 100% height on the html and body elements.
Some browsers look to the parent elements (html, body) to calculate the height.

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">
        </div>
    </body>
</html>

html, body
{
    height: 100%;
}
#Header
{
    width: 960px;
    height: 150px;
}
#Content
{
    height: 100%;
    width: 960px;
}

CSS get height of screen resolution

It is not possible to get the height of the screen from CSS. However, using since CSS3 you can use media queries to control the display of the template as per the resolution.

If you want to code on the basis of height using media queries, you can define style-sheet and call it like this.

<link rel="stylesheet" media="screen and (device-height: 600px)" />

Make a div fill the height of the remaining screen space

2015 update: the flexbox approach

There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.

Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.

(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.

To check current support you can also see here:
http://caniuse.com/#feat=flexbox

Working example

With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.

html,body {  height: 100%;  margin: 0;}
.box {  display: flex;  flex-flow: column;  height: 100%;}
.box .row {  border: 1px dotted grey;}
.box .row.header {  flex: 0 1 auto;  /* The above is shorthand for:  flex-grow: 0,  flex-shrink: 1,  flex-basis: auto  */}
.box .row.content {  flex: 1 1 auto;}
.box .row.footer {  flex: 0 1 40px;}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box">  <div class="row header">    <p><b>header</b>      <br />      <br />(sized to content)</p>  </div>  <div class="row content">    <p>      <b>content</b>      (fills remaining space)    </p>  </div>  <div class="row footer">    <p><b>footer</b> (fixed height)</p>  </div></div>

.data-box-row-wrapper {
  height: calc(100vh - (24px + 24px + 24px + 24px + 125px + 38px + 24px + 24px));
}

.data-box-row-wrapper {
  height: calc(100vh - 283px);
}

body {  background-color: gray;  height: 100%;  overflow-y: hidden;}
.configuration-drawer-container {  background-color: #fff;  bottom: 0;  color: #333;  font-size: 15px;  font-weight: 300;  height: 100vh;  padding: 24px 24px 0 24px;  position: absolute;  top: 0;  z-index: 9998;}.data-box-row-wrapper {  height: calc(100vh - (24px + 24px + 24px + 24px + 125px + 38px + 24px + 24px));}.configuration-drawer-container-open {  height: 100vh;  /*overflow-y: auto;*/  visibility: visible;  width: 480px;  right: 0;}
.configuration-drawer-body {  min-height: 100%;  position: relative;}
.configuration-drawer-content {  position: relative;  height: 100%;  heigth: calc(100vh - 500px);  overflow: auto;  /* padding-bottom: 90px; */}
.title-row-wrapper {  margin-bottom: 24px;  position: relative;  width: 100%;}
.title {  color: #333;  display: inline;  font-size: 20px;  font-weight: 500;}
.data-box-row-wrapper {  overflow-y: auto;  background-color: light-gray;  border: 1px red solid;}
.configuration-drawer-data-box-row {  align-items: center;  border-bottom: 1px solid #eee;  cursor: pointer;  display: flex;  height: 48px;  text-align: left;}
.button-wrapper {  padding: 24px 0;}
.cancel {  color: #007ec2;  margin-right: 16px;  padding: 0 8px 0 8px;  border: 1px solid black;  display: inline-block;  font-size: 14px;  font-weight: 500;  height: 36px;  line-height: 36px;  min-width: 64px;  text-align: center;  vertical-align: middle;}
.save {  color: #007ec2;  margin-right: 16px;  padding: 0 8px 0 8px;  border: 1px solid black;  display: inline-block;  font-size: 14px;  font-weight: 500;  height: 36px;  line-height: 36px;  min-width: 64px;  text-align: center;  vertical-align: middle;}

<body>  <div>    <div class='configuration-drawer-container configuration-drawer-container-open'>      <div class="configuration-drawer-body">        <div class="configuration-drawer-content">          <div class="title-row-wrapper">            <div class="title">              Dashboard Configuration            </div>            <div>              <p>                Select the data tiles you want displayed on the PM Dashboard.              </p>              <p>                <span>Note:</span> Dashboard configurations are shared across all workspaces of the same type. Changes to the configuration will affect other workspaces.              </p>              <p>                Select up to five rows              </p>            </div>          </div>          <div class='data-box-row-wrapper'>            <div class="configuration-drawer-data-box-row">              Option 1            </div>            <div class="configuration-drawer-data-box-row">              Option 2            </div>            <div class="configuration-drawer-data-box-row">              Option 3            </div>            <div class="configuration-drawer-data-box-row">              Option 4            </div>            <div class="configuration-drawer-data-box-row">              Option 5            </div>            <div class="configuration-drawer-data-box-row">              Option 6            </div>            <div class="configuration-drawer-data-box-row">              Option 7            </div>            <div class="configuration-drawer-data-box-row">              Option 8            </div>            <div class="configuration-drawer-data-box-row">              Option 9            </div>            <div class="configuration-drawer-data-box-row">              Option 10            </div>            <div class="configuration-drawer-data-box-row">              Option 11            </div>            <div class="configuration-drawer-data-box-row">              Option 12            </div>            <div class="configuration-drawer-data-box-row">              Option 13            </div>            <div class="configuration-drawer-data-box-row">              Option 14            </div>            <div class="configuration-drawer-data-box-row">              Option 15            </div>            <div class="configuration-drawer-data-box-row">              Option 16            </div>            <div class="configuration-drawer-data-box-row">              Option 17            </div>            <div class="configuration-drawer-data-box-row">              Option 18            </div>            <div class="configuration-drawer-data-box-row">              Option 19            </div>            <div class="configuration-drawer-data-box-row">              Option 20            </div>          </div>          <div class="button-wrapper">            <div class="cancel">              Close            </div>            <div class="save">              Save            </div>          </div>        </div>      </div>    </div>  </div></body>

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

body {  padding: 0;  margin: 0;}.wrapper {  display: flex;  flex-direction: column;  flex-wrap: no-wrap;  align-items: center;  justify-content: center;  height: 100vh;}.wrapper > div {  width: 100%;}#c1 {  background-color: #880015;  color: #fff;  height: 60px;  margin-bottom: 10px;}#c2 {  background-color: #ff7f27;  }#c3 {  background-color: #00a2e8;  flex: 1 1 auto;  margin-bottom: 10px;  }

<div class="wrapper">  <div id="c1">height: 60px</div>  <div id="c2">height: auto (determined by content?)</div>  <div id="c3">flexible height</div></div>