CSS unwanted white space at bottom
Question
Context: I am making a website where the white bit running down the middle (the 'wrapper' div) is supposed to be the background for all the content on the page, whereas the red bit (the 'body') running down the sides operates as a border. If I get rid of the 100% bottom-padding from the 'wrapper' div, the content I have on my website ends up with a background of red (background of the 'body' instead of the 'wrapper'). Nevertheless, if I have the 100% bottom-padding on the 'wrapper' div I can scroll further than the bottom of the page (all my content fits on one page at the moment, whereas I can scroll for at least two pages).
Please accordingly explain how I can keep the content's background as the wrapper div without the scrolling ability going beyond the end of the content. For example, in the code presented, there should be no ability to scroll down beyond the first screen because there is no content. The amount I can scroll on the code presented is the same as the amount I can scroll on my website.
<!doctype html>
<html>
<head>
<title>Bob</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" contents="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial scale=1" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
body {
height: 100%;
background-color:red;
margin:0 auto;
}
#wrapper {
width:600px;
height: 100%;
margin:0 auto;
background-color: white;
padding-top:8px;
padding-bottom:100%; /* removed and white space at bottom removed */
padding-left: 20px;
padding-right:20px;
}
</style>
</head>
<body>
<div id="wrapper"></div>
</body>
</html>
1 answers
solution1
0 ACCPTED 2015-07-29 00:15:03
The reason why there is scrolling is because you are setting the padding-bottom to 100%. Paddings and margins are calculated using width as a reference and not the height :
'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
Percentages: refer to width of containing block
As per why if you remove the padding-bottom:100%; , then #wrapper takes only a little bit instead of the whole screen (as you expect because you have height:100% ): the height is calculated based on the height of the containing block :
'height'
<percentage>
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block.
Right now you are setting the body to a height of 100%, but you are not setting the height of html anywhere. So the body is taking 100% of the height of the parent ( html ) that is nothing. To fix that problem, just apply the same style to body and html :
html, body {
height: 100%;
background-color:red;
margin:0 auto;
}
So to achieve what you want: add html 's height, and remove the unnecessary padding-bottom . Like this:
<!doctype html> <html> <head> <title>Bob</title> <meta charset="utf-8" /> <meta http-equiv="Content-type" contents="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial scale=1" /> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <style> html,body { height: 100%; background-color:red; margin:0 auto; } #wrapper { width:300px; height: 100%; margin:0 auto; background-color: white; padding-top:8px; /*padding-bottom:100%; /* removed and white space at bottom removed */ padding-left: 20px; padding-right:20px; box- } </style> </head> <body> <div id="wrapper"></div> </body> </html>
There is still a small scroll because #wrapper has a padding-top:8px .
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.