“Height=100%” is not working in html when using <!DOCTYPE>?

前端未结

关注

 3  1020

慢半拍i

When I use HTML without DOCTYPE, my HTML page Height=100% is working.

But when I use DOCTYPE, height is not working correctly.

相关标签:

3条回答

旧时难觅i

2020-11-30 09:08

When you state 'height=100%' you have to think "100% of what?". It's the parent of that table element which is the body. But how tall is the body?

To do what you want, add this in the CSS: html,body{height:100%}

0 讨论(0)
发布评论:

提交评论
- 加载中...
爱一瞬间的悲伤

2020-11-30 09:12
Like everyone said the main part of the solution is to put

html, body{'height=100%'}

But its also really important to set every single ancestor's height to be 100%. for example if your code is as follows
```
<body>
    <div id="firstdiv">
         <div id="scnddiv">
               lets say this is the div you want to make 100%
         </div>
    </div>
</body>
```
if #scnddiv is the div you want to make 100%, not only you have to make html and body 100% but also #firstdiv. So it will look something like this
```
html, body, #firstdiv {height:100%}
```
then you can make anything in that div to be 100%.

I hope this helps.
0 讨论(0)
发布评论:

提交评论
- 加载中...
一向

2020-11-30 09:14
Adding a DOCTYPE switches you from quirks mode to standards mode. In standards mode, the html and body elements do not default to 100% of the size of the viewport (browser window); instead, they are only as large as they need to be to contain their children. The table height of 100% means 100% of the containing element, but that's only as large as it needs to be to contain the contents of the table. Quirks mode is an emulation of the behavior of older browsers, in which the html and body elements filled the viewport.

To fix the problem, you just need to add this to your document:
```
<style>
  html, body { height: 100% }
</style>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...