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％背景颜色的高度

回答

相关问题