ブートストラップ偶数列の高さ

Question

ブートストラップを使用して、私が構築した小さなヘッダーとサイドバーがあるホームページを作っています。私は身体をすべて一つの高さにしたい。 私はもともと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> 

あなたdivラッピングにあなたが同じ高さにしたいとpadding-bottom: 100%を設定し、その後、彼らはその背の高いmargin-bottom: -100%を使用していないという考えに「ブラウザをだまし」任意の列をcolumnクラスを追加します。

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

次に、overflow: hidden;を追加して非表示にします。

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

私はあなたがxsブートストラップ・ビューポートを打ったとき、それは奇妙に見えるよう、あなたのコードで行っていた場所はわかりません。あなたは、テキストが占めるスペースよりも狭い幅に縮小されないように、navカラムに最小幅を与えるべきですが、私はあなたが決定するためにそれを残します。