Question

我的右侧边栏有问题，背景没有正确延伸。

代码：

.right-sidebar-menu{
   background-color: gray;
   width: 300px;
   position: absolute;
   top: 0;
   right: 0;
   z-index: 9999;
   bottom: 0;
 }

jsfiddle

因此，如果左侧的文字比右侧的侧边栏长，我会得到一个滚动条和侧边栏不会很好，因为背景不会延长......

任何想法为什么？如果您有更好的想法实现这一点，请分享。： - ）

感谢。

Answer 1

您可以使用网格系统定位右侧面板。例如：

＆＃13;

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}
.right-sidebar-menu {
  background-color: gray;
  height: 100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-8 col-sm-8">
          <div class="main-box">
            <p class="text-justify">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus diam sit amet posuere euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed mauris ligula, convallis et iaculis non, auctor nec felis.
              Vestibulum volutpat augue dignissim, consequat diam ac, consequat sapien. Nunc ultricies tellus justo, a imperdiet nisi posuere non. Suspendisse tincidunt egestas libero in aliquam. Sed varius consectetur ligula interdum feugiat.
              </p>
      </div>
    </div>
    <div class="col-xs-4 col-sm-4">
      <nav>
        <div class="right-sidebar-menu">
          <div class="sidebar-logo"><img src="" alt="awesome logo" /></div>
          <div class="menu">
            <ul>
              <li class="active"><a href="#">link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
              <li><a href="#">Link 4</a></li>
              <li><a href="#">Link 5</a></li>
              <li><a href="#">Link 6</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  </div>
</div>

＆＃13;

侧边栏右侧有引导程序

1 个答案: