Bootstrap DIV沒有填充100％背景顏色的高度

我知道有很多關於此的帖子，但我嘗試了每個解決方案並失敗。公平的警告我不理解CSS特別好（我雖然想）Bootstrap DIV沒有填充100％背景顏色的高度

我有這樣的代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Question Form Modal</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 
<style> 
    .QuestionFormLeft { 
     background-color:white; 
    } 
    .QuestionFormRight { 
     padding-top: 0; 
     background-color:#DBDDDE; 
     height: 100%; 

    } 
    .QuestionFormRight p:first-child { 
     margin-top: 20px; 
    } 
    .QuestionFormRow { 
     border-bottom: 3px solid #DBDDDE; 
    } 
</style> 
<div class="container-fluid"> 
    <div class="row QuestionFormRow"> 
    <div class="col-sm-4 QuestionFormLeft"> 
     <h4>Question 1 Title</h4> 
     <p>Some words and description. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div> 
    <div class="col-sm-8 QuestionFormRight"> 
     <p>Please select a option from below:</p> 
     <select> 
      <option>Awesomeness</option> 
      <option>Greatness</option> 
     </select> 
    </div> 
    </div> 
    <div class="row QuestionFormRow"> 
    <div class="col-sm-4 QuestionFormLeft"> 
     <h4>Question 2 Title</h4> 
     <p>Some words and description. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div> 
    <div class="col-sm-8 QuestionFormRight"> 
     <p>Please select a option from below:</p> 
     <select> 
      <option>Awesomeness</option> 
      <option>Greatness</option> 
     </select> 
    </div> 
    </div> 

</div> 

</body> 
</html>

另外這裏：https://jsfiddle.net/dwzndscm/

我如何得到正確的DIV QuestionFormRight做100％的高度，所以它會填充背景。

注意：頁面寬度自動調整大小，因此頁面必須寬到足以堆疊左右和頂部/底部。

當然，我可以做一個表，但努力不去。

任何幫助將不勝感激。

來源

2017-07-15 Eric Weintraub

小提琴使用v3.3.7，但問題是標籤引導4？如果您使用BS4，感謝flexbox，它將自動變爲全高https://www.codeply.com/go/p9n7tiJFFI。 – ZimSystem

你是絕對正確的，抱歉讓Bootstrap版本感到困惑。我認爲GA是4，但我猜想它是3.我切換到Alpha 4，並確信它的工作非常棒。我對此感到滿意。 –

您可以使用CSS flexbox，特別是flex: 1，以便.QuestionFormRight能夠在相同的基礎上增長。查看下面的代碼片段以獲得一個工作示例。

希望這會有所幫助。

.QuestionFormLeft { 
 
    background-color: white; 
 
} 
 

 
.QuestionFormRight { 
 
    padding-top: 0; 
 
    background-color: #DBDDDE; 
 
    display: flex; 
 
    flex: 1; 
 
    align-items: flex-start; 
 
    flex-direction: column; 
 
} 
 

 
.QuestionFormRight p:first-child { 
 
    margin-top: 20px; 
 
} 
 

 
.QuestionFormRow { 
 
    border-bottom: 3px solid #DBDDDE; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex: 1; 
 
}

<html lang="en"> 
 

 
<head> 
 
    <title>Question Form Modal</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div class="container-fluid"> 
 
    <div class="row QuestionFormRow"> 
 
     <div class="col-sm-4 QuestionFormLeft"> 
 
     <h4>Question 1 Title</h4> 
 
     <p>Some words and description. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     </div> 
 
     <div class="col-sm-8 QuestionFormRight"> 
 
     <p>Please select a option from below:</p> 
 
     <select> 
 
      <option>Awesomeness</option> 
 
      <option>Greatness</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
    <div class="row QuestionFormRow"> 
 
     <div class="col-sm-4 QuestionFormLeft"> 
 
     <h4>Question 2 Title</h4> 
 
     <p>Some words and description. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     </div> 
 
     <div class="col-sm-8 QuestionFormRight"> 
 
     <p>Please select a option from below:</p> 
 
     <select> 
 
      <option>Awesomeness</option> 
 
      <option>Greatness</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

來源

2017-07-15 13:01:10 Cristophs0n

嘗試使用height: 100vh我剛剛使用它，它的工作。你的jsfiddle鏈接不起作用。

來源

2017-07-15 11:47:50 Mohale

Bootstrap DIV沒有填充100％背景顏色的高度

回答

相關問題