HTML-элемент в боковом меню, не масштабирующийся до содержимого родителя

Question

Редактировать: WOW! Длинный день! Я не спас скрипку ...! Вот рабочий пример. Спасибо за любую помощь.

---

Я создал fiddle here моей проблемы.

Я использую this menu в качестве основы для страницы, над которой я работаю.

В меню используются Bootstrap 3 и jQuery.

Я не могу понять, почему черная боковая панель (#sidebar-wrapper) не масштабируется с содержимым и всегда начинается с фиксированной высоты. Я думаю, что начальная высота - это видимая область этого элемента.

По существу я хочу столбец меню масштабирования следующим образом:

1. мин-высота = экран-высота - 50px (разрешить это для заголовка) или
2. ее высота равна высоте основной (#page-content-wrapper), который по существу будет содержать переменное количество данных.

Я нашел в исследовании, что этот CSS растет элемент на высоту страницы (как минимум):

min-height: 100vh; 

Но не смогли применить разницу 50px. Правильно ли я понял?

Любая помощь очень ценится!

Answer 1

Используйте calc() для минимальной высоты. Она удаляет 50px от общей высоты страницы

min-height: calc(100vh - 50px);

Answer 2

Try этого примера я думаю, что ваш вопрос решить

$("#menu-toggle").click(function(e) { 
 
     e.preventDefault(); 
 
     $("#wrapper").toggleClass("toggled"); 
 
    }); 
 
    $("#menu-toggle-2").click(function(e) { 
 
     e.preventDefault(); 
 
     $("#wrapper").toggleClass("toggled-2"); 
 
     $('#menu ul').hide(); 
 
    }); 
 

 
    function initMenu() { 
 
     $('#menu ul').hide(); 
 
     $('#menu ul').children('.current').parent().show(); 
 
     //$('#menu ul:first').show(); 
 
     $('#menu li a').click(
 
     function() { 
 
      var checkElement = $(this).next(); 
 
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
 
      return false; 
 
      } 
 
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
 
      $('#menu ul:visible').slideUp('normal'); 
 
      checkElement.slideDown('normal'); 
 
      return false; 
 
      } 
 
      } 
 
     ); 
 
     } 
 
    $(document).ready(function() {initMenu();});

/* Toggle Styles */ 
 

 
#wrapper { 
 
    padding-left: 0; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
    overflow: hidden; 
 
} 
 

 
#wrapper.toggled { 
 
    padding-left: 250px; 
 
    overflow: hidden; 
 
} 
 

 
#sidebar-wrapper { 
 
    z-index: 1000; 
 
    position: absolute; 
 
    left: 250px; 
 
    width: 0; 
 
    height: 100%; 
 
    margin-left: -250px; 
 
    overflow-y: auto; 
 
    background: #000; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 
#wrapper.toggled #sidebar-wrapper { 
 
    width: 250px; 
 
} 
 

 
#page-content-wrapper { 
 
    position: absolute; 
 
    padding: 15px; 
 
    width: 100%; 
 
    overflow-x: hidden; 
 
} 
 
.xyz{ 
 
    min-width: 360px; 
 
} 
 
#wrapper.toggled #page-content-wrapper { 
 
    position: relative; 
 
    margin-right: 0px; 
 
} 
 
.fixed-brand{ 
 
    width: auto; 
 
} 
 
/* Sidebar Styles */ 
 

 
.sidebar-nav { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 250px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    margin-top: 2px; 
 
} 
 

 
.sidebar-nav li { 
 
    text-indent: 15px; 
 
    line-height: 40px; 
 
} 
 

 
.sidebar-nav li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #999999; 
 
} 
 

 
.sidebar-nav li a:hover { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    background: rgba(255,255,255,0.2); 
 
    border-left: red 2px solid; 
 
} 
 

 
.sidebar-nav li a:active, 
 
.sidebar-nav li a:focus { 
 
    text-decoration: none; 
 
} 
 

 
.sidebar-nav > .sidebar-brand { 
 
    height: 65px; 
 
    font-size: 18px; 
 
    line-height: 60px; 
 
} 
 

 
.sidebar-nav > .sidebar-brand a { 
 
    color: #999999; 
 
} 
 

 
.sidebar-nav > .sidebar-brand a:hover { 
 
    color: #fff; 
 
    background: none; 
 
} 
 
