移动设备上我网站页脚下方的空白区域

时间：2017-07-14 17:26:33

标签： html css

我是HTML和CSS的新手，最后创建了我的新网站。该网站在我的笔记本电脑和PC上工作正常，但是当我在手机上打开它时，这个巨大的空白区域在纵向模式下覆盖了我的一半屏幕。它在风景模式中非常好。

我希望我的网站在纵向模式下打开时完全放大，这样您就可以滑动/滚动以在网站上导航并摆脱空白区域。基本上，此时，当网站打开时，它会缩小显示100％的网站，但我只希望它显示适合移动屏幕的纵向模式。希望我的问题很明确。我现在一直在寻找答案超过3个小时。请帮帮我们:(

我的css：https://pastebin.com/AeHyczJh 我的HTML：https://pastebin.com/N5jV8yqY 

<html>
<head>
    <meta charset="utf-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <meta name="description" content="Affordable and professional web design">
    <meta name="keywords" content="web design, affordable web design, professional web design">
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="wrap">

        <header>

            <div class="container">

                <img src="images/final.png" width="162" height="200" alt="logo" id="logo"/>

                <nav>
                  <ul>
                    <li class="current"><a href="index.html">Home</a></li>
                    <li class="dropdown">
                        <a href="javascript:void(0)" class="dropbtn">Registration</a>
                        <div class="dropdown-content">
                          <a href="./regist-team/regist-team.html">Team</a>
                          <a href="./regist-ind/regist-ind.html">Individual</a> 
                          <a href="soon.html""soon.html">Coach a team</a>
                          <a href="soon.html">Manage a team</a>
                        </div>
                    </li>
                    <li class="dropdown">
                        <a href="javascript:void(0)" class="dropbtn">KWSA Women's Soccer League</a>
                        <div class="dropdown-content">
                          <a href="soon.html" class="dropbtn-2">Match Schedule</a>
                          <a href="soon.html" class="dropbtn-2">Practice Schedule</a>
                          <a href="soon.html">Pitch Locations</a>
                          <a href="soon.html">Team Kits</a>
                          <a href="soon.html" class="dropbtn-2">Top Scorers</a>
                        </div>  

                    </li>
                    <li class="dropdown">
                        <a href="javascript:void(0)" class="dropbtn">Sponsors</a>
                        <div class="dropdown-content">
                          <a href="soon.html">Sponsors of KWSL</a>
                          <a href="soon.html">Sponsor a team</a>
                        </div>
                    </li>
                    <li class="dropdown">
                        <a href="javascript:void(0)" class="dropbtn">Info</a>
                        <div class="dropdown-content">
                          <a href="soon.html">Rules</a>
                          <a href="faq.html">FAQ</a>
                        </div>
                    </li>
                    <li><a href="carpool.html">The Carpool Program</a></li>
                  </ul>
                </nav>
            </div>

        </header>

        <section id="main_content">



                <iframe width="560" height="315" src="https://www.youtube.com/embed/WSd0HZVh5pE?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

                <div id="main_text">
                    <h1></h1>
                    <p></p>
                </div>



        </section>

        <footer>

            <div class="foot-container">

                <a href="https://www.facebook.com/KWFL2017/"><img src="images/fb.png" class="social_fb"></a>
                <a href="#"><img src="images/youtube.png" class="social_youtube"></a>
                <a href="#"><img src="images/insta.png" class="social_insta"></a>
                <a href="#"><img src="images/mail.png" class="social_mail"></a>


            </div>


        </footer>



    </div>  
</body>
</html>

    @font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url(''); /*URL to font*/
}

@charset "utf-8";

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
      html{
        max-height: 5px;
      }

}

body{
  font: 15px/1.5 Arial, Helvetica,sans-serif;
  padding:0;
  margin:0;
  background-color:#f4f4f4;
  overflow: scroll;
  background: url(images/field.jpg) no-repeat 0 -200px;
}



h1,
p{
    margin: 0;
}

#wrap{

}

.container{

    margin: auto;
    overflow: hidden;
}


header{
    padding-top: 30px;
    min-height: 70px;
    padding-bottom: 0px;
    min-width: 1300px;
    padding-left: 20px;
}


#logo{
    position: absolute;
    top: 20px;
    left: 20px;
    margin: auto;
}

header li{
  float:center;
  display:inline;
  padding: 0 70px 0 0px;

}

nav{
    float: right;
}

