how to set height of a div in % , even if I use <!DOCTYPE>? [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

---

Want to improve this question? Add details and clarify the problem by editing this post.

Closed 8 years ago.

Improve this question

Is it possible to set the height of a div in percentage , even I am using the <!doctype> ?

My jsp page was already fully designed without doctype and created lots of div's dynamically. The div height was given in % only .

But now i forced to add the doctype to get work the jquery dialog box and some other jquery plugins ?

My need :

1. How should I make the div height to work in percentage % , even I added the <!DOCTYPE> ?

Hope our stack users will help me.

Answer 1

Finally I got the solution by adding the below code in my css , even I have the <doctype> in my JSP,

Solution one :

html,body {

   height: 100%;
   width: 100%;

}

Solution two :

1. set the div css to absolute

Answer 2

The use of a <!doctype> will ensure the browser knows what HTML version you are using.

Not using the <!doctype> will result in the browser using it's own defaults, resulting in a low cross browser compatibility. It could work well in IE9 and not in IE10, or well in Safari and not in Chrome etc...

It's highly recomended to always use a <!doctype>

Answer 3

The short answer is that a lot of things will break if you don't have a doctype. That includes jQueryUI. If you want to use modern browser features and javascript libraries, then you must have a valid doctype.

This really isn't an option; the doctype tells the browser to go into standards mode. Without it, it'll be in quirks mode, which has been obsolete for well over a decade. Modern Javascript libraries simply aren't designed to work in this mode.

So the question becomes how to add a doctype without breaking your page layout?

If you've got a site that was designed without a doctype, there are a number of things that will be different when you add a doctype, but the main one is the box model. This determines how element widths work in conjunction with padding, margin and border. The old Quirks mode box model is quite different to modern standards mode, and your layout will be affected.

Fortunately, you can fix this very very easily: Add the following to your CSS code:

* {box-sizing:border-box;}

This will tell your page to use the old style box model, even in standards mode. Your page layout should now look a lot better with the doctype.

There are other layout differences that may affect you, but that's the biggest one, and also the easiest to fix. Start with that, and then see what else is still wrong; it should be fairly simple to deal with the remaining issues as you see them.

I hope that helps. If you have further problems, try searching this site (and the wider internet) for more help converting from Quirks mode to Standards mode -- it's a common question, so you should find plenty of help.

Answer 4

If you give absolute positioning to the div you can give height for the Div