1
私はそこに多くの記事があることを知っていますが、それぞれのソリューションを試してみましたが失敗しました。私は入手できますどのように右DIV QuestionFormRightが何をしhttps://jsfiddle.net/dwzndscm/ブートストラップ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>
：（私もしようとしています）私はCSSを理解するのが特に良好ではないですフェア警告が
私はこのコードを持っています100％の高さのため、背景を塗りつぶします。
注：Page Widthの自動サイズは、ページを左上から上/下に積み重ねるのに十分な幅でなければなりません。
確かに私はテーブルでできますが、しないように努力しました。
ご協力いただければ幸いです。
フィドルはv3.3.7を使用していますが、問題は、ブートストラップ4タグ付けされていますか？ BS4を使用している場合、flexboxのおかげで自動的にフルハイトhttps://www.codeply.com/go/p9n7tiJFFIになります。 – ZimSystem
あなたは本当に正しいです、ごめんなさいブートストラップのバージョンで混乱していた。私はGAが4だと思っていましたが、私はその3を推測します。私はAlpha 4に切り替えました。私は十分に満足しています。 –