Question

我不明白如何摆脱页面上的垂直滚动条。这是我的页面html。页面顶部的导航栏是bootstrap navbar fixed top：

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Mindblow</title>
  <link href="css/styles.css" rel="stylesheet" type="text/css" />

</head>

<body>
  <nav class="navbar navbar-fixed-top navbar-default" role="navigation">
  </nav>

  <div id="main-wrap">
  <div id="responsive-admin-menu">
    ssss

  </div>
  <div id="content-wrapper">
   Content Here
  </div>


</body>
</html>

这是我的CSS：

@import url("bootstrap.css");

html, body {
  height:100%;
  width:100%;
  background-color: #4D5360;
  margin:0;
}

body > .row {
  margin-left: 0px;
  margin-right: 0px;

}

/*Page Structure*/

#main-wrap{
  position:absolute;
  width:100%;
  left:0;
  bottom:52px; 
  top:0;}

#responsive-admin-menu {
  position: absolute;
  width: 190px;
  height:auto !important;
  height:100%;
  min-height:100%;
  left:0px;
  top:67px;
  bottom:0px;
 z-index:20;
}

#content-wrapper {
position: absolute;
top: 52px;
padding:15px;
margin:15px 15px 0 0;
left: 190px;
height: auto !important;
height: 100%;
min-height: 100% !important;
right: 0px;
background:#f1f1f1;
box-shadow:0 0 3px 3px rgba(0,0,0,0.2)
}

我认为问题在于包装器边缘，但我需要它们。

如何摆脱垂直滚动？

Answer 1

我认为问题主要是由内容包装器的高度/最小高度100％引起的，因为它不能占据100％的高度（因为你还设置了一个顶部）。

我能够创建一个重新创建问题的jsFiddle，然后通过用底部值替换高度100％来修复它，例如，

#content-wrapper {
    bottom: 52px;
    overflow: auto;
}

<强> See my jsFiddle demo

Answer 2

See example

#content-wrapper {
    position: relative;
    top: 52px;
    padding:15px;
    margin:15px 15px 0 0;
    left: 190px;
    height: auto !important;
    bottom: 52px;
    right: 0px;
    background:#f1f1f1;
    box-shadow:0 0 3px 3px rgba(0,0,0,0.2);
    overflow: auto;
    width: 64%;
}



Hope this helps to get rid of scroll bar :)

如何摆脱滚动？

2 个答案: