CODEWITHSUNDEEP
csshtml
Smokey
Smokey

Reputation: 117

Max Bottom a Popup Div

I have a popup div which appears in the center of my screen:

 ---------------------------
 |           15%           |
 |     ---------------     |
 | 15% |             | 15% |
 |     |             |     |
 |     ---------------     |
 |          15%            |
 ---------------------------

I like the left side, top side and right side. But the bottom I don't like.

What I would like it to do is:

  1. Adjust its size to the height of the content ( I think that's height: auto)
  2. Not go bigger than the 15% gap at the bottom.
  3. Bare in mind inside this div, is a child div which has overflow-y: auto, inside this are div(s) which float.

This was my code:

    #toPopup1, #toPopup2, #toPopup3 {
        font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
        border-radius: 3px 3px 3px 3px;
        color: #333333;
        display: none;
        font-size: 14px;
        margin-left: 15%;
        margin-right: 15%;
        position: fixed;
        top: 15%;
        bottom: 15%;
        width: 70%;
        z-index: 222;
        text-align: center;
    }

Then I removed the bottom:15%; with max-height:70%; however the result I got was a much smaller box (almost one line in height), please advise?

Upvotes: 3

Views: 5779

Answers (1)

web-tiki
web-tiki

Reputation: 103760

This is what I am guessing :

When you replace bottom:15% by max-height:70% the height of the div is calculated by it's content.

You say the divs inside are floated so they don't extend the height of their parent therefore the popup div has a height of 0 (+ borders, padding and margins if there are any).

Several solutions for this:

  1. float the parent div.
  2. give the popup a fixed height (for example height:70%;)
  3. use display:inline-block; instead of floats to position children

Upvotes: 1

Related Questions