header a{
    text-decoration: none;
    font-weight: bold;
    color: #FFFFFF;
    font-size: 12px;
}



header a:hover{
    font-weight: bold;

}


iframe{
    position: static;
    top: 300px;
    left: 200px;
    float:right;
    box-shadow: 10px 10px 100px black;
    overflow: hidden;
    margin: 200px 20px 0px 0px;
}



#main_content{
    position: static;
    min-height: 700px;
    min-width: 1300px;
    width: 100%;
    z-index: 1;
}

#main_content h1{
    position: absolute;
    left: -135px;
    top: 165px;
    text-align: center;
    color: #FFFFFF;
    font-family:"Bauhaus 93"; 
    font-size: 50px;
    min-height: 500px;
    min-width: 150px;

}

#main_content p{
    color:#FFFFFF;
    text-align: center;
    height: 10px;
    width: 400px;
    position: absolute;
    left: 410px;
    top: 275px;
}

li a, .dropbtn {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: all 700ms ease; 
    border: black 1px solid;
}

li a:hover, .dropdown:hover .dropbtn {
    background: black;
    color: white;
    box-shadow: inset 0 0 0 3px black;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    background: rgba(208,208,208,0.8);
    box-shadow: 1px 1px 1px black;
}

.dropdown-content a:hover {background-color:black;}

.dropdown:hover .dropdown-content {
    display: block;
}

li a, .dropbtn-2 {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown2:hover .dropbtn-2 {

}


.dropdown-content-2 {
    display: none;
    position: absolute;
    background-color: #1A3C60;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content-2 a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content-2 a:hover {background-color:rgba(56,97,159,0.46)}

.dropdown2:hover .dropdown-content-2 {
    display: inline-block;
    position: absolute;
    left: 160px;
    margin-top: -47px;
}

li.dropdown2 {
    display: inline-block;
}


#FAQ{
    position: static;
    background: url(images/faq_bg.png) center no-repeat ;
    min-width: 1300px;
    min-height: 700px;
    width: 100%;
    height: 100%; 
}

#FAQ h1{
    padding-top: 75px;
    color: #e4e3e3;
    font-family:"Bauhaus 93"; 
    font-size: 50px;
    text-align: center;
    left: 390px;


}

#FAQ ul p{
    text-align: left;
    color: #e4e3e3;
    max-width: 500px;
    position: relative;
    font-weight: normal;
}

#FAQ ul{
    text-align: left;
    color: #e4e3e3;
    max-width: 500px;
    position: relative;
    left: 400px;
    top: 50px;
    z-index: 2;
    font-weight: bold;
}

.social_fb{
    position: relative;
    top: 15px;
    left: 500px;
    border-radius: 50%;
    background: rgba(168,168,168,0.7);
    transition: all 1s ease;
}

.social_fb:hover{
    background: #3b5998;
}

.social_youtube{
    position: relative;
    top: 15px;
    left: 520px;
    border-radius: 50%;
    background: rgba(168,168,168,0.7);
    transition: all 1s ease;
}

.social_youtube:hover{
    background: #bb0000;
}

.social_insta{
    position: relative;
    top: 15px;
    left: 540px;
    border-radius: 50%;
    background: rgba(168,168,168,0.7);
    transition: all 1s ease;
}

.social_insta:hover{
    background: #8a3ab9;
}

.social_mail{
    position: relative;
    top: 15px;
    left: 560px;
    border-radius: 50%;
    background: rgba(168,168,168,0.7);
    transition: all 1s ease;
}

.social_mail:hover{
    background: #e4a805;
}


#carpool{
    position: static;
    background: url(images/faq_bg.png) center no-repeat ;
    min-width: 1300px;
    min-height: 700px;
    width: 100%;
    z-index: 1; 
    height: 100%;
}

#carpool h1{
    padding-top: 75px;
    color: #e4e3e3;
    font-family:"Bauhaus 93"; 
    font-size: 50px;
    text-align: center;
    left: 390px;

}

#carpool ul p{
    text-align: left;
    color: #e4e3e3;
    max-width: 500px;
    position: relative;
    font-weight: normal;
}

#carpool ul{
    text-align: left;
    color: #e4e3e3;
    max-width: 500px;
    position: relative;
    left: 400px;
    top: 50px;
    z-index: 2;
    font-weight: bold;
}


#soon{
    position: absolute;
    left: 550px;
    top: 300px;
}

0 个答案:

没有答案
相关问题
最新问题