Question

我正在使用bootstrap 3并试图创建一个双侧边栏。这就是我现在拥有的： http://jsfiddle.net/Y52n9/11/

但正如您所看到的那样，确保预览屏幕足够大，如下所示：

enter image description here

侧边栏高度不是100％。我尝试了不同的东西，但它无法让它发挥作用。有没有人对我有一些提示？

我的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>xmed</title>

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/styles.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
  <div class="container-fluid height">
    <div class="row height">
      <div class="col-xs-6 col-sm-3 col-md-2 sidebar firstsidebar">
          <div class="logo">
              <img src="images/logo.png" />
          </div>
          <ul class="nav nav-sidebar main">
              <li class="active"><a href="#sub1">Navigation 1</a></li>
              <li><a href="#sub2">Navigation 2</a></li>
              <li><a href="#sub3">Navigation 3</a></li>
          </ul>
      </div>
      <div class="col-xs-6 col-sm-3 col-md-2 sidebar secondsidebar">
          <ul id="sub1" class="nav nav-sidebar sub active">
              <li><a href="#">Subnavigation 1.1</a></li>
              <li><a href="#">Subnavigation 1.2</a></li>
              <li><a href="#">Subnavigation 1.3</a></li>
              <li><a href="#">Subnavigation 1.4</a></li>
          </ul>
          <ul id="sub2" class="nav nav-sidebar sub">
              <li><a href="#">Subnavigation 2.1</a></li>
              <li><a href="#">Subnavigation 2.2</a></li>
              <li><a href="#">Subnavigation 2.3</a></li>
          </ul>
          <ul id="sub3" class="nav nav-sidebar sub">
              <li><a href="#">Subnavigation 3.1</a></li>
              <li><a href="#">Subnavigation 3.2</a></li>
              <li><a href="#">Subnavigation 3.3</a></li>
              <li><a href="#">Subnavigation 3.4</a></li>
              <li><a href="#">Subnavigation 3.5</a></li>
          </ul>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-8">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt condimentum dui et condimentum. Etiam tristique sem at viverra imperdiet. Etiam gravida in dui et vulputate. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sit amet tincidunt turpis. Phasellus fringilla lobortis lacinia. Etiam posuere nisl id lacus commodo, nec viverra mauris ultrices. Suspendisse nec augue elementum, imperdiet justo sed, euismod purus. Curabitur nec lorem eu dolor rutrum tincidunt. Quisque egestas eros et sollicitudin porttitor. Phasellus molestie gravida purus ac varius. Donec auctor tincidunt adipiscing. Duis dolor arcu, vehicula quis magna nec, condimentum fringilla purus. Maecenas malesuada augue tortor, ut dictum tortor semper id. Aliquam at suscipit nulla.

        Nullam blandit adipiscing commodo. Donec sed nisi vel est vulputate posuere vitae sed urna. Nullam at arcu sapien. Praesent pharetra augue in nisi accumsan, in viverra ligula vulputate. Fusce aliquam eget velit a luctus. Ut molestie, odio id suscipit tempus, arcu elit dapibus turpis, ac faucibus tortor augue eu neque. Praesent sit amet purus leo. Etiam vitae dolor euismod, pulvinar erat ac, congue urna. Sed accumsan volutpat condimentum. Proin accumsan arcu nec magna tristique, ac fringilla leo varius. Suspendisse congue massa odio, nec tristique eros cursus vel. Fusce commodo lorem sit amet mi placerat, id pharetra nulla sagittis.

        Nullam vel nibh volutpat, interdum quam eget, vestibulum nunc. Suspendisse eget tincidunt erat. Morbi sit amet tellus interdum, hendrerit ipsum eget, mattis nisi. Fusce sagittis accumsan mauris rutrum pretium. Vivamus facilisis ligula et mi congue mollis. Vivamus sit amet diam orci. Donec nec enim in ligula tempus sollicitudin. Pellentesque sed nibh magna. Phasellus vel quam consectetur, tempus dui in, condimentum mi. Nulla vitae pretium dolor, vitae ultrices metus. Sed nec ultrices dolor, sed semper dolor. Aenean a justo in sem malesuada tincidunt eget non diam. Aenean vel est cursus, facilisis orci sed, venenatis arcu. Maecenas bibendum tempor sollicitudin. Donec molestie eros metus, eu dapibus augue euismod sit amet.

        Pellentesque tristique augue id magna congue, id suscipit mi sodales. Pellentesque ac neque dui. Quisque placerat est quis dolor feugiat, commodo volutpat mi egestas. Donec gravida, quam quis laoreet luctus, enim lorem mattis mauris, at luctus ipsum nisl at elit. Sed magna nisi, lobortis id sagittis non, interdum sit amet nulla. In porttitor velit sed scelerisque semper. Nulla et ultricies ipsum. Maecenas interdum, nunc sit amet consectetur interdum, justo justo viverra ligula, id interdum sem ipsum eget dolor. Maecenas dapibus erat nisl, non luctus neque tincidunt vitae.

        Nulla vestibulum tortor id lacus iaculis, in ultricies massa dictum. Mauris commodo enim purus, euismod molestie urna molestie eu. Integer convallis pharetra eros. Aliquam nisi enim, euismod eu mauris in, porta eleifend sem. Vivamus ultrices aliquet ante eget vulputate. Aenean eleifend erat eget nunc iaculis, sed pulvinar elit mollis. Curabitur lobortis pharetra consequat. In hendrerit urna vitae sapien fermentum rhoncus. Sed at sapien vitae nisi euismod cursus sed at nisl.

        Donec sit amet felis in quam ornare vulputate. Vivamus in tellus quis tellus pellentesque sodales. Aliquam ornare nulla ac ante ultricies facilisis. Vivamus ac sem id odio laoreet imperdiet. Donec ac felis quis libero tristique pharetra. Vestibulum fermentum a erat in hendrerit. Aenean vestibulum aliquet orci sit amet tempus. Nulla eget elit ligula. Fusce ornare dapibus nisl, id mollis ipsum facilisis nec. Quisque eu consequat tellus. Fusce adipiscing id orci sit amet placerat.

        Duis tempus vehicula purus, vitae imperdiet ipsum laoreet id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent pulvinar massa vitae tellus vehicula, vel imperdiet nibh consequat. Donec condimentum turpis sed bibendum porttitor. Proin sed luctus ante. Nam molestie sagittis euismod. Ut at est aliquet, consequat velit sit amet, auctor orci.

        Aliquam vestibulum, dolor dignissim aliquet tempus, felis arcu interdum libero, tincidunt dictum lectus elit sed odio. Suspendisse potenti. In aliquet aliquam ante, eu aliquet eros lacinia eget. Nullam accumsan mollis sapien ut dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam sed lorem ac felis interdum varius at et nunc. Donec nulla lectus, accumsan in fermentum ac, egestas sed sem. Maecenas id mi orci. Proin elementum luctus nibh, eget sagittis enim eleifend nec.

        Nulla libero dui, consectetur nec placerat a, mollis quis leo. Praesent id varius nunc, vitae euismod diam. Etiam imperdiet leo et leo volutpat tristique. Phasellus euismod, massa a accumsan condimentum, orci lacus laoreet lorem, non pulvinar sem velit vel sapien. Nam laoreet, magna non faucibus convallis, nisi ipsum gravida lorem, id pretium diam eros non magna. Aliquam blandit nisl nibh, a lacinia lacus congue in. Cras ultricies congue est, eu tincidunt massa hendrerit faucibus. Pellentesque rhoncus lacus a commodo tincidunt. Duis ultrices consequat accumsan. Quisque lobortis tortor a iaculis tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed quam mi, elementum a lobortis id, facilisis ut leo. Integer placerat faucibus mauris, ac ullamcorper nulla mollis eget. Maecenas rhoncus lorem metus, faucibus lacinia quam vestibulum id. Cras bibendum lectus nec diam vestibulum pellentesque non aliquam eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

        Cras accumsan et nisl vel volutpat. Aliquam erat volutpat. Ut quam enim, vulputate eu venenatis at, accumsan vel enim. Aliquam eu tellus fermentum, pulvinar felis aliquam, consequat mi. Phasellus lorem tellus, cursus at faucibus non, bibendum vitae arcu. Nunc convallis nibh non libero fringilla, quis euismod enim euismod. Quisque eleifend mauris in nulla bibendum gravida. Vivamus velit justo, pretium vitae orci non, vehicula tempus magna. Mauris aliquet porta lacus quis luctus. Vestibulum adipiscing sollicitudin magna, quis dictum libero feugiat vitae. Nam laoreet neque sed eros euismod, ut consectetur urna vestibulum. Cras vestibulum nulla eget lorem malesuada scelerisque.

        Vestibulum sed neque sed magna posuere posuere. Sed vitae mi ac velit condimentum laoreet. Aenean ac mollis dui. Mauris pellentesque sed orci eget dapibus. Nullam porttitor lacus sit amet felis pulvinar ultricies. Aenean commodo ante eu libero mollis, quis ornare augue pellentesque. Aenean euismod ante a mattis consequat. Etiam mattis nunc sed ante sodales consequat. Integer eu libero diam. Integer non sapien id nibh gravida volutpat nec accumsan tortor. Aenean eleifend mauris eu vestibulum rhoncus.

        Ut vel eros magna. Nullam vel diam luctus, fringilla felis et, porta neque. Proin volutpat enim odio, a sollicitudin diam vehicula eget. Aenean lacus neque, condimentum et lectus a, aliquam mollis eros. In sodales euismod diam. Curabitur sit amet porta sapien. Praesent condimentum, nunc quis ultricies semper, magna sem euismod nibh, in lacinia velit mauris et tortor. Praesent posuere porta tempus. Sed bibendum ut lectus quis consequat. Nulla a placerat ante. Suspendisse ut porttitor erat, sed laoreet lacus. Mauris leo odio, cursus eget consequat id, placerat ut erat.</p>
      </div>
    </div>
  </div>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="js/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/bootstrap.min.js"></script>

  <script>
  $(function () {
    $(".main").on("click", "a", function () {
        $(".sub").removeClass("active");
        $($(this).attr("href")).addClass("active");
        //console.log($(".sub ul"));
    });
  });
  </script>
</body>

我的CSS：

html, body{
    height: 100%;
}

.height{
    height:100%;
}

.firstsidebar{
    height:100%;
    padding:0;
    -webkit-box-shadow: 4px 1px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    4px 1px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         4px 1px 5px 0px rgba(50, 50, 50, 0.75);
    z-index:2;
}

.firstsidebar ul li{
    border-top: 1px solid #3B3D56;
}
.firstsidebar ul li:last-child{
    border-bottom: 1px solid #3B3D56;
}
.firstsidebar ul li a:hover{
    background-color: #3B3D56;
    color:#FFF;
}
.firstsidebar ul li.active a {
    background-color: #3B3D56;
    color:#FFF;
}


.secondsidebar{
    padding:0;
    z-index:0;
    border-right: 1px solid #3B3D56;
    height:100%
}

.secondsidebar ul li a:hover{
    background-color: #3B3D56;
    color:#FFF;
}

.logo {
    text-align: center;
}
.logo img {
    width: 50%;
    margin: 20px auto;
}
.sub {
    max-height: 0;
    height: auto;
    overflow: hidden;
    background: #fafafa;
}
ul.active {
    max-height: 400px;
}

/*@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
  }
}*/

Answer 1

尝试使用div display:table-cell上的.firstsidebar, .secondsidebar和div下方的.secondsidebar，并删除这些div的float: left。

我在媒体查询中添加了display:table-cell属性，用于设备宽度＆gt; 768px因此请尝试调整以下演示中的结果部分。

尝试这有助于你

<强> DEMO

Answer 2

尝试将其放在侧边栏css规则中：

.main{height:99vh;}

高度侧边栏不是100％

2 个答案: