使用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;添加到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 */
}