我如何摆脱滚动？

Question

I did not understand how to get rid of a vertical scrollbar on my page. 我不明白如何摆脱页面上的垂直滚动条。 This is my page html. 这是我的页面html。 Navbar at the top of the page is 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>

This is my CSS: 这是我的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)
}

I think the problem is with the wrappers margin, but I need them. 我认为问题在于包装纸的毛边，但我需要它们。

How do I get rid of the vertical scrolling? 如何摆脱垂直滚动？

Answer 1

I think the problem was mainly caused by the height / min-height 100% on content-wrapper since that isn't able to occupy 100% height (since you're also setting a top). 我认为问题主要是由于content-wrapper的高度/最小高度100％引起的，因为它不能占据100％的高度（因为您还设置了顶部）。

I was able to create a jsFiddle that recreated the problem, then fixed it by replacing the height 100% with a bottom value instead, eg 我能够创建一个重新创建问题的jsFiddle，然后通过将高度100％替换为底部值来解决此问题，例如

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

See my jsFiddle demo 看看我的jsFiddle演示

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 个解决方案

解决方案1
0 2014-03-15 08:45:40

解决方案2
0 2014-03-15 10:54:58

我如何摆脱滚动？

问题描述

2 个解决方案

解决方案1 0 2014-03-15 08:45:40

解决方案2 0 2014-03-15 10:54:58

解决方案1
0 2014-03-15 08:45:40

解决方案2
0 2014-03-15 10:54:58