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).


    CSS Howto..

    show/hide div on click

    HTML CSS How to stop a table cell from expanding

    How do I remove a CSS class from a jqGrid cell?

    Images don't show up in quiz results after start over button

    How to add own icons in bootstrap navbar

    How do i include font awesome classes in my css file?

    How to glue the text of multiple divs together?

    select tag in Google Chrome shows lowercase options

    How can I implement “CSS versioning” (to solve cache issues) using JSF 2 h:outputStylesheet?

    Showing required fields by bolding

    How to scroll a div inside another div?

    How to remove top / bottom margin from isotope masonry

    Text Underline Showing Underline

    How To Turn JS Objects To HTML And Style With CSS

    How to solve this weird issue in html table and css.

    How do I fix the navigation menu in Firefox and Internet Explorer?

    How do I add the date a blog post was created in place of a bullet point under list-style-type?

    css “background-image” shows unwanted border, img “src” does not

    How to detect which part of page user is currently on, like on this page?

    How to change css class for multiple DOM elements with jQuery? [closed]

    How to set negative z-index with jQuery?

    How can I place a checkbox within a button? [closed]

    This should be simple but want to do it right. CSS display:none; how to turn back on according to @media

    How to use Css to make CellList flow Horizontally rather than Vertically? (GWT & CSS)

    How to Make DD Wrap under DT When DD Content has No Spaces

    How to increase a CSS value by the value of a JS variable?

    How to play CSS3 transitions in a loop?

    How to position a SWIPER SLIDE in the centre of the page? [closed]

    How to create grid position elements like in this image css

    Foundation 6: How to set .is-open-right translateX value with JavaScript