用 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 */
}