How do I get an element to always occupy a specific percentage of its parent element, even when the browser is resized?

Tags: jquery,html,css,html5,jquery-ui

Problem :

Note: I know that elem {height: 90%} exists.

What I need:

• an element to occupy x% width and y% height of its parent element, regardless of size
• the parent has margins and padding

My problem:

• it looks great at first, but when I make the browser window smaller, content starts spilling out of the bottom of the parent. This is super depressing. It looks to me like the size of the #load div is 90% of its parent (as requested; see stylesheet below); unfortunately this 90% doesn't take margins or padding into account. What is going on here? If the answer is just that percentages don't work "like that" when there are margins/padding, how do I specify that an element occupies x percent of its parent after deducting margins/padding? Also, note that jQueryui uses css that I would like to avoid touching, if possible.

My markup:

<div id="tabscontainer">
      <div id="tabs">
        <ul>
            <li><a href="#create">Create</a></li>
            <li><a href="#load">Load</a></li>
        </ul>
 <div id="create">
something or other
 </div>
 <div id="load">
... there is a lot of content here ...
 </div>
</div>

<script>

$(document).ready(function() {$("#tabs").tabs();});

</script>

My styling:

html, body {
    height: 100%;
}

#tabscontainer {
    height: 95%;
}

#tabs {
    height: 100%;
}

#tabs > div {
    height: 90%;
    overflow: auto;
}

Also, the default jQuery styling of tabs is in effect (with no changes from me).

---

Solution :

I think the problem is that the styles from jQuery UI are in PX while the rest are in %. You usually run into problems when you combine that. Try setting margins, paddings and borders in % (I know you don't want to mess with jQuery CSS, but you can override it with !important or similar).