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

使用div覆盖全屏 - RWD溢出

1 个答案: