Question

我试图在页面的左侧创建一个侧边栏，其内容位于页面右侧。我遇到的问题是，当我尝试将div设为100％高度时，我必须将其设置为position：absolute;这导致内容与侧边栏重叠。

这是我的HTML

<div class="row">
  <div class="sidebar col-sm-3">
    <ul>
      <li class="active">
        <h3><a href="">Link</a></h3>
      </li>
      <li class="">
        <h3><a href="">Link</a></h3>
      </li>
      <li class="">
        <h3><a href="">Link</a></h3>
      </li>
      <li class="active">
        <h3><a href="">Link</a></h3>
      </li>
    </ul>
  </div>
  <!-- sidebar -->
  <div class="sidebar-content col-sm-9">
    <ul>
      <li class="active">
        <h2 class="underline">Link</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
      </li>
      <li class="">
        <h2 class="underline">Link</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
      </li>
      <li class="">
        <h2 class="underline">Link</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
      </li>
      <li class="">
        <h2 class="underline">Link</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
      </li>
    </ul>
  </div>
  <!-- sidebar-content -->
</div>
<!-- row -->

我的CSS

.sidebar {
background: #eee;
height: 100%;
padding-top: 100px !important;
}

.sidebar-content ul li {
display: none;
}

.sidebar-content ul li.active {
display: block;
}

.sidebar-content {
position: relative;
right: 0;
padding: 100px;
}

有人可以告诉我如何制作div相对和100％高度或更好的方法来创建侧边栏吗？

小提琴：https://jsfiddle.net/3Lapzoyf/3/

Answer 1

<强>解决方案：

添加height 100vh（长度单位，代表视口高度的1％）。这将导致侧边栏的视口高度为height 100%。当您使用Twitter Bootstrap时（如果您还没有这样做），请确保在.container或.container-fluid内有行。

<强> HTML：

<div class="container-fluid">
    <div class="row">
      <div class="sidebar col-sm-3">
        <ul>
          <li class="active">
            <h3><a href="">Link</a></h3>
          </li>
          <li class="">
            <h3><a href="">Link</a></h3>
          </li>
          <li class="">
            <h3><a href="">Link</a></h3>
          </li>
          <li class="active">
            <h3><a href="">Link</a></h3>
          </li>
        </ul>
      </div><!-- sidebar -->
      <div class="sidebar-content col-sm-9">
        <ul>
          <li class="active">
            <h2 class="underline">Link</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
          </li>
          <li class="">
            <h2 class="underline">Link</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
          </li>
          <li class="">
            <h2 class="underline">Link</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
          </li>
          <li class="">
            <h2 class="underline">Link</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
          </li>
        </ul>
      </div><!-- sidebar-content -->
  </div><!-- row -->
</div>

<强> CSS：

.sidebar {
  background: #eee;
  height: 100vh;
  padding-top: 100px;  
}

.sidebar-content ul li {
  display: none;
}

.sidebar-content ul li.active {
  display: block;
}

.sidebar-content {
  padding: 100px;
  position: relative;
  right: 0;
}

小提琴： https://jsfiddle.net/3Lapzoyf/4/

在Bootstrap中使相对定位100％高度div

1 个答案: