个人中心
gpt4 book ai didi

jquery - 高度侧边栏不是 100%

转载 作者：太空宇宙 更新时间：2023-11-04 13:32:21 26 4
gpt4 key购买 nike

我正在使用 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;
  }
}*/

最佳答案

尝试使用 display:table-cell在 div 上 .firstsidebar, .secondsidebar和 div下面.secondsidebar并删除 float: left对于这些 div。

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

试试看是否对你有帮助

DEMO

关于jquery - 高度侧边栏不是 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23273102/

26 4 0
文章推荐： c++ - 如何以编程方式确定帐户是否属于 Administrators 组？
文章推荐： css - 保持超大背景图像居中
文章推荐： c++ - 我怎样才能让这个函数运行不止一次？
文章推荐： java - 如何在 Java 中将 Bean A 的属性子集复制到 Bean B？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com