CODEWITHSUNDEEP
htmlcss
Jay
Jay

Reputation: 169

Keep same height of an element in all resolutions

enter image description here

I have three elements, the ones in red are divs with images as background displaying the logo of my client. The white one is a "modal" window that appears when you click an item on the menu (not displayed), this modal window uses percentages for its height and uses a fixed position to stay in the center of the page (both vertically and horizontally). The bottom of the modal as to be aligned with the two red boxes.. For my resolution it works perfect, but when on a Macbook (for example) when on fullscreen the site looks like this

enter image description here

What should I possibly do to solve this problem?

In case someone needs it, here's the CSS of the modal

   .modal{
    cursor: auto;
    position: absolute;
    z-index: 11;
    top: 45px;
    bottom: 15px;
    right: 0;
    left: 0;
    margin: auto;
    width: 940px;
    max-width: 1072px;
    height: 81%;
    padding: 40px;
    background-color: rgb(255, 255, 255);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #1C1C1C;
    text-align: left;
    overflow-y: auto;
    overflow-x: hidden;
   }

Upvotes: 0

Views: 359

Answers (1)

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18997

Remove the height property in your modal, You must just stretch your modal by using top and bottom. This will make sure the bottom of the modal is 15px from the bottom of the screen.

The bottom of the modal as to be aligned with the two red boxes..

Add the same Css rules to your red divs as well by using top and bottom

this modal window uses percentages for its height and uses a fixed position to stay in the center of the page (both vertically and horizontally)

If you say that the modal will be centered even vertically then howw do you expect the side red divs to align correctly at the bottom?

For this you must use jquery and when ever the modal is shown calculate the number of pixels from the bottom of the window to the bottom of the modal and then add this pixels as the CSS rule to both the side div's bottom property. That way you will get it aligned

Upvotes: 1

Related Questions