Bootstrap 3 боковая панель 100% высота родителя

Question

Так вот моя ситуации

мне нужна врезка идти вниз весь путь, но я не могу заставить его сделать это. Я тоже пробовал искать. Это, вероятно, очень просто, и я не вижу этого, потому что некоторое время я работаю над этим.

Мой код:

 <div class="container"> 
     <div class="site-box"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="header"> 
         <!-- HEADER --> 
         <!-- Logo --> 
         <div class="col-xs-3 col-md-3"> 
          <div class="header-logo"> 
           <span class="logo">Zikle</span> 
          </div> 
         </div> 
         <!-- Search --> 
         <div class="col-md-6 hidden-xs hidden-sm"> 
          <div class="header-search"> 
           <div class="input-group"> 
            <form class="header-search-form" role="search"> 
             <input type="text" class="form-control" placeholder="Zoeken..." aria-label="Zoeken"> 
             <span class="input-group-btn" id="basic-addon1"><button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button></span> 
            </form> 
           </div> 
          </div> 
         </div> 
         <!-- Control Panel --> 
         <div class="col-xs-9 col-md-3"> 
          <div class="header-controlpanel"><div class="pull-right"> 
           <span><kbd>Dani&euml;l</kbd></span> <img src="http://www.zikle.nl/userfiles/thumbs/0/2/5/4/02546700.png" width=40 height=40 style="border-radius: 50%; cursor: pointer"> 
          </div></div> 
         </div> 

        </div> 
       </div> 

       <div class="row"> 
        <!-- Left MENU --> 
        <div class="col-md-3 hidden-xs hidden-sm left-content-box"> 

         <div class="side-menu"> 
          <img src="http://www.zikle.nl/userfiles/thumbs/0/2/5/4/02546700.png" width=90 height=90> 
          <span class="user"> 
           <span class="name"><a href="/">Dani&euml;l</a></span> 
           <span class="title">- Designer</span><br><hr style="margin: 5px;"> 
           <span class="karma">+788</span> Karma<br> 
           <span class="gray">423</span> Credits<br> 
           <span class="gray">4881</span> Forum berichten<br> 
           <span class="gray">615</span> Plaatjes<br> 
           <span class="gray">96</span> Vrienden<br> 
          </span> 

          <div class="sub-menu"> 
           <ul class="nav nav-pills nav-stacked"> 
            <li role="presentation"><a href="#">Mijn pagina's</a></li> 
            <li role="presentation"><a href="#">xxx</a></li> 
            <li role="presentation"><a href="#">xxx</a></li> 
           </ul> 
          </div> 
         </div> 
        </div> 

        <!-- CONTENT --> 
        <div class="col-xs-12 col-md-9 right-content-box"> 
         <div class="col-xs-12"> 
          <ul class="nav nav-pills"> 
           <li role="presentation" class="active"><a href="#">Index</a></li> 
           <li role="presentation"><a href="#">Instellingen</a></li> 
           <li role="presentation"><a href="#">Mijn pagina's</a></li> 
           <li role="presentation"><a href="#">Mijn berichten</a></li> 
           <li role="presentation"><a href="#">Forum</a></li> 
          </ul> 
         </div> 

         <!-- Crumbs --> 
         <div class="col-xs-12"> 
          <ol class="breadcrumb"> 
           <li><a href="#">Zikle</a></li> 
           <li><a href="#">Index</a></li> 
          </ol> 
         </div> 

         <!-- SHOUTS --> 
         <div class="col-xs-2"> 
          <div class="shout-panel2 pull-right"> 
           <div class="shout-user"> 
            <a href="/"><img class="shout-avatar" src="http://www.zikle.nl/userfiles/thumbs/0/2/5/4/02546700.png" width="30" height="30"> 
            <span class="shout-name">Dani&euml;l</span></a> 
           </div> 
          </div> 
         </div> 
         <div class="col-xs-9 col-sm-8"> 
          <div class="panel panel-default shout-panel"> 
           <div class="panel-body shout-body"> 
           <span class="shout-message">Nieuw Zikle design.. omg</span> 
           </div> 
          </div> 
         </div> 
         <div class="col-sm-2 hidden-xs"> 
          <div class="shout-panel2"> 
           <div class="shout-date"> 
            <span>17-9-2015</span> 
           </div> 
          </div> 
         </div> 

         <!-- forum --> 
        <div class="col-xs-12 col-md-12 forum-box"> 
         <div class="forum-panel"> 
          <span></span> 
          <div class="clearfix"></div> 
          <div class="col-xs-6 col-lg-4"> 
           <a href="/">lorum ipsum dolor</a><br> 
           <span style="font-size:11px; color: #222">door: <a href="/">Melanie</a> | <a href="/">Laatste bericht</a> (17-9-2015 | 17:08)</span><br> 
           <br> 
           <a href="/">lorum ipsum dolor</a><br> 
           <span style="font-size:11px; color: #222">door: <a href="/">Jesse</a> | <a href="/">Laatste bericht</a> (17-9-2015 | 17:02)</span><br> 
           <br> 
           <a href="/">lorum ipsum dolor</a><br> 
           <span style="font-size:11px; color: #222">door: <a href="/">Daniel</a> | <a href="/">Laatste bericht</a> (16-9-2015 | 22:20)</span><br> 
           <br> 
           <a href="/">lorum ipsum dolor</a><br> 
           <span style="font-size:11px; color: #222">door: <a href="/">Daan</a> | <a href="/">Laatste bericht</a> (15-9-2015 | 13:58)</span><br> 
           <br> 
           <a href="/">lorum ipsum dolor</a><br> 
           <span style="font-size:11px; color: #222">door: <a href="/">Iwan</a> | <a href="/">Laatste bericht</a> (14-9-2015 | 13:11)</span><br> 

          </div> 

          <div class="col-xs-6 col-lg-4"> 
           <a href="/">lorum ipsum dolor</a><br> 
           <span style="font-size:11px; color: #222">door: <a href="/">Melanie</a> | <a href="/">Laatste bericht</a> (17-9-2015 | 17:08)</span><br> 
           <br> 
           <a href="/">lorum ipsum dolor</a><br> 
           <span style="font-size:11px; color: #222">door: <a href="/">Jesse</a> | <a href="/">Laatste bericht</a> (17-9-2015 | 17:02)</span><br> 
           <br> 
           <a href="/">lorum ipsum dolor</a><br> 
           <span style="font-size:11px; color: #222">door: <a href="/">Daniel</a> | <a href="/">Laatste bericht</a> (16-9-2015 | 22:20)</span><br> 
           <br> 
           <a href="/">lorum ipsum dolor</a><br> 
           <span style="font-size:11px; color: #222">door: <a href="/">Daan</a> | <a href="/">Laatste bericht</a> (15-9-2015 | 13:58)</span><br> 
           <br> 
           <a href="/">lorum ipsum dolor</a><br> 
           <span style="font-size:11px; color: #222">door: <a href="/">Iwan</a> | <a href="/">Laatste bericht</a> (14-9-2015 | 13:11)</span><br> 

          </div> 
          <div class="col-lg-4 visible-lg"> 
           <a href="/">lorum ipsum dolor</a><br> 
           <span style="font-size:11px; color: #222">door: <a href="/">Melanie</a> | <a href="/">Laatste bericht</a> (17-9-2015 | 17:08)</span><br> 
           <br> 
           <a href="/">lorum ipsum dolor</a><br> 
           <span style="font-size:11px; color: #222">door: <a href="/">Jesse</a> | <a href="/">Laatste bericht</a> (17-9-2015 | 17:02)</span><br> 
           <br> 
           <a href="/">lorum ipsum dolor</a><br> 
           <span style="font-size:11px; color: #222">door: <a href="/">Daniel</a> | <a href="/">Laatste bericht</a> (16-9-2015 | 22:20)</span><br> 
           <br> 
           <a href="/">lorum ipsum dolor</a><br> 
           <span style="font-size:11px; color: #222">door: <a href="/">Daan</a> | <a href="/">Laatste bericht</a> (15-9-2015 | 13:58)</span><br> 
           <br> 
           <a href="/">lorum ipsum dolor</a><br> 
           <span style="font-size:11px; color: #222">door: <a href="/">Iwan</a> | <a href="/">Laatste bericht</a> (14-9-2015 | 13:11)</span><br> 

          </div> 
         </div> 
        </div> 

         <!-- footer --> 
         <div class="col-xs-12 col-md-8 col-md-offset-2"> 
          <footer> 
           &copy; Zikle - 2015 Alle rechten voorbehouden. 
          </footer> 
         </div> 
        </div> 
       </div> 

     </div> 
    </div> 

CSS:

html { 
    color: #222; 
    font-size: 1em; 
    line-height: 1.4; 
} 

/* 
* Remove text-shadow in selection highlight: 
* https://twitter.com/miketaylr/status/12228805301 
* 
* These selection rule sets have to be separate. 
* Customize the background color to match your design. 
*/ 

::-moz-selection { 
    background: #b3d4fc; 
    text-shadow: none; 
} 

::selection { 
    background: #b3d4fc; 
    text-shadow: none; 
} 

/* 
* A better looking default horizontal rule 
*/ 

hr { 
    display: block; 
    height: 1px; 
    border: 0; 
    border-top: 1px solid #ccc; 
    margin: 1em 0; 
    padding: 0; 
} 

/* 
* Remove the gap between audio, canvas, iframes, 
* images, videos and the bottom of their containers: 
* https://github.com/h5bp/html5-boilerplate/issues/440 
*/ 

audio, 
canvas, 
iframe, 
img, 
svg, 
video { 
    vertical-align: middle; 
} 

/* 
* Remove default fieldset styles. 
*/ 

fieldset { 
    border: 0; 
    margin: 0; 
    padding: 0; 
} 

/* 
* Allow only vertical resizing of textareas. 
*/ 

textarea { 
    resize: vertical; 
} 

/* ========================================================================== 
    Browser Upgrade Prompt 
    ========================================================================== */ 

.browserupgrade { 
    margin: 0.2em 0; 
    background: #ccc; 
    color: #000; 
    padding: 0.2em 0; 
} 

/* ========================================================================== 
    Zikle 
    ========================================================================== */ 

body, html { 
     width: 100%; 
     height: 100%; 
     overflow: none; 
     margin-top: 2em; 
} 

body { 
     font-size: 14px; 
     font-family: Roboto,arial,sans-serif; 
     color: #111; 
     background-image: url("../img/bg-pattern.gif"); 
} 

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote { 
     margin: 0; padding: 0; border: 0; 
} 

.site-box { 
     background: #fff; 
     border: 1px solid #eee; 
     position: relative; 
     margin: 0 auto; 
     min-width: 0px; 
     min-height: 0px; 
     height: 100%; 
     margin-bottom: 3em; 
     margin-top: 3em; 
} 

.header { 
     position: relative; 
     display: block; 
     border-bottom: 2px solid #e8e8e8; 
     min-height: 55px; 
} 

.header-logo .logo { 
     font-family: 'Lobster', cursive; 
     font-size: 36px; 
     padding-left: 35px; 
} 

.header-search { 
     padding-top: 10px; 
} 

.header-controlpanel { 
     padding-top: 5px; 
     padding-right: 2em; 
} 

.form-control { 
     height: 34px; 
     padding: 6px 12px; 
     font-size: 12px; 
     line-height: 1.42857; 
     color: #555; 
     background-color: #f7f8fa; 
     background-image: none; 
     border: none; 
     border-radius: 0px; 
     box-shadow: none; 
     transition: 0.25s ease-in 0s; 
} 

.form-control:focus { 
     box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.075) inset; 
     outline: 0px none; 
     box-shadow: none; 
     width: 325px; 
} 

.header-search .btn-default { 
     color: #222; 
     background-color: #f7f8fa; 
     border-color: #f7f8fa; 
     transition: 0.25s ease-in 0s; 
} 

.header-search .btn-default:hover { 
     background-color: rgba(0,0,0,0.12); 
} 

footer { 
     text-align: center; 
     padding: 35px; 
     color: #ccc; 
} 

.left-content-box { 
     height: 100%; 
     float: left; 
     position: relative; 
} 

.right-content-box { 

     float: left; 
     position: relative; 
} 

.breadcrumb { 
     border-radius: 0px; 
     background: #f7f8fa; 
} 

.nav-pills > li > a { 
     border-radius: 0px; 
} 
.nav > li > a:focus, .nav > li > a { 
     transition: 0.35s ease; 
} 
.nav > li > a:focus, .nav > li > a:hover { 
     background-color: #F5F5F5; 
} 
.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover { 
     background-color: #337AB7; 
} 

.side-menu { 
     border-right: 2px solid #e8e8e8; 
     background: #f7f8fa; 
     height: 100vh; 
     padding: 15px; 
} 

.side-menu ul { 
     list-style: none; 
     display: inline; 
     vertical-align: top 
} 

.side-menu span.user { 
     display: inline-block; 
     vertical-align: top; 
     line-height: 1.2; 
    font-size: 11px; 
} 

.side-menu span.name { 
     font-size: 14px; 
} 

.side-menu span.title { 
     color: #333; 
} 

.side-menu span.karma { 
     color: green; 
} 

.side-menu span.gray { 
     color: #888; 
} 
.shout-panel { 
     margin-bottom: 20px; 
     border: 1px solid #e7e7e7; 
     border-radius: 4px; 
} 
.shout-panel:before { 
     content: ''; position: absolute; top: 18px; right: 100%; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #e7e7e7; 
} 
.shout-panel2 { 
     display: inline-block; 
} 

.shout-date { 
     padding-top: 15px; 
     padding-left: 15px; 
} 
.shout-user { 
     padding-right: 15px; 
     padding-top: 10px; 
} 
.shout-user img.shout-avatar { 
     border-radius: 50%; 
} 
.shout-date span { 
     color: #888; 
     font-size: 10px; 
} 

.forum-box { 
     margin-left: 20px; 
} 

.extra-panel { 
    background: #f7f8fa; 
     border-left: 1px solid #e8e8e8; 
     border-left: 1px solid #e8e8e8; 
     border-bottom: 1px solid #e8e8e8; 
     position: absolute; 
     height: 100%; 
} 

.center-block { 
     display: block; 
     margin: 0 auto; 
     text-align: center; 
} 
.realign-inline { 
     display: inline; 
     text-align: left; 
} 

[class*="col-"] { 
     padding-right: 0; 
     padding-left: 0; 
} 

/* ========================================================================== 
    Zikle MENU 
    ========================================================================== */ 


/* ========================================================================== 
    Helper classes 
    ========================================================================== */ 

/* 
* Hide visually and from screen readers: 
*/ 

.hidden { 
    display: none !important; 
} 

/* 
* Hide only visually, but have it available for screen readers: 
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility 
*/ 

.visuallyhidden { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
} 

/* 
* Extends the .visuallyhidden class to allow the element 
* to be focusable when navigated to via the keyboard: 
* https://www.drupal.org/node/897638 
*/ 

.visuallyhidden.focusable:active, 
.visuallyhidden.focusable:focus { 
    clip: auto; 
    height: auto; 
    margin: 0; 
    overflow: visible; 
    position: static; 
    width: auto; 
} 

/* 
* Hide visually and from screen readers, but maintain layout 
*/ 

.invisible { 
    visibility: hidden; 
} 

/* 
* Clearfix: contain floats 
* 
* For modern browsers 
* 1. The space content is one way to avoid an Opera bug when the 
* `contenteditable` attribute is included anywhere else in the document. 
* Otherwise it causes space to appear at the top and bottom of elements 
* that receive the `clearfix` class. 
* 2. The use of `table` rather than `block` is only necessary if using 
* `:before` to contain the top-margins of child elements. 
*/ 

.clearfix:before, 
.clearfix:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.clearfix:after { 
    clear: both; 
} 

/* ========================================================================== 
    EXAMPLE Media Queries for Responsive Design. 
    These examples override the primary ('mobile first') styles. 
    Modify as content requires. 
    ========================================================================== */ 

@media only screen and (min-width: 35em) { 
    /* Style adjustments for viewports that meet the condition */ 
} 

@media print, 
     (-webkit-min-device-pixel-ratio: 1.25), 
     (min-resolution: 1.25dppx), 
     (min-resolution: 120dpi) { 
    /* Style adjustments for high resolution devices */ 
} 

/* ========================================================================== 
    Print styles. 
    Inlined to avoid the additional HTTP request: 
    http://www.phpied.com/delay-loading-your-print-css/ 
    ========================================================================== */ 

@media print { 
    *, 
    *:before, 
    *:after { 
     background: transparent !important; 
     color: #000 !important; /* Black prints faster: 
            http://www.sanbeiji.com/archives/953 */ 
     box-shadow: none !important; 
     text-shadow: none !important; 
    } 

    a, 
    a:visited { 
     text-decoration: underline; 
    } 

    a[href]:after { 
     content: " (" attr(href) ")"; 
    } 

    abbr[title]:after { 
     content: " (" attr(title) ")"; 
    } 

    /* 
    * Don't show links that are fragment identifiers, 
    * or use the `javascript:` pseudo protocol 
    */ 

    a[href^="#"]:after, 
    a[href^="javascript:"]:after { 
     content: ""; 
    } 

    pre, 
    blockquote { 
     border: 1px solid #999; 
     page-break-inside: avoid; 
    } 

    /* 
    * Printing Tables: 
    * http://css-discuss.incutio.com/wiki/Printing_Tables 
    */ 

    thead { 
     display: table-header-group; 
    } 

    tr, 
    img { 
     page-break-inside: avoid; 
    } 

    img { 
     max-width: 100% !important; 
    } 

    p, 
    h2, 
    h3 { 
     orphans: 3; 
     widows: 3; 
    } 

    h2, 
    h3 { 
     page-break-after: avoid; 
    } 
} 

Возможно ли это?

код CSS: http://pastebin.com/3hQ1jSsa

Answer 1

Вы столкнулись с известной проблемой. В настоящее время это не изящное решение, но у вас есть несколько вариантов.

Существует несколько CSS-хаков, которые включают настройку отображения в виде таблицы или воспроизведение с полями и высотами отступов. Они описаны здесь:

https://stackoverflow.com/a/19695851/4907529

Существует также способ JavaScript разрешения его, в результате чего на странице загрузки высоты боковой панели динамически обновляется, чтобы соответствовать основной области контента:

https://jsfiddle.net/use97noq/

Это в основном использует следующую функцию для запуска при загрузке и на странице изменения размера, чтобы соответствовать высоте основного содержимого тела:

function setHeight(elementToResize, elementToMatch){ 
    $(elementToResize).height(elementToMatch.height()); 
} 

Как я уже сказал, нет изящного способа его решения (по крайней мере, до тех пор, пока display:flex не будет лучше поддерживать), вам просто нужно взять свой выбор из лучших плохих узлов в настоящее время.

Answer 2

Вы можете попробовать что-то вроде этого:

.parent { 
    position: relative; 
    height:100%; 
} 

.child { 
    position: absolute; 
    background-color:Your Color Here; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

Answer 3

Дайте строку, содержащую на боковой панели класса, такие как боковой панели-контейнера

Затем добавьте этот CSS

.sidebar-container{ 
    overflow-y: hidden; 
} 
.left-content-box{ 
    height: 9999px; 
} 

Это немного неортодоксально, но это было бы легко er, чтобы помочь, если у меня есть доступ к скрипке или ссылке на сайт. Но это сработало для меня несколько раз.