How to set content area div height with dynamic header div


Tags: html,css

Problem :

I'm working on styling a container that has header and content area, looks like below.

  widget control
------------------
| header text    |  <----- header area
------------------
| item1          |
| item2          |  <---- content area
| item3          |
|                |
------------------

I used to use position absolute with top, bottom, left, right set to 0 to fill in the space and displays the scrollbar in the content area if more items is added.

However the problem arise when header text is too long causing 2 or more lines:

 widget control

------------------
| header text    |
| long text here |  <----- header area
------------------
| item1          |
| item2          |  <---- content area
| item3          |
|                |
------------------

Now that header area get taller that my absolute positioning fails result in content area being overlapped by the header area.

I've setup simple example on fiddle. This example does not use position absolute approach so overlap is gone but then since header area size cannot be predected, I'm having touch time figuring out how to set height for the content area so that scrollbar fits in to the remaining content area. (the fiddle showing that scrollbar is cut off because content area height is set to 100% which is 100% height of control itself (i.e. 100px)

http://jsfiddle.net/Lguwvwou/13/

Note that I'm looking for solution using CSS only and setting static content area height (ex 50px) is not allowed. The reason is this is widget control and user can set the control's height but they do not have control on setting height on header or content area.

So if the user set 300px height for the control, long header text could take up 100px. Then remaining height left for the content area height is 200px.

Thanks in advance.



Solution :

The only way I know how to do this is with flexbox:

.container { 
    width: 300px;
    height: 100px;
    border: 1px solid red;
    display: flex;
    flex-direction: column;
}

.head {
    border: 1px solid blue;
    width: 100%;
    flex-shrink: 0;
}

.content {
    border: 1px solid green;
    overflow-x: hidden;
    overflow-y: scroll;
}


<div class='container'>
    <div class='head'> this is head second line asdlkfj aslkf j;alksdj f;laksdjf;laksdjf;laskdf</div>
    <div class='content'>
        <div class='item'>item1</div>
        <div class='item'>item2</div>
        <div class='item'>item3</div>
        <div class='item'>item4</div>
        <div class='item'>item5</div>
        <div class='item'>item6</div>
    </div>
</div>

Updated JSFiddle: http://jsfiddle.net/Lguwvwou/19/


    CSS Howto..

    Resize the content of a div based on how many objects are in the div

    How does Slick js carousel behave width custom css?

    CSS - how to apply styles to first elements in a static generated list

    How to implement a partially flexible screen layout with a grid framework?

    How to prevent javascript and css messing up?

    How to match a particular tag through css selectors where the class attribute contains spaces?

    How to pre-load images only using CSS (no JS)?

    How do I turn CSS into example HTML? Is there a shortcut to understanding affects of CSS on nested HTML tags?

    How do I make my footer sit at the bottom of my content?

    How: have more than one CSS sprite on a page

    How to make multiple breaks using CSS?

    How to stylize left part of input range in Metro Apps?

    How to create CSS-based (big) quotation marks?

    PHP Header Include (nav bar) not showing up [closed]

    How to set different column in table to be different width in css?

    How to make font sharp in CSS?

    How to make CSS menu bar activated only after my mouse cursor is at the menu.

    How can I have a table with a set height but auto height cells

    How to center navigation bar items CSS

    Rails 4: how to apply custom CSS to Rails form file field

    How can I give an image a black opaque overlay?

    CSS: How to center text with surrounding borders

    How do I center the body text div?

    How to locate element inside css footer

    how to set image for anchor tag in mvc through css?

    How to distinct classes in CSS using Javascript

    How to style HTML paragraphs with CSS to prevent empty lines between them?

    How to add a third level to my CSS drop down menu

    How can I use CSS transitions to animate a responsive layout's vertical orientation?

    How to change the value depend on css animation?