引導3側板父

的100％的高度是我的情況引導3側板父

我需要的邊欄往下走一路，但我不能讓它這樣做。我也嘗試過在這裏搜索。這可能是非常簡單的，我看不到它，因爲我一直在研究這一點。

我的代碼：

 <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

來源

2015-09-17 Jofairden

嗯，我們真的需要看到你的CSS，但是'高度：100vh;'可能會這樣做。 – TylerH

@TylerH'height：100vh'用於將div設置爲瀏覽器窗口的高度。如果元素將被定位爲'fixed：fixed'，這將是一個很好的解決方案。 –

@ether我知道什麼'高度：100vh'呢。正如我在第一條評論中所說的，我們需要看到OP的CSS。 – TylerH

您遇到了一個衆所周知的問題。目前還沒有一個優雅的解決方案來解決這個問題，但是你有幾個選擇。

有幾個CSS hacks涉及將顯示設置爲表格或使用邊距和填充高度進行播放。這些都記錄在這裏：

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

也有解決它，從而頁面上加載側邊欄的高度動態更新以匹配主要內容區域的一個JavaScript方法：

https://jsfiddle.net/use97noq/

這基本上使用下面的函數，在負載和頁面大小調整運行相匹配的主要內容體的高度：

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

就像我說過的，沒有優雅的方法來解決它（至少支持display:flex得到更好的支持），你只需要從當前最糟糕的一羣中挑選出來。

來源

2015-09-17 21:39:29

好的，所以我嘗試了你鏈接的例子，他們都沒有工作。至少，它們不會讓高度達到100％，但它們只是簡化了我的設計，例如所有東西都堆疊在一起。您的JavaScript確實有效，但我並不喜歡依賴於JavaScript。它實際上使框有點大，但我只是增加了溢出：隱藏 – Jofairden

@mrbanaan - 沒問題..鏈接的例子應該工作，但取決於你應用它的類，它可能會混淆頁面上的其他樣式。對於JavaScript解決方案，您可以嘗試將「height」函數中的一個更改爲「innerHeight」或「outerHeight」。我知道，這些解決方案都不是很好（我討厭使用不必要的JavaScript），但這是我們目前需要處理的。 –

你可以嘗試這樣的事情：

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

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

來源

2015-09-17 20:04:16

不，我得到這個：http://i.imgur.com/6G7uhZo。png – Jofairden

@mrbanaan側杆是否會被修復？ –

？酒吧總是在左邊，但它需要他父母的高度（你幾乎看不見的白色盒子）它有點像youtube邊欄 – Jofairden

得包含側邊欄類，如側邊欄容器行

然後加入這個CSS

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

這有點不正統，但它會很容易呃，如果我有權訪問小提琴或鏈接到網站，可以提供幫助。但是這對我來說已經有好幾次了。

來源

2015-09-17 20:52:05

回答

相關問題