White space at bottom of HTML
Question
When I open my webpage (code and link below) there is a gap at the bottom of the page making the page slightly more than 100% height which causes the scroll bar to appear needlessly.
I know this has been asked before and I have looked through several answers to this question and I can't get any of them to work (don't rule out me doing it wrong though). I can't figure out whether the gap is being caused by Javascript, CSS or the HTML. I have been fiddling with the CSS for a while and nothing seems to be making a difference so If you spot something I've missed please tell me.
Interestingly the scroll bar disappears while the JavaScript to open and close the curtains is running but instantly reappears after it finishes.
Here is the HTML and Javascript.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>
The Randoms
</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js">
</script>
<script src="jquery.easing.1.3.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$curtainopen = false;
$(".rope").click(function(){
$(this).blur();
if ($curtainopen == false){
$(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".leftcurtain").stop().animate({width:'60px'}, 2000 );
$(".rightcurtain").stop().animate({width:'60px'},2000 );
$curtainopen = true;
}else{
$(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".leftcurtain").stop().animate({width:'50%'}, 2000 );
$(".rightcurtain").stop().animate({width:'51%'}, 2000 );
$curtainopen = false;
}
return false;
});
});
</script>
<script type="text/javascript">
$(window).load(function() {
$('.fade').fadeIn(3000, function() {
// Animation complete
});
});
</script>
<script type="text/javascript">
$(window).load(function() {
setTimeout(function() {
$('.rope').fadeIn(3000, function() {
// Animation complete
});
}, 3000);
});
</script>
<script type="text/javascript">
function runMyFunction() {
$(".fade").fadeOut('slow', function() {
// Animation complete.
});
return true;
}
</script>
</head>
<body>
<div class="leftcurtain">
<img src="images/frontcurtain.jpg" alt="Image">
</div>
<div class="rightcurtain">
<img src="images/frontcurtain.jpg" alt="Image">
</div><a class="rope" href="#" onclick="return runMyFunction();"><img src="images/rope.png"
alt="Image"></a>
<div class="fade" id="fade">
<h1>
Ever wanted to know what's behind the curtain?
</h1>
</div>
<div id="content">
<p>
Place Holder
</p>
</div>
</body>
</html>
Here is the CSS
html
{
height=100%;
}
*
{
margin:0;
padding:0;
border:0;
margin-top:0;
margin-bottom:0;
}
body
{
text-align: center;
background-color: #C20D19;
max-height:100%;
}
h1
{
margin-top: 0;
}
p,li
{
font-family: Arial, Helvetica,sans-serif;
margin: 12px;
color:#ffffff
}
div
{
margin: 0;
max-height: 100%;
}
div#content
{
padding: 0;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
max-width: 80%;
width: 1000px;
height: 100%;
font-family: Arial, Helvetica,sans-serif;
background-color: #000000;
}
img
{
border: none;
}
.leftcurtain
{
width: 50%;
height: 100%;
top: 0px;
left: 0px;
position: absolute;
z-index: 2;
}
.rightcurtain
{
width: 51%;
height: 100%;
right: 0px;
top: 0px;
position: absolute;
z-index: 3;
}
.rightcurtain img, .leftcurtain img
{
width: 100%;
height: 100%;
}
.rope
{
position: absolute;
top: -40px;
left: 80%;
z-index: 4;
display:none;
}
.fade
{
z-index: 5;
position: absolute;
display: none;
}
#fade
{
top: 80px;
left: 50%;
width: 250px;
height: 0 auto;
color: #ffffff;
font-family: Arial, Helvetica,sans-serif;
}
If you think the referenced JavaScript to control the curtains movement is import you can find it at http://www.osholt.co.uk/concepts/jquery.easing.1.3.js .
To see the issue in action go to http://www.osholt.co.uk/concepts
This is my first project involving JavaScript so if you see anything wrong with what I've done please alert me to that as well.
Thanks in advance.
3 answers
solution1
4 2011-06-14 17:23:42
Add overflow: hidden on body .
body
{
text-align: center;
background-color: #C20D19;
max-height:100%;
overflow: hidden;
}
Edit: Another solution would be to add display: block; to the curtain images. This seems to be the real culprit. It fixes IE 7 as well:
.rightcurtain img, .leftcurtain img {
display: block;
height: 100%;
width: 100%;
}
solution2
4 2011-06-14 17:25:52
html
{
height=100%;
}
Should Probably be
html
{
height:100%;
}
solution3
0 2011-06-14 19:25:45
It is the height of your "curtain" containers that is causing the scrollbars to pop up. It seems that you are forgetting that the "curtains" would push the "border" of the container object (namely the div outside it and the body outside that) when their size exceeds the height of the screen. The problem with max-height is that its interpretation is pretty sketchy at best.
I'd suggest you switch to 99% instead of 100% for the curtain values. That makes your scrollbar go away.
Of course, you could use the overflow attribute as well; however, if something exceeds the width of your display it will not be visible (since "overflow" affects both X and Y). There is also overflow-y, which would affect only the y axis; however, not all browsers fully support that.
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.