Dynamic DIV height without parent container overflow

Question

I want to have a dynamic div height inside another shell, which always fills the parent container and automatically reduces its size with the vertical scrollbar displayed to scroll the user if overflow occurs.

The illustration below is what I expect:

Currently, the content pane simply overflows the shell and pushes the footer out of sight.

The riddle is here http://jsfiddle.net/WWcAz/1/

#wrapper{ padding: 10px; vertical-align: middle; background-color: cyan; min-height: 100px; height: 300px; max-height: 300px; } #dynamic{ background-color: green; overflow: auto; overflow-x: hidden; min-height: 40px; } 

Is this possible with pure CSS?

(** Update :) I don’t need a scrollbar with my wrapper, and the wrapper should be the size of the fix, I hope this is clear - thanks :)

Answer 1

As far as I know, this can only be done using Flexbox.

Fiddle

(Relevant) CSS

 #wrapper{ padding: 10px; vertical-align: middle; background-color: cyan; min-height: 100px; max-height: 300px; -ms-box-orient: vertical; display: -ms-flex; height: 100%; display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-flex; display: -ms-flexbox; /* MID: IE 10 */ display: -webkit-flex; /* NEW, Chrome 21+ */ display: flex; /* NEW: Opera 12.1, Firefox 22+ */ -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -moz-box-sizing: border-box; box-sizing: border-box; } #content { -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; overflow: auto; height:0; min-height: 0; } 

A few points:

0) ( EDIT:) . In order to get scrolling only over the (green) content, I had to slightly change the layout to put the yellow area in the title.

1) I only apply flex-grow: 1 (i.e. flex: 1 1 auto) to scrollable content; other elements may have a fixed or dynamic height.

2) There is a hack (?), Which I saw here , that placing the height: 0 on the elements of the container causes the bar to scroll vertically. (Here I used both height and minimum height, because this hack only worked in firefox with a minimum height)

3) For this to work in Firefox <22 - you need to enable the flexbox execution flag like this

4) Flexbox support is surprisingly good in modern browsers (see here ), but you need to add some CSS code for the browser to work (see the script above)

Answer 2

I believe that this is the structure that you are after. Of course, you will have to change it to suit your specific size requirements.

Fiddle

HTML

 <div id="wrapper"> <div id="header">Header</div> <div id="content"></div> <div id="footer">Footer</div> </div> 

CSS

 #wrapper{ position: relative; background: #f5f5f5; height: 400px; margin: 0; padding: 10px; } #header, #footer{ position: absolute; background: #000; color: #fff; height: 20px; width: 100%; margin-left: -10px; } #header{ top: 0; } #footer{ bottom: 0; } #content{ position: absolute; top: 20px; bottom: 20px; overflow: auto; width: 100%; margin-left: -10px; } 

Answer 3

Try this style. This will give a result like your second image. I am not sure about your first result, fully executing it in CSS.

 body,html { height: 97%; } #wrapper { padding: 1%; vertical-align: middle; background-color: cyan; height: 100%; } #expand{ background-color: yellow; } #dynamic{ background-color: green; position : relative; height : 50%; overflow-y: scroll; overflow-x:hidden; } #header,#footer { background-color: purple; height: 7%; } #content { height: 86%; } 

Answer 4

I do not see your image (blocked by a firewall), however, to do what you described, you can do the following:

 #dynamic{ position: absolute; width: 100%; top: 0; bottom: 0; overflow: auto; } #wrapper { position: relative; } 

By setting position: absolute and setting the top and bottom properties to 0, you force it to raise the height of offsetParent . You also tell him that if the size is smaller than the content, then make it overflow scrollable.

Obviously, this leads to its own problems, since the element must be absolutely positioned and removed from the usual flow of documents. You will probably need to do some restructuring.