Why certain DOCTYPE declarations cause 100%-height tables and divs to stop working?

by

  1. Because ancient browsers had odd, inconsistent behavior and browsers treat Doctypes like an intelligence test to see if the author is writing code to the standards or to what they learned from W3Schools a decade ago. If you have height: 100% and the height of the parent element is auto then 100% means auto.

  2. Generally, you don’t. It screams “layout table“. That said, set heights or minimum heights on the html and body elements. There are other techniques, but I don’t have a handy link at the moment as, oddly, I’ve never been in a position where I needed the technique.

  3. It is what browsers are supposed to do, so …

  4. Well, I am answering this question …

More Related Contents:

  1. vs
  2. Why does height 100% work when DOCTYPE is removed?
  3. What is DOCTYPE?
  4. What is quirks mode?
  5. What is quirks mode?
  6. How to tell if a browser is in “quirks” mode?
  7. What is the functionality of !DOCTYPE?
  8. Set HTML5 doctype with XSLT
  9. Any reason not to start using the HTML 5 doctype? [closed]
  10. What are the different doctypes in html and what do they mean?
  11. Uppercase or lowercase doctype?
  12. HTML5 doctype putting IE9 into quirks mode?
  13. Can comments appear before the DOCTYPE declaration?
  14. Why do I need a doctype? (What does it do) [duplicate]
  15. Hover effects not working with IE8
  16. Make headings (h1, h2, …) inherit style from body
  17. How can I “disable” zoom on a mobile web page?
  18. Line Break in HTML Select Option?
  19. How to conditionally render plain HTML elements like s?
  20. How do you convert screen coordinates to document space in a scaled SVG?
  21. Images in github pages and relative links
  22. Table headers position:sticky and border issue
  23. Chrome: Automatic shift of web elements
  24. How to fix “insecure content was loaded over HTTPS, but requested an insecure resource”
  25. Link to an element within the current page [closed]
  26. How to make image caption width to match image width?
  27. 5 images symmetrically seperated with diagonal lines
  28. Extra space under textarea, differs along browsers
  29. How to force inline divs to stay on same line?
  30. wrap anchor tag around li element

Leave a Comment