.no-margin{ 
 
    margin:0; 
 
} 
 

 
@media(min-width:768px) { 
 
    #wrapper { 
 
     padding-left: 250px; 
 
    } 
 
    .fixed-brand{ 
 
     width: 250px; 
 
    } 
 
    #wrapper.toggled { 
 
     padding-left: 0; 
 
    } 
 

 
    #sidebar-wrapper { 
 
     width: 250px; 
 
    } 
 

 
    #wrapper.toggled #sidebar-wrapper { 
 
     width: 250px; 
 
    } 
 
    #wrapper.toggled-2 #sidebar-wrapper { 
 
     width: 50px; 
 
    } 
 
    #wrapper.toggled-2 #sidebar-wrapper:hover { 
 
     width: 250px; 
 
    } 
 

 

 
    #page-content-wrapper { 
 
     padding: 20px; 
 
     position: relative; 
 
     -webkit-transition: all 0.5s ease; 
 
     -moz-transition: all 0.5s ease; 
 
     -o-transition: all 0.5s ease; 
 
     transition: all 0.5s ease; 
 
    } 
 

 
    #wrapper.toggled #page-content-wrapper { 
 
     position: relative; 
 
     margin-right: 0; 
 
     padding-left: 250px; 
 
    } 
 
    #wrapper.toggled-2 #page-content-wrapper { 
 
     position: relative; 
 
     margin-right: 0; 
 
     margin-left: -200px; 
 
     -webkit-transition: all 0.5s ease; 
 
     -moz-transition: all 0.5s ease; 
 
     -o-transition: all 0.5s ease; 
 
     transition: all 0.5s ease; 
 
     width: auto; 
 

 
    } 
 
}

<link href="http://seegatesite.com/bootstrap/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="http://seegatesite.com/bootstrap/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="http://seegatesite.com/bootstrap/js/bootstrap.min.js"></script> 
 
<script src="http://seegatesite.com/bootstrap/js/jquery-1.11.2.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<nav class="navbar navbar-default no-margin"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
       <div class="navbar-header fixed-brand"> 
 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" id="menu-toggle"> 
 
         <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span> 
 
        </button> 
 
        <a class="navbar-brand" href="#"><i class="fa fa-rocket fa-4"></i> SEEGATESITE</a> 
 
       </div><!-- navbar-header--> 
 
    
 
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
          <ul class="nav navbar-nav"> 
 
           <li class="active" ><button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span></button></li> 
 
          </ul> 
 
       </div><!-- bs-example-navbar-collapse-1 --> 
 
    </nav> 
 
    <div id="wrapper"> 
 
     <!-- Sidebar --> 
 
     <div id="sidebar-wrapper"> 
 
      <ul class="sidebar-nav nav-pills nav-stacked" id="menu"> 
 
    
 
       <li class="active"> 
 
        <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-dashboard fa-stack-1x "></i></span> Dashboard</a> 
 
         <ul class="nav-pills nav-stacked" style="list-style-type:none;"> 
 
         <li><a href="#">link1</a></li> 
 
         <li><a href="#">link2</a></li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span> Shortcut</a> 
 
        <ul class="nav-pills nav-stacked" style="list-style-type:none;"> 
 
         <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>link1</a></li> 
 
         <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>link2</a></li> 
 
    
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-cloud-download fa-stack-1x "></i></span>Overview</a> 
 
       </li> 
 
       <li> 
 
        <a href="#"> <span class="fa-stack fa-lg pull-left"><i class="fa fa-cart-plus fa-stack-1x "></i></span>Events</a> 
 
       </li> 
 
       <li> 
 
        <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-youtube-play fa-stack-1x "></i></span>About</a> 
 
       </li> 
 
       <li> 
 
        <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-wrench fa-stack-1x "></i></span>Services</a> 
 
       </li> 
 
       <li> 
 
        <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a> 
 
       </li> 
 
      </ul> 
 
     </div><!-- /#sidebar-wrapper --> 
 
     <!-- Page Content --> 
 
     <div id="page-content-wrapper"> 
 
      <div class="container-fluid xyz"> 
 
       <div class="row"> 
 
        <div class="col-lg-12"> 
 
         <h1>Simple Sidebar With Bootstrap 3 by <a href="http://seegatesite.com/create-simple-cool-sidebar-menu-with-bootstrap-3/" >Seegatesite.com</a></h1> 
 
         <p>This sidebar is adopted from start bootstrap simple sidebar startboostrap.com, which I modified slightly to be more cool. For tutorials and how to create it , you can read from my site here <a href="http://seegatesite.com/create-simple-cool-sidebar-menu-with-bootstrap-3/">create cool simple sidebar menu with boostrap 3</a></p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <!-- /#page-content-wrapper --> 
 
    </div> 
 
    <!-- /#wrapper -->

Answer 3

Я думаю, что на основе своей скрипки, его элемент блока, поэтому он получает фиксированную высоту. Кроме того, он находится в div, поэтому он будет делиться своей высотой с другими элементами внутри него. Из образца, который вы дали, я смог воспроизвести его. То, что он делает, это дать атрибут id #sidebar-wrapperposition:absolute, поэтому он не принимает во внимание любые элементы, кроме самого себя.

Replicated example