移动Chrome栏占用100％高度的空间css

Question

我面临一个颇为着名的问题，但似乎找不到任何解决方案在我的情况。所以我在引导程序上实现了这个可折叠的可滚动条，但问题是当我尝试在移动设备上滚动此条时，由于搜索栏从边栏的100％高度设置了一些空间，滚动条未达到结尾的div因此裁剪的内容。我想知道一种方法来排除高度栏或像解决此问题的解决方法。

这是我的HTML和CSS的侧边栏：https://jsfiddle.net/fq5b3m1w/

html, 
body { 
    background: #f8f8f8; 
} 

#wrapper { 
    padding-left: 0; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
    padding-top: 50px; 
} 

#wrapper.toggled { 
    // padding-left: 100px; 
} 

#sidebar-wrapper { 
    z-index: 99999; 
    position: fixed; 
    left: 100px; 
    width: 0; 
    height: calc(100%); 
    margin-left: -100px; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; 
    background: #fcfcfc; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

#wrapper.toggled #sidebar-wrapper { 
    width: 100px; 
} 

#page-content-wrapper { 
    width: 100%; 
    position: absolute; 
    padding: 5px; 
    background: #f8f8f8; 
} 

#wrapper.toggled #page-content-wrapper { 
    position: absolute; 
    margin-right: -100px; 
} 


/* Sidebar Styles */ 

.sidebar-nav { 
    position: absolute; 
    top: 0; 
    width: 100px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

.sidebar-nav li { 
    // text-indent: 20px; 
    // line-height: 25px; 
    text-align: center; 
    margin: 0 0; 
} 

.sidebar-nav li .fa { 
    padding-top: 10px; 
    display: block; 
    // color: rgba(2,136,209,1); 
} 

.sidebar-nav li.active a { 
    // color: #fff; 
    background: rgba(2, 136, 209, .2); 
} 

.sidebar-nav li a { 
    display: block; 
    text-decoration: none; 
    color: #000; 
    transition: all .2s; 
    font-size: 14px; 
    padding: 8px 0; 
} 

.sidebar-nav li a:hover { 
    text-decoration: none; 
    color: #333; 
    background: rgba(2, 136, 209, 0.2); 
} 

.sidebar-nav li a:active, 
.sidebar-nav li a:focus { 
    text-decoration: none; 
    color: #333; 
    background: rgba(2, 136, 209, 0.2); 
} 

.sidebar-nav > .sidebar-brand { 
    height: 65px; 
    font-size: 18px; 
    line-height: 60px; 
} 

.sidebar-nav > .sidebar-brand a { 
    color: #999999; 
} 

.sidebar-nav > .sidebar-brand a:hover { 
    color: #fff; 
    background: none; 
} 

@media(min-width:992px) { 
    #wrapper { 
    padding-left: 100px; 
    } 
    #wrapper.toggled { 
    padding-left: 0; 
    } 
    #sidebar-wrapper { 
    width: 100px; 
    } 
    #wrapper.toggled #sidebar-wrapper { 
    width: 0; 
    } 
    #page-content-wrapper { 
    padding: 20px; 
    position: relative; 
    } 
    #wrapper.toggled #page-content-wrapper { 
    position: relative; 
    margin-right: 0; 
    } 
} 

Answer 1

第一种方法：

一个简单的解决办法是添加边框以抵消顶部

删除多余的空间：

#wrapper { 
    padding-top: 50px; 
} 

地址：

#sidebar-wrapper { 
    border-top: 50px solid white; 
} 

第二种方法：

创建一个顶部的标题和内容的div，在那里你height:10%和内容height:90%指定的标题。通过这种方式，滚动条将始终适应屏幕，无论你是在

第三种方法是什么尺寸：

使用display:flex，您使用flex-direction: column;安排在列报头和内容。然后使用flex-basis:50px和内容flex-grow:1和flex-basis:auto;指定标题，这样内容会自动调整高度。

Answer 2

我不知道这是你想要的，但你可以试试这个。

$("#menu-toggle").click(function(e) { 
 
    e.preventDefault(); 
 
    var height = $(window).height()-50; 
 
    $('#sidebar-wrapper').css('height',height+'px'); 
 
    $("#wrapper").toggleClass("toggled"); 
 
});

html, 
 
body { 
 
    background: #f8f8f8; 
 
} 
 

 
#wrapper { 
 
    padding-left: 0; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
    padding-top: 50px; 
 
} 
 

 
#wrapper.toggled { 
 
    // padding-left: 100px; 
 
} 
 

 
#sidebar-wrapper { 
 
    z-index: 99999; 
 
    position: fixed; 
 
    left: 100px; 
 
    width: 0; 
 
    margin-left: -100px; 
 
    overflow-y: auto; 
 
    -webkit-overflow-scrolling: touch; 
 
    background: #fcfcfc; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled #sidebar-wrapper { 
 
    width: 100px; 
 
} 
 

 
#page-content-wrapper { 
 
    width: 100%; 
 
    position: absolute; 
 
    padding: 5px; 
 
    background: #f8f8f8; 
 
} 
 

 
#wrapper.toggled #page-content-wrapper { 
 
    position: absolute; 
 
    margin-right: -100px; 
 
} 
 

 

 
/* Sidebar Styles */ 
 

 
.sidebar-nav { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.sidebar-nav li { 
 
    // text-indent: 20px; 
 
    // line-height: 25px; 
 
    text-align: center; 
 
    margin: 0 0; 
 
} 
 

 
.sidebar-nav li .fa { 
 
    padding-top: 10px; 
 
    display: block; 
 
    // color: rgba(2,136,209,1); 
 
} 
 

 
.sidebar-nav li.active a { 
 
    // color: #fff; 
 
    background: rgba(2, 136, 209, .2); 
 
} 
 

 
.sidebar-nav li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #000; 
 
    transition: all .2s; 
 
    font-size: 14px; 
 
    padding: 8px 0; 
 
} 
 

 
.sidebar-nav li a:hover { 
 
    text-decoration: none; 
 
    color: #333; 
 
    background: rgba(2, 136, 209, 0.2); 
 
} 
 

 
.sidebar-nav li a:active, 
 
.sidebar-nav li a:focus { 
 
    text-decoration: none; 
 
    color: #333; 
 
    background: rgba(2, 136, 209, 0.2); 
 
} 
 

 
.sidebar-nav > .sidebar-brand { 
 
    height: 65px; 
 
    font-size: 18px; 
 
    line-height: 60px; 
 
} 
 

 
.sidebar-nav > .sidebar-brand a { 
 
    color: #999999; 
 
} 
 

 
.sidebar-nav > .sidebar-brand a:hover { 
 
    color: #fff; 
 
    background: none; 
 
} 
 

 
@media(min-width:992px) { 
 
    #wrapper { 
 
    padding-left: 100px; 
 
    } 
 
    #wrapper.toggled { 
 
    padding-left: 0; 
 
    } 
 
    #sidebar-wrapper { 
 
    width: 100px; 
 
    } 
 
    #wrapper.toggled #sidebar-wrapper { 
 
    width: 0; 
 
    } 
 
    #page-content-wrapper { 
 
    padding: 20px; 
 
    position: relative; 
 
    } 
 
    #wrapper.toggled #page-content-wrapper { 
 
    position: relative; 
 
    margin-right: 0; 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="wrapper"> 
 
    <!-- Sidebar --> 
 
    <div id="sidebar-wrapper" class="affix"> 
 
    <ul class="sidebar-nav"> 
 
     <li class="active"> 
 
     <a href="/"> 
 
      <i class="fa fa-home fa-2x"></i> Home 
 
     </a> 
 
     </li> 
 
     <li class=""> 
 
     <a href="/companies"> 
 
      <i class="fa fa-building fa-2x"></i> Companies 
 
     </a> 
 
     </li> 
 
     <li class=""> 
 
     <a href="/people"> 
 
      <i class="fa fa-users fa-2x"></i> People 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="/"> 
 
      <i class="fa fa-handshake-o fa-2x"></i> Investors 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="/"> 
 
      <i class="fa fa-money fa-2x"></i> Funding Rounds 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="/"> 
 
      <i class="fa fa-users fa-2x"></i> Acquisitions 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="/"> 
 
      <i class="fa fa-graduation-cap fa-2x"></i> Schools 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="/"> 
 
      <i class="fa fa-calendar fa-2x"></i> Events 
 
     </a> 
 
     </li> 
 

 
     <li> 
 
     <a href="/"> 
 
      <i class="fa fa-calendar fa-2x"></i> Login/Signup 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <!-- /#sidebar-wrapper --> 
 
    <!-- Page Content --> 
 
    <div id="page-content-wrapper"> 
 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
     <div class="col-lg-12"> 
 
      content 
 
      <button id="menu-toggle"> 
 
      menu 
 
      </button> 
 
      </button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!-- /#page-content-wrapper --> 
 
</div>

Updated Fiddle。