DIV height like having some text inside

On one of my web pages I have a DIV element, containing string of text inside, which is of, say, 1.1em size. For example:

<div id="displaydiv">
    <b>Hello World</b>
</div>

Another page has the same DIV element, but with no text inside it at all. And that's why this DIV has the visual height of less value than the one on the first page.

<div id="displaydiv">

</div>

What is the recommended way of keeping the DIV element on the secon开发者_Go百科d page of the same height as on the first one?

Try putting an   inside.

If the page is dynamically generated and your template language supports conditionals, make sure only to show the   when there's no content.

Otherwise, if you can't show it only when empty, to avoid messing up your text alignment (thanks to @bensiu for pointing this out), stick the   at the end of the string (or beginning if the text is right-aligned). If it's center-aligned, you can put an   on both ends.

<div id="displaydiv" style="height: 1.1em">

</div>

and nbsp; also is patch solution, because you need to remember to take it off when you got text inside and not ruin you aligment

If you would like it to be the same height as on the other page, you could do this by passing a parameter to the next page, like with $_GET in PHP.

You could use jQuery to exactly measure the height of your div (with .height()). Then, when going to your new page, you should do something like: myDomain.com/newPage?height=500. Use PHP to evaluate your new height in the new page.