问题
Problem
I have a page set with a fixed header and horizontally scrolling content.
However there is something causing the bottom of my content to expand past what i perceive to be 100% of the screen, thus causing a vertical scrollbar to appear.
I've created a JsFiddle to demonstrate the problem.
http://jsfiddle.net/w7PHL/
Here is a picture to further demonstrate what i mean by unexpected gap underneath the pictureframe that is causing a vertical scroll bar.
I have set no padding or margin to the picture frame so i don't understand why my content is overflowing causing this scroll bar. There is also no content under the photoframe.
Any help on this issue would be greatly appreciated.
My Code
HTML
<body>
<div id="Header">
<div class="title">
<h1>Bass Clef Photography</h1>
</div>
<div class="tagline">Passion 4 Live Music & Passion 4 Photography</div>
<div id="tabsContainer">
<div class='tab zero'>
<ul>
<li><a href="BassClef.html">Home</a></li>
</ul>
</div>
<div class='tab one'>
<ul>
<li><a href="#">Music Gallery</a></li>
</ul>
</div>
<div class='tab two'>
<ul>
<li><a href="#">About</a></li>
</ul>
</div>
<div class='tab three'>
<ul>
<li><a href="#">Clients</a></li>
</ul>
</div>
<div class='tab four'>
<ul>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class='tab five'>
<ul>
<li><a href="members.php">Members</a></li>
</ul>
</div>
</div>
</div>
<div id="photoframeContainer">
<div id="photoframe">
<div class="pics"> <img src="uploads/picture01.jpg" alt=""></div>
<div class="pics"><img src="uploads/picture02.jpg" alt=""></div>
<div class="pics"><img src="uploads/picture03.jpg" alt=""></div>
<div class="pics"><img src="uploads/picture04.jpg" alt=""></div>
<div class="pics"><img src="uploads/picture05.jpg" alt=""></div>
<div class="pics"> <img src="uploads/picture06.jpg" alt=""></div>
<div class="pics"><img src="uploads/picture07.jpg" alt=""></div>
<div class="pics"><img src="uploads/picture08.jpg" alt=""></div>
</div>
</div>
</body>
CSS
@charset "utf-8";
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
*, :before, :after {
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*End of CSS reset*/
a:link {
color: #FFF;
text-decoration: none;
} /* unvisited link */
a:visited {
color: #FFF;
text-decoration: none;
} /* visited link */
a:hover {
color: #FFF;
text-decoration: none;
} /* mouse over link */
a:active {
color: #030303;
text-decoration: none;
font-size: 100%;
} /* selected link */
#header{
position: fixed;
top: 0px;
left: 0px;
float: left;
}
html{
height:100%;
}
body{
background-color:#424242;
height:100%;
}
.title{
font-size: 6em;
color: #FFF;
margin-top: 30px;
margin-left: 30px;
margin-bottom: 10px;
}
.tagline{
font-size: 3em;
color: #d3701e;
margin-left: 30px;
}
#tabsContainer {
position: relative;
height: 50px;
width: 450px;
margin-left: auto;
margin-right: auto;
}
#tabsContainer {
height: 50px;
width: auto;
padding-left: 30px;
font-size: 24px;
}
#tabsContainer ul {
list-style: none;
margin: 0;
padding: 0;
font-size:24px;
}
#tabsContainer ul li {
display: inline;
margin: 0px;
display: block;
height: 50px;
text-align: center;
line-height: 30px;
font-size:24px;
}
#tabsContainer ul li a {
height: 33px;
display: block;
float: left;
padding: 17px 15px 0 15px;
font: bold 12px Arial;
color: #FFF;
text-decoration: none;
font-size:24px;
}
#tabsContainer ul li a:hover {
color: #d3701e;
height: 50px;
font-size: 24px;
}
#tabsContainer ul li#active a {
color: #d3701e;
background: url(images/navigation-hover.png) repeat-x left top;
font-size:24px;
}
.tab{
float: left;
font-size:24px;
}
.tab.one
{
width:190px;
font-size:24px;
}
/*#photoframe
{
top: 300px;
position: fixed;
padding: 0 25px 0 25px;
overflow: none;
white-space: nowrap;
left: 0px;
height: 100%;
width: 100%;
}*/
#photoframeContainer{
padding-top: 10px;;
overflow-x: auto;
overflow-y: hidden;
min-height: 100%;
}
#photoframe {
white-space: nowrap;
}
#photoframe .pics {
display: inline-block;
}
#photoframe .pics img {
padding: 0;
margin: 0;
z-index: 1;
display: inline-block;
height:500px;
padding-left:10px;
padding-right:10px;
}
.upload
{
float: left;
vertical-align: baseline;
}
回答1:
The following elements have height:100%:
- html
- body
- photoFrameContainer
Margins and padding are not calculated within the height, so 100% + margin + padding is what you see. Here is what the spec says:
For absolutely positioned elements, the used values of the vertical dimensions must satisfy this constraint:
'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
Since the calculated height is greater than the height of the viewport, and the default stylesheet defines overflow:visible as the default for all elements, the scrollbar is shown.
References
Visual Formatting Model Details: Absolutely Positioned, non-replaced elements
CSS 2.1: Overflow
CSS Dimensions
来源：https://stackoverflow.com/questions/23495977/unexpected-padding-or-white-space-at-bottom-of-page-causing-unnecessary-vertical