CSS Expression to Set Height of Div

CSS expression to set height of div

CSS expressions are not supported anywhere except IE (and are considered a bad idea even there).

However, there isn't really another way of doing what you're asking, at least not using just CSS.

The only alternative is to use Javascript, and this is what I think you're going to have to do.

In fact, IE's CSS expressions are themselves Javascript, which allows quite powerful expressions, but also has the negative effect of removing the abstraction of layout and script. This is why they're frowned on, but there are use cases such as yours where pure layout requires some form of expression.

As I say, there really isn't any answer for you right now in CSS.

There might be some hope for the future, as Google are currently experimenting with some enhancements to CSS which include variables. Article about it here: http://johanbrook.com/design/css/webkit-css-variables-mixins-nesting/. However, I'm not sure whether even this would allow the kind of expressions you're needing.

So possibly this is something that might continue needing needing Javascript into the future. It certainly does for now, either way.

set the body height width css expressions

div.tall_top does not show up because your body,html does not have a height.

Set the height to 100%

    html,body {
        margin:0;
        width:100%;
        height:100%;
        background:blue;
    }

Demo: http://jsfiddle.net/codef0rmer/3x6fh/2/

Set height of div = to height of another div through .css

I am assuming that you have used height attribute at both so i am comparing it with a height
left do it with JavaScript.

var right=document.getElementById('rightdiv').style.height;
var left=document.getElementById('leftdiv').style.height;
if(left>right)
{
    document.getElementById('rightdiv').style.height=left;
}
else
{
    document.getElementById('leftdiv').style.height=right;
}

Another idea can be found here
HTML/CSS: Making two floating divs the same height.

How to make a dynamic-height DIV

I think you are searching for FlexBox

Here we go: CSS - Equal Height Columns?

I hope I helped ya,
good luck.

CSS scale height to match width - possibly with a formfactor

For this, you will need to utilise JavaScript, or rely on the somewhat supported calc() CSS expression.

window.addEventListener("resize", function(e) {
    var mapElement = document.getElementById("map");
    mapElement.style.height = mapElement.offsetWidth * 1.72;
});

Or using CSS calc (see support here: http://caniuse.com/calc)

#map {
    width: 100%;
    height: calc(100vw * 1.72)
}

Set div height to window height

Removing the margin and padding will help, you can also add box-sizing: border-box; to account for borders and padding when setting widths. Also I'm not sure if you wanted to make your footer stick to the bottom of the page, but I did that along with the other fixes in this fiddle:

http://jsfiddle.net/ob1g0752/2/

CSS height - 100% between 2 divs

Is this what you're looking for? It's just a concept so I didn't copy your exact code.
Also, I am using a calc() method in the CSS (which is getting more and more browser support but may still be restrictive on some eg. opera-mini etc.).

Here's the fiddle: http://jsfiddle.net/thePav/A3NCW/1/

CSS

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

header {height: 150px; background-color: #800}
  header #logo {}
  header #title {}

nav {height: 30px; background-color: #080}

#content {overflow: hidden; height: calc(100% - 280px)}
  #content aside {background-color: #555; height: 100%; float: left; width: 25%}
  #content article {float: left; width: 75%}

#footer {width: 100%; height: 100px; position: absolute; bottom: 0; left: 0; background-color: #000}

HTML

<header>
  <div id="logo"></div>
  <div id="title"></div>
</header>

<nav></nav>

<div id="content">
  <aside></aside>
  <article>Some content here</article>
</div>

<div id="footer"></div>

---

Related Topics