CODEWITHSUNDEEP
htmlresizeheight
user2819346
user2819346

Reputation:

Automatic height with div and with other divs

For the past few weeks, I've been trying to get a dynamic result:

I have a <div class="left-panel"> that contains other <div>s, and I would like the boss div (left-panel) to be flexible. I want it to adapt it's size based on the height of the visitor's screen and re-adapt the position of the other divs.

Actually, I set it height to height: 100%; in its class, with a hidden overflow and 380px of width.

Here's an exemple image of what I want to obtain: https://i.sstatic.net/7p5Gi.gif

I tried using tables, it worked but I don't like setting an entire website with them, as they don't like very much CSS, and they are old now.

I hope someone can help me. Actually I want a very simple thing.

Edit: My html and body classes' heights are set to 100%.

Upvotes: 0

Views: 91

Answers (2)

user2819346
user2819346

Reputation:

Yep.

I confirm that for me, the media queries "almost" did the trick.

Actually, for all common resolutions (from 1680x1050 to 800x600) I set the correct size in % for the panel in the media query rule, so as soon as the client screen is let's say 1152x864, the following rule will start:

@media all and (max-height: 739px)
{
.panel
{
    height: 93.9%;
    width: 380px;
    background-color: rgba(255,255,255,0.50);
}
}

(Only for the height size of the window)

I say "almost" because the client will have to scroll the page sometimes, especially when he resizes the window manually.

I can use overflow: hidden;, but the technically the <div>s would have the same size problems :-).

Anyways, that's not too visible, I'll try other things later.

Thanks to responders though!

Upvotes: 0

Carl0s1z
Carl0s1z

Reputation: 4723

In this case you need to use %, for the body to change the height automaticly with the height of the resolution.

css:

.panel{ height:100%; width:380px;}

.logo-container { height: 25%; width:100%; } 
.body-container { height: 50%; width:100%; } 
.footer-container { height: 25%; width:100%; }

Your header and footer are the same height.. en the body has a bigger height. So you can use 25% for the header and footer en 50% for the body. (or other %, just like you want. if you want the body to be bigger, 20% 60% 20% for example)

You need to work with % if you want get your divs automaticly height..

Upvotes: 1

Related Questions