引導程序甚至列高度

-1

我使用引導程序來創建主頁，其中包含我構建的小標題和側欄。我希望身體都是一個身高。我原本是用overflow: hidden寫的，但我不想那樣做，因爲內容會在較小的屏幕上被推下頁面，我希望觀衆能夠查看它們。目前，該頁面的底部如下所示：with the light green extending further than the sidebar。無論窗口大小如何，我都希望它們的高度相同。我注意到，這似乎很明顯，淺綠色延伸的頭數相同，但因爲它是一個響應式佈局，所以這個數量會發生變化。我試圖使用display: flex無濟於事，我試過表格佈局，我試圖設置高度爲特定的值，這也不起作用。的HTML：引導程序甚至列高度

<div class="container-fluid"> 
    <div class="row" id="headers"> 
     <div class="menu col-xs-3"> 
      <div> 
       <div class="col-xs-12 menu-item"><a id="about-me-nav">About Me</a></div> 
       <div class="col-xs-12 menu-item"><a>Portfolio</a></div> 
       <div class="col-xs-12 menu-item"><a href="./resume.html">Resume</a></div> 
       <div class="col-xs-12 menu-item"><a>Contact</a></div> 
      </div> 
     </div> 
     <div class="col-xs-9 main"> 
      <h1>Header</h1> 
     </div> 
     <div class="col-xs-9 content auto-content-div"> 
     </div>

和CSS：

body, html { 
    height: 100%; 
    width: 100%; 
} 

#headers, .container-fluid { 
    height: 100%; 
} 

.menu { 
    background: url("http://www.space.com/images/i/000/041/737/original/milky-way-chile-praniski.jpg") no-repeat; 
    height: 100%; 
} 

.main { 
    background-color: #021615; 
    text-align: center; 
} 

.menu-item:first-child { 
    padding-top: 4.5em; 
} 

.menu-item { 
    padding-top: 4em; 
    text-align: center; 
} 

.content { 
    height: 100%; 
    background-color: rgba(12, 122, 86, 0.32) ; 
}

請幫助！

來源

2016-11-23 ctaylor

可能的重複[如何使Bootstrap列高度相同？]（http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-高度） – A1raa

我花了數小時查看堆棧溢出問題，正如我在這裏提到的那樣，該答案無效。 – ctaylor

答案確實起作用，很可能你只是不理解所使用的方法。我用你的代碼把它放在筆裏面。

https://jsfiddle.net/51hmyjpx/3/

<div class="container-fluid"> 
<div class="row" id="headers"> 
    <div class="menu col-xs-3"> 
     <div class="column"> 
      <div class="col-xs-12 menu-item"><a id="about-me-nav">About Me</a></div> 
      <div class="col-xs-12 menu-item"><a>Portfolio</a></div> 
      <div class="col-xs-12 menu-item"><a href="./resume.html">Resume</a></div> 
      <div class="col-xs-12 menu-item"><a>Contact</a></div> 
     </div> 
    </div> 
    <div class="col-xs-9 main"> 
     <h1>Header</h1> 
    </div> 
    <div class="col-xs-9 content auto-content-div column"> 
    </div>

的column類添加到您的div包裝任何列你想在同一高度，並設置padding-bottom: 100%，然後「誘騙瀏覽器」，以爲他們是不是高大使用margin-bottom: -100%。

.column { 
    padding-bottom: 100%; 
    margin-bottom: -100%; 
}

然後，我們將overflow: hidden;添加到容器以隱藏它。

#headers, .container-fluid { 
    height: 100%; 
    overflow: hidden; 
}

我不知道你在哪裏，用你的代碼去，因爲它看起來很奇怪，當你打了xs引導視口。你應該給導航欄一個最小寬度，這樣它不會縮小到小於文本佔用空間的寬度，但我會留下讓你決定。

來源

2016-11-23 19:50:01 A1raa

引導程序甚至列高度

回答

相關問題