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>

Answer 1

The reason why there is scrolling is because you are setting the printf("%d\n",changedSignal); to 100%. Paddings and margins are calculated using width as a reference and not the padding-bottom:

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'

Percentages: refer to width of containing block

As per why if you remove the height, then padding-bottom:100%; takes only a little bit instead of the whole screen (as you expect because you have #wrapper): 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 height:100% to a height of 100%, but you are not setting the height of body anywhere. So the html is taking 100% of the height of the parent (body) that is nothing. To fix that problem, just apply the same style to html and body:

html

So to achieve what you want: add html, body { height: 100%; background-color:red; margin:0 auto; }'s height, and remove the unnecessary html. Like this:

padding-bottom

There is still a small scroll because <!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> has a #wrapper.

CSS unwanted white space at bottom

1 个答案: