Question

当我打开页面时，页面底部有一些空白区域，我无法弄清楚它为什么存在。我相信它与jQuery有关，但我真的不确定。我该如何摆脱这个空间？

Here's what it looks like.看看右边有一个滚动条？当我向下滚动时，您可以看到here所示的空白区域。

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Me</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="css/normalize.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="text/css" href="images/favicon.png" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/myscript.js"></script>

</head>

<body>
<div class="main_front">
<nav id="nav_container">

<div class="logo"><img src="images/logo.png" height="65px" /></div><!--end of logo-->
<ul class="right_links">
<li class="nav_li" id="nav_li_goals"><a href="#">Goals</a></li>
<li class="nav_li" id="nav_li_site"><a href="#">School Site</li></a>
<li class="nav_li" id="nav_li_web"><a href="#">Web Design</li></a>
<li class="nav_li" id="nav_li_summer"><a href="#">Summer</li></a>
<li class="nav_li" id="nav_li_schedule"><a href="#">Schedule</li></a>
<li class="nav_li" id="nav_li_home"><a href="#">Home</li></a>
</ul><!--end of right_links-->

</nav><!--end of nav_container-->
<div class="all_home">

<div class="home">
<div class="home_content">
Total Recall
</div><!--end of home_content-->

<div class="home_content2">
<p>A webpage about me.</p>
</div><!--end of home_content2-->
</div><!--end of home-->

<div class="home_imgs">
<div class="tech_cluster">
<img src="images/techcluster.png" />
</div><!--end of tech_cluster-->
</div><!--end of home_imgs-->

</div><!--end of all_home-->


<div class="schedule">
<div id="schedule_table">
<table>
<th colspan="3">Schedule</th>
<tr id="tr1" class="tr_odd">
<td id="period1td">Period 1</td>
<td>Physics</td>
<td id="kevintd">Kevin Keefe</td>
</tr>
<tr id="tr2" class="tr_even">
<td>Period 2</td>
<td>Digital Design 2</td>
<td>Eric Riemenschneider</td>
</tr>
<tr id="tr3" class="tr_odd">
<td>Period 3</td>
<td>English 3 Honors</td>
<td>Janice Anderson</td>
</tr>
<tr id="tr4" class="tr_even">
<td>Period 4</td>
<td>Chorus</td>
<td>Matthew Koller</td>
</tr>
<tr id="tr5" class="tr_odd">
<td>Period 5</td>
<td>Web Design 2</td>
<td>Robert Daly</td>
</tr>
<tr id="tr6" class="tr_even">
<td>Period 6</td>
<td>Algebra 2 Honors</td>
<td>Lynne Burrier</td>
</tr>
<tr id="tr7" class="tr_odd">
<td>Period 7</td>
<td>US History Honors</td>
<td>Mary Grace</td>
</tr>
<tr id="tr8" class="tr_even">
<td id="period8td">Period 8</td>
<td>Multimedia Foundations</td>
<td>Robert Daly</td>
</tr>
</td>
</table>
</div><!--end of schedule_table-->
</div><!--end of schedule-->

</div><!--end of main_front-->



<div class="footer">
<div class="contact">
<div class="phonenumber">
<img src="images/23194.png" width="20" height="20" /> XXX-XXX-XXXX
</div><!--end of phonenumber-->
<div class="email">
<img src="images/icon-ios7-email-outline-128.png" width="23" height="23" class="mail_icon"/>
<a href="mailto:adesign@email.com">adesign@email.com</a>
</div><!--end of email-->
</div><!--end of contact-->
</div><!--end of footer-->
</body>
</html>

CSS代码

    @charset "utf-8";
/* CSS Document */

body, html { 
    overflow-x: hidden; 
    overflow-y: auto;
}

html {
    cursor:default;
    scroll:none;
}

body {
    margin:0;
    margin:none;    
}

.logo {
    float:left;
    margin-top:5px; 
}

.main_front {
    width:100%;
    height:90vh;
    background-color:#A9D2F1;   
}

/* .nav_links {
    width:1600px;
    height:100px;
    margin:auto;
    color:white;    
} */

.nav_li {
    float:right;
    margin-right:3%;
}




#nav_container {
    width:100%;
    height:79px;    
    /*background-color:#82B5E8;*/
    background-image:url(../images/nav_container_bg.png);
}

.right_links {
    width:70%;
    float:right;
    list-style-type:none;
    text-align:center;


}

.right_links a {
    display:inline-block;
    list-style-type:none;
    text-decoration:none;
    color:white;
    font-size:1.2em;
    margin-top:0px;
    height:30px;
    padding-top:15px;
    font-family: 'Open Sans', Open Sans, Verdana, sans-serif, serif;
}

.right_links li {
    width:130px;
    height:40px;    
    line-height:10px;
    text-align:center;  
    border-radius:12px;
    transition:all 0.5s;
    -moz-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -ms-transition:all 0.5s;
}

.right_links li a {
    display:block;
    width:130px;
    height:40px;
}



.right_links li:hover {
    background-color:rgba(22,96,131,0.5);

}   

.phonenumber {
    font-size:20px;
    text-align:center;  
    margin-right:25px;
}

.phonenumber img {
    margin-top:4px; 
}

.contact {
    width:500px;
    height:9vh;
    background-color:#80b1e1;   
    border-radius:5px;
    margin:auto;
    position:relative;
}

.email {
    font-size:20px;
    text-align:center;
    margin-top:5px;
}

.mail_icon {
    position:absolute;
    margin-left:-25px;
    margin-top:1px;
}

.email a {
    color:#000;
    text-decoration:none;
    transition:0.3s;    
}

.email a:hover {
    color:#313131;
}   

.footer {
    width:100%;
    height:10vh;
    background-color:#8FC6ED;
}   

.all_home {
    display:none;
    width:100%;
    height:700px;
    margin:auto;
    font-family: 'Open Sans', Open Sans, Verdana, sans-serif;
}

.home_content {
    width:175px;
    height:30px;
    background-color:#6886CC;
    border-radius:15px;
    margin:auto;
    position:relative;
    margin-top:30px;
    padding:15px;
    padding-bottom:20px;
    padding-left:25px;
    padding-right:25px;
    color:#ffffff;
    font-size:32px;
    text-align:center;
    line-height:34px;
}

.home_content2 {
    width:275px;
    height:40px;
    background-color:#6886CC;
    border-radius:10px;
    margin:auto;
    position:relative;
    color:#ffffff;
    font-size:22px;
    text-align:center;
    margin-top:25px;
    line-height:40px;
    padding-left:10px;
    padding-right:10px;
    line-height:39px;
}

.home_imgs {
    width:600px;
    height:300px;
    margin:auto;
    position:relative;
}

.tech_cluster {
    margin:auto;
    position:relative;  
    margin-left:8px;
    margin-top:-10px;
}

/* .iphone {    
    margin-top:20px;
    float:left; 
    margin-left:511px;
}

.computer {
    margin-top:21px;
    margin-left:61px;
    float:left;
}

.ipad {
    margin-top:20px;
    margin-left:56px;
    float:left;
} */

.schedule {
    margin:auto;
    width:100%; 
    height:200px;
    margin-top:50px;
}

#schedule_table table {
    margin:auto;
    position:relative;
    border-collapse:collapse;
    width:800px;
}

#schedule_table th {
    background-color:#80b1e1;
    padding:5px;
    border-radius:4px 4px 0 0;
}

#schedule_table td {
    padding:10px;
    display:table-cell;
    cursor:default;
}

#period8td {
    border-radius:0 0 0 4px;    
}

#rob_daly_p8 {
    border-radius: 0 0 4px 0;   
}

#schedule_table tr {
    background-color:#6A93C4;
    transition:0.4s;
    -webkit-transition:0.4s;
    -ms-transition:0.4s;
    -o-transition:0.4s;
    -moz-transition:0.4s;
}

#schedule_table tr:hover {
    background-color:#49B5E9;
}



.selected {
    background-color:rgba(22,96,131,0.5);
}

.white_space_fix {
    display:none;   
}

Javascript / jQuery Code

// JavaScript文档

$(document).ready(function(e) {

    $('.all_home').fadeIn(650).addClass('white_space_fix');
    $('.schedule').hide();

     $('#nav_li_schedule').click(function(e) {
        $('#nav_li_schedule').addClass('selected');
        $('#nav_li_home').removeClass('selected');
        $('.all_home').hide();
        $('.schedule, #schedule_table').fadeIn(600);
    });



    $('#nav_li_home').click(function(e) {
        $('#nav_li_home').addClass('selected');
        $('#nav_li_schedule').removeClass('selected');
        $('.schedule, #schedule_table').hide();
        $('.all_home').fadeIn(650)
    });
});

Answer 1

使用overflow:hidden可以消除空白区域问题。我建议您使用100%单元，而不是使用vh或vw，这样可以更好地使用手机。

<强> See DEMO

.main_front 
{
width:100%;
height:90vh;
overflow:hidden; /*To Remove the unwanted scrolling*/
background-color:#A9D2F1;   
}

注意：此外，您使用scroll:none;作为html 没有任何意义。

在我的网页底部有一些不必要的空白区域，有人可以帮助我摆脱它吗？

1 个答案: