Reputation: 1177

How to fix the height of a <div> element?

I've defined my div's height in a stylesheet:

.topbar{
  width:100%;
  height:70px;
  background-color:#475;
}

But as soon as text is entered into the div, the divs height changes.

Any ideas?

Upvotes: 45

Answers (5)

Reputation: 4492

I think height and overflow should work, like height 70px or according to need. And overflow could be auto like this:

.topbar{
  width:100%;
  height:70px;
  background-color:#475;
  overflow: auto;
}

Note: overflow with scroll will show the area of scrollbar either its visible or not I think.

Upvotes: 1

Reputation: 15835

change the div to display block

.topbar{
    display:block;
    width:100%;
    height:70px;
    background-color:#475;
    overflow:scroll;
    }

i made a jsfiddle example here please check

Upvotes: 61

Reputation: 121

You can also use min-height and max-height. It was very useful for me

Upvotes: 9

Reputation: 1464

You can try max-height: 70px; See if that works.

Upvotes: 0

Reputation: 730

If you want to keep the height of the DIV absolute, regardless of the amount of text inside use the following:

overflow: hidden;

Upvotes: 22