Question

I am building a web app with jQuery Mobile.

Almost every page of the app has a single box, containing the pages’ content; for the moment, these boxes have a fixed height.

What I would like is for the boxes to rescale, such that each one is the right size for its specific content. Anyone have an idea how to do this?

My CSS currently looks like this:

.ui-grid-g-login {
    overflow: hidden;
    background-color:#FFFFFF;
    margin-right: 10px;
    margin-left: 10px;
    height: 350px;
    padding-top:20px;
    padding-bottom:20px;
    padding-right:30px;
    padding-left:30px;
    border:2px solid;
    border-radius:20px;
}

The class is assigned to a single div:

<div class="ui-grid-g-login"> content </div>

Answer 1

check this:

min-height:350px;
height:auto;