CODEWITHSUNDEEP
css
user656925
user656925

Reputation:

How to set minimum height for a div?

I have a page in which expanding content flows out of the holding div, the relevant CSS is below as well. Simply removing the height:510px line will allow the div to expand as needed. However, new users who have no content will not have any height and the page will look unblanced. How do I set a minimum height?

.Bb1
  {
  width:680px;
  height:510px;
  background-color:#ffffff; 
  float:left;
  border-right:3px solid #edefed;
  border-radius: 10px;
  }

Upvotes: 50

Views: 105059

Answers (6)

Bryce Figueiredo
Bryce Figueiredo

Reputation: 11

Do this:

.minHeight {
  min-height: 100px;
  height: auto;
  border: 1px solid red;
  /* IMPORTANT -- always set 'height: auto;' immediately after the min-height attribute */
}
<div class="minHeight">
  this div has a min-height attribute
</div>

Upvotes: 1

Mohit Singh
Mohit Singh

Reputation: 6187

Here is d way through which you can set min height of a div

<div id="bb1" style="min-height:200px;>
    .....
</div>

or apply

#bb1{
    min-height:200px;
}

if you have used class

like 

<div class="bb1">

in div then use 

.bb1{
    min-height:200px;
}

Upvotes: 3

Fred Ondieki
Fred Ondieki

Reputation: 2512

.comments { min-height:650px;height:auto; }


<div class="comments">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi.</div>

Upvotes: 2

Zeeshan S.
Zeeshan S.

Reputation: 2091

Incase you want to set a minimum/maximum height and minimum/maximum width to a div, CSS allows the specific feature.

To set the minimum width of the div or any other class/id/element, use;

min-width: 150px;

To set the minimum height of the div or any other class/id/element, use;

min-height: 300px;

Similarly for setting maximum width and height of a div or any other class/id/element, use;

max-width: 600px;
max-height: 600px;

Important:

For your div to expand freely in height and width after data is available for users; you will have to set the width/height to auto immediately after you have set the min-width or min-height.

min-width: 300px;
width: auto;

min-height: 100px;
height: auto;

Upvotes: 25

afkbowflexin
afkbowflexin

Reputation: 4089

CSS allows a "min-height" property. This can be used to set the minimum height of the div you're talking about.

#div-id { min-height: 100px; }

Upvotes: 54

Joseph Marikle
Joseph Marikle

Reputation: 78580

min-height:510px;

css has a min-height attribute

Upvotes: 6

Related Questions