Question

我知道有很多关于此的帖子，但我尝试了每个解决方案并失败了。公平警告我并不是特别擅长理解CSS（我正在尝试）

我有这段代码：

<!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％的高度，以便填充背景。

注意：页面宽度自动调整大小，因此页面必须足够宽，以便向左或向上/向下堆叠。

当然，我可以用一张桌子来做，但努力不去。

非常感谢任何帮助。

Answer 1

您可以使用CSS flexbox，特别是flex: 1，以便.QuestionFormRight能够在相同的基础上增长。有关工作示例，请参阅下面的代码段。

希望这有帮助。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

尝试使用height: 100vh我刚刚使用它并且它有效。你的jsfiddle链接不起作用。

Bootstrap DIV未填充100％高度以用于背景色

2 个答案: