Bootstrap even column height

Question

Я использую bootstrap, чтобы сделать домашнюю страницу, где у меня есть небольшой заголовок и боковая панель, которую я создал. Я хочу, чтобы тело было одной высоты. Я изначально написал его с 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) ; 
} 

ПОЖАЛУЙСТА ПОМОГИТЕ!

Answer 1

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

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 начальной загрузки окна просмотра. Вы должны дать столбцу nav минимальную ширину, чтобы она не уменьшалась до ширины меньше, чем пространство, которое занимает текст, но я оставлю это для вас.