Question

我有2个网页向下滚动远远超出了他们的需要。这仅在纵向模式下在移动屏幕上发生。当移动设备旋转到横向时，不会发生过多的y轴滚动，当我返回纵向模式时，问题就消失了！并且页面停在应停止的位置。

我有三个网页，这只发生在其中两个网页上。

我不确定问题是哪个，css还是html。这是css。

非常感谢你的帮助

html,body
{

overflow-x: hidden;

width: 960px; 
margin: 0 auto 0 auto;"
 }
 header{

    position:relative;
    width:auto;
   max-width:960px;
    margin: 0 auto 0px auto;
}

#logo-container img{
    width:100%; 
    height:auto;
}







.containerspace
{
  width:auto;
    margin: 0 auto;
    position:relative
    max-width:960px;

}

#thespace{
float:right;
font-family:Helvetica, sans-serif;
font-size:12px;
text-align:right;
padding-right:1px;
width:auto;


}



@media (max-width:500px)  
{
html,body
{
width:auto; !important;
overflow-x: hidden; !important;
}


    #containerspace
    {
           float:left;
            width:460px;
            margin: 30px auto;
            position:relative
            margin-left:auto;
            margin-right:auto;              
    }

    #thespace{
        float:none;
        padding-left:30px;
        font-size:14px;

            }
    #containerspace img{

        width:100%; 
        height:auto;

        }
    #text_column{
        width:auto;
        font-size:14px;
    }

}


@media (max-width:400px) 
{

    #containerspace
    {

            width:300px;


    }





}

这也是html。

<body>
<header>
<div id="logo-container">
<a href="index.html"><img src="img/banner.jpg" /></a></div>
</header>
<div>
<div>
<div>
<div class="toggleMobile">
            <span class="menu1"></span>
            <span class="menu2"></span>
            <span class="menu3"></span>
        </div>
 <div id='mobileMenu'>
 <ul>
 <li><a href='que/que.html'><span>que es solidwaka?</span></a></li>  
 <li class='last'><a href='con/con.html'><span>contacto</span></a></li>
 </ul>
 </div>
 <div id='cssmenu' style="float:left;width:300px;">
 <ul>
 <li><a href='que/que.html'><span>que es solidwaka?</span></a></li>  
<li><a href='con/con.html'><span>contacto</span></a></li>
<li class='last'><a href='http://wakanegra.org/index2.html'><span>archivo     waka 2009-14</span></a></li>
</ul>
</div>
<!-- InstanceBeginEditable name="the space" -->
<div id="containerspace">
<section id="text_column">
<div id="thespace">
<p></p>
<p>Solidwaka </p>
<p>- proyecto independiente de arte/investigaci&oacute;n y educaci&oacute;n       </p>
<p>2015  </p>
<p><img src="img/solidWaka.png" alt="solidwaka" width="286" height="455" />    </p>
</div>
</section>
</div>
<!-- InstanceEndEditable --></div>
</div>
</body>
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <script src="js/jquery.slides.min.js"></script>
<script type="text/javascript">
        $(window).load(function() {
            $('#featured').orbit();
        });
    </script>
 <!-- InstanceEnd --></html>

移动

0 个答案: