用div覆蓋整個屏幕 - RWD溢出的

Question

我嘗試製作信息塊，它會在點擊按鈕後滑動並覆蓋整個可用屏幕。我遇到小設備問題，文本溢出滑動div。我可以問你一些解決方案嗎？

你可以在這裏找到工作示例：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; 
} 

JS

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

Answer 1

只需添加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 */ 
}