ブロックオーバーフローする親ブロック

私は実際にブートストラップでコードする方法を学んでいて、かなり変わったことが起こっています。タイトル行と中行の基本テンプレートを作成したいと思います。中央の行は、バックグラウンドではグレーでなければならず、中心に白い（コンテンツがある場合）必要があります。中間の行はフレックス・グロースを持ち、バックグラウンド・カラーはコンテンツ・サイズに依存せずどこにでもあります。しかし、このコンテンツが大きければ、それは行をオーバーフローし、なぜ私は理解できません。ブロックオーバーフローする親ブロック

これは私のコードです：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Potatoe Home</title> 
     <link rel="stylesheet" href="path/to/file/file.css" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    </head> 
    <body class = "container-fluid"> 
     <div class = "row titleRow"> 
      <div class = "col-sm-3"> 
      </div> 
      <div class = "col-sm-6"> 
       <div id="titleArea"> 
        <h1 id="title">Potatoe</h1> 
        <p>blablabla</p> 
       </div> 
      </div> 
      <div class = "col-sm-3"> 
      </div> 
     </div> 
     <div class = "row scndRow"> 
      <div class = "col-sm-3"> 
      </div> 
      <div class = "col-sm-6 middleColumn"> 
       <div id="testBlock"> 
       </div> 
      </div> 
      <div class = "col-sm-3"> 
     </div> 
    </body> 
</html>

私のCSS：

h1[id=title] 
{ 
    font-size: 200%;  
} 

.titleRow 
{ 
    background-color: red; 
    color: white; 
    font-size: 200%; 
} 

.scndRow 
{ 
    flex-grow: 1; 
    display: flex; 
    background-color: #D0D0D0; 
} 

.middleColumn 
{ 
    background-color: white; 
} 

#testBlock 
{ 
    width: 20%; 
    height: 900px; 
    background-color: blue; 
} 

html, body 
{ 
    height: 100%; 
} 

body 
{ 
    display: flex; 
    flex-direction: column; 
}

my display

あなたの助けに感謝

出典

2016-07-30 FTW

オーバーフローするケースを教えてください。だから私たちはまさにあなたが防止しようとしているものです。 – ScientiaEtVeritas

testBlockの高さが大きすぎて画面に完全に見えない場合。スクロールバーを使用すると、スクリーンショットのようにオーバーフローが表示されます。実際には、より明らかです。 .middleColumn { \t背景色：緑; } - > http://imgur.com/a5oLMI8 問題の1つは、このオーバーフローがすべてのブラウザで起こっていないことです。実際には私のためにクロムの上にあります。 – FTW

さて問題解決でそれを見る：私は高さを置き換え：最小高さ100重量％：100％：（HTMLおよびボディ用）100％

を私は高さを設定します、クロムはそれをビューポートの100％にしたいと考えています。私のtestBlockが大きければ、それは行を大きくして体を作るはずです。体の高さは100％より大きくなります。そうすることはできませんし、testBlockはオーバーフローします。

ありがとうございました:)

出典

2016-07-30 17:49:08 FTW

;）+1 –

何クラスscndRowにflexプロパティの削除について？
となるようにheight:100%を要素に設定しますか？

scndRowに指定する必要があります。これは2つの他のcolunmクラスをこれらの列にラップしています。

.scndRow{ 
    height:100%; 
} 

.scndRow .col-sm-3 
{ 
    /*flex-grow: 1;*/ 
    /*display: flex;*/ 
    min-height:100%; 
    background-color: #D0D0D0; 
} 

.middleColumn 
{ 
    min-height:100%; 
    background-color: white; 
}

ただ、例えば、私はあなたがtestBlockでより多くのコンテンツの効果を確認するためにjQueryの機能を追加しました。

updated Fiddle

出典

2016-07-30 03:09:59

コンテンツをシミュレートするために高さ：900pxを指定しました。実際に私はこれを持っていません。オーバーフローが発生したときに、より正確に別のコードを作成しました。 – FTW

ok ..だから、 'max-height：100％;'と 'overflow：hidden'はどうでしょうか？私はあなたがオーバーフローが隠されることを望んでいないと思います...実際の問題定義であなたの質問を正確に教えてください。 –

ブロック#middleColumnには、入力などのさまざまなものが含まれています。内部に詰め物が多すぎると、このブロックを単純に大きくする必要があります（行も同様ですが）。確かに、私はオーバーフローが隠されることを望んでいません：/ – FTW

ブロックオーバーフローする親ブロック

答えて

関連する問題