How to make a div reach the bottom of the page in HTML
Question
I can't get my div to reach the bottom of the page. Here is my code:
<!DOCTYPE html> <html> <style> #Welcome { background-color: pink; height: 100%; } </style> <div id="Welcome"> Welcome! </div> </html>
I did not work when I put in height: 100%; I also tried min-height: 100%; but neither one works. What am I doing wrong?
2 answers
solution1
1 ACCPTED 2018-06-02 15:14:14
height: 100% property makes the element to take 100% height of parent element. The parent element should have height defined, else the height will be adjusted based on its children.
In your case height of html and body should be set to 100% .
<!DOCTYPE html> <html> <style> html, body { height: 100%; } #Welcome { background-color: pink; height: 100%; } </style> <div id="Welcome"> Welcome! </div> </html>
solution2
0 2018-06-02 16:44:49
One way is to simply change % to vh ,
<!DOCTYPE html> <html> <style> #Welcome { background-color: pink; height: 100vh; } </style> <body> <div id="Welcome"> Welcome! </div> </body> </html>
Also, why your code didnt work was because you have tried height:100% but the parent container still wasnt in full height, making the parent containers too at 100% will make it take up full height.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.