CODEWITHSUNDEEP
jqueryhtmlcss
Sency
Sency

Reputation: 2878

How to arrange div as a dock panel?

I need to know how to make the following divs aligned and resized according to my below requirement.

Area A Area A need to be stayed on top with a given height. Height of area A wont be changed.

Area B Height of Area B to be changed between 0 - min-height. When height of B is 0, Area C should be stretched to fill the area B as well.

Height of Area B also to be increased from min-height to X (X > min-height). In that situation Area C should be shrink down to give space to Area B.

Area C Area C is the filling area of this page. Need to adjust the height according to area B.

Area D Area D to be stayed at the bottom of the page and height is not to be changed.

enter image description here

I would like to know is it possible to achieve the above with css? or do I need to use JQuery. If it's possible with CSS? I would like to know how?. (I know how to do with JQuery)

*I'm using CSS3/HTML5

UPDATE I've added this JSFiddle

Also I'm not quite sure that this question is fit to SO question conditions. If not, someone pls delete this

Upvotes: 2

Views: 2249

Answers (1)

initialxy
initialxy

Reputation: 1183

Depends on how far back you need your browser support, this is a typical use case for flex box. Keep in mind that flex box is a somewhat new CSS feature. It will work fine on most evergreen browsers, but it does not work on IE 8 and 9. See here. I've written a blog post to address this particular layout. Here is a shameless self-promotion to link my blog post. One major pitfall for flex box is that there used to be an old syntax during draft process, which is completely different from the standardized syntax that most browsers support now. So be careful with that.

The way it needs to be set up is as followings:

  1. You need to create a container that contains A, B, C and D. Apply display: flex; flex-direction: column; height: 100%; to this container.

  2. A, B, D remain their own height. They actually don't need anything special. Set height and content as you'd normally want it.

  3. C is the interesting part. We want it to grow or shrink to occupy the remaining area. So you will need flex-grow: 1; flex-shrink: 1; flex-basis: 0; or in its short form flex: 1 1 0; on this element.

If you don't want to use flex box, then your safest bet is to use some JavaScript, which is how it was done way back in the days. So basically you want to add a resize event listener to window, then measure your A, B, D height and assign the remaining height to C. As an example, inspect https://jsfiddle.net/ and see its id="content" div.

Upvotes: 3

Related Questions