用div覆盖整个屏幕 - RWD溢出的

问题描述：

我尝试制作信息块，它会在点击按钮后滑动并覆盖整个可用屏幕。我遇到小设备问题，文本溢出滑动div。我可以问你一些解决方案吗？用div覆盖整个屏幕 - RWD溢出的

你可以在这里找到工作示例：http://codepen.io/anon/pen/yYxOwe

HTML

<nav class="navbar navbar-default navbar-fixed-top container-fluid"> 
      <div class="navbar-header"> 
       <button id="more-info" href="#about" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
     </button> 
      <figure id ="logo"> 
        <img class="navbar-brand" src="http://cleartheairchicago.com/files/2014/06/logo-placeholder.jpg" alt="logo" title="logo" width="150px" /> 
        <figcaption>Under construction page</figcaption> 
       </figure> 

      </div> 

</nav> 



    <!-- About Page--> 
     <div id="about" class="top-tab offscreen container-fluid col-md-12"> 
      <section class="col-md-4"> 
       <h1>About Us</h1> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non turpis ut enim consequat elementum et a lectus. Cras dui massa, condimentum non arcu non, pretium gravida sem. Maecenas at mattis ipsum. Aliquam erat volutpat. Donec nec nibh sed odio euismod pellentesque non vitae purus. Aenean pretium varius erat sit amet fringilla. Phasellus ac justo nibh. Donec suscipit est vel euismod facilisis. Maecenas accumsan nunc eget nunc tempor ornare.</p> 


      </section> 

      <section class="col-md-4"> 
      <h1>What we offer</h1> 
       <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non turpis ut enim consequat elementum et a lectus. Cras dui massa, condimentum non arcu non, pretium gravida sem. Maecenas at mattis ipsum. Aliquam erat volutpat. Donec nec nibh sed odio euismod pellentesque non vitae purus. Aenean pretium varius erat sit amet fringilla. Phasellus ac justo nibh. Donec suscipit est vel euismod facilisis. Maecenas accumsan nunc eget nunc tempor ornare.</p> 



      </section> 

      <section class="col-md-4"> 
       <h1>Contact Us</h1> 
        <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non turpis ut enim consequat elementum et a lectus. Cras dui massa, condimentum non arcu non, pretium gravida sem. Maecenas at mattis ipsum. Aliquam erat volutpat. Donec nec nibh sed odio euismod pellentesque non vitae purus. Aenean pretium varius erat sit amet fringilla. Phasellus ac justo nibh. Donec suscipit est vel euismod facilisis. Maecenas accumsan nunc eget nunc tempor ornare.</p> 




      </section> 

     </div>

CSS

body {background-color: blue;} 
.top-tab { 
position: absolute; 
transition: 0.5s all; 
top: 0; 
background-color:white; 
opacity:0.85; 
height: 100%; 
padding-top: 4%; 
} 
.offscreen {top: -9999px;} 
.navbar-header { 
    float: none; 
} 
.navbar-toggle { 
    display: block; 
} 
.navbar-collapse { 
    border-top: 1px solid transparent; 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
} 
.navbar-collapse.collapse { 
    display: none!important; 
} 
.navbar-nav { 
    float: none!important; 
    margin: 7.5px -15px; 
} 
.navbar-nav>li { 
    float: none; 
} 
.navbar-nav>li>a { 
    padding-top: 10px; 
    padding-bottom: 10px; 
}

$(function() { 
    $("#more-info").click(function(event) { 
    var href=$(this).attr('href'); 
    $(href).toggleClass('offscreen'); 
    event.preventDefault() 
    }); 
});

答

只需添加overflow:auto;吨o您的CSS中的.top-tab类。

编辑在下面的代码部分：

.top-tab { 
position: absolute; 
transition: 0.5s all; 
top: 0; 
background-color:white; 
opacity:0.85; 
height: 100%; 
padding-top: 4%; 
overflow:auto; /* ADDED */ 
}

哈....愚蠢的我。谢谢：） – Ganga

用div覆盖整个屏幕 - RWD溢出的

相关推荐