Home/ Questions/Q 6810439
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T20:12:21+00:00

Lets say .container{ padding:25px; height:100%; } So here .container would be 100%+25px height. A

  • 0

Lets say

.container{
   padding:25px;
   height:100%;
}

So here .container would be 100%+25px height.

A problem would be when, for example:

.container{
       padding:25px;
       height:100%;
       float:left;
    }
 .noPadding{ padding:0px;}


<body>
    <div class="container">blah</div>
    <div class="container noPadding">bleh</div>
</body>

They both have height 100% but one will be bigger.

So how can I make them the same size and keep padding? I don’t know how much would be 100%-25*2px… it depends on screen resolution.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, you can use the pretty JS library jQuery to achieve that!
    look:

    DEMO

    $('.noPadding').height( $('.container:eq(0)').outerHeight(true) );

    To calculate the first .conteiner height (with paddings) you can use: .outerHeight(true)
    and than just pass it to the .height() of your .noPadding element!

    More info:

    jQuery API .outerHeight()
    jQuery API .height()

    • 0