塊滿溢父塊

我實際上在學習如何使用bootstrap進行編碼，而且發生了一些非常奇怪的事情。我想建立一個標題行和中間行的基本模板。中間的行在背景上必須是灰色的，而在中心（內容在哪裏）是白色的。中間一行有一個flex-grow，這樣背景顏色無處不在，不僅取決於內容大小。但是，當這個內容很大時，它會溢出行，我不知道爲什麼。塊滿溢父塊

這是我的代碼：

<!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 background-color：green; } - > http://imgur.com/a5oLMI8 其中一個問題是，這種溢出不會發生在每個瀏覽器上，實際上只是在我的Chrome上 – FTW

好的問題解決：我取代了高度：100％通過最小高度：100％（對於html和身體）

當我設定的高度：100％，鉻認爲我想它是100％的視口。當我的testBlock更大時，它應該使行更大，因此身體。所以身體的高度會大於100％。所以它不能，並且testBlock溢出。

感謝您的幫助:)

來源

2016-07-30 17:49:08 FTW

很高興看到這一點。 ;）+1 –

怎麼樣去除flex屬性scndRow類？
並將height:100%設置爲必須是？

您必須將其指定爲scndRow，它將兩個其他colunm類AND包裝到這些列中。

.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; 
}

只是爲了舉例來說，我添加了一個jQuery的功能，讓你看到更多的內容在testBlock效果。

看到它在updated Fiddle

來源

2016-07-30 03:09:59

我指定了一個高度：900px來模擬一個內容。在實際中，我沒有這個當然，我只是做了另一個代碼，看看更確切地說，當溢出發生 – FTW

好吧。那麼'max-height：100％;'和'overflow：hidden'呢？我想你不想讓溢出隱藏起來......你能否用一個真正的問題定義來確定你的問題？ –

塊#middleColumn包含各種東西，如輸入等。當內部的東西太多時，它應該簡單地使這個塊更大（和行），但它不會。的確，我不希望溢出隱藏：/ – FTW

回答

相關問題