0
我試圖創建一個模式來容納內容。它似乎只創建一個頁面的內容價值，而其餘的內容只是不在父div中。Bootstrap Modal Only顯示部分內容
這裏是模態的HTML：
<div id="tr-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-dismiss">
<button type="button" class="close closeModal" data-dismiss="modal">
<i class="fa fa-times"></i>
</button>
<div class="modal-header profiler-header" id="headerView"><div>
<div id="question-progress-bar"><div>
<div class="progress active">
<div id="bar" class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 16px;">
</div>
</div>
</div>
</div>
</div>
<div class="tr-modal-content">
<div class="content-container">
<div id="question-number"></div>
<div id="progress-number"></div>
<div id="question-title">
<label class="control-label">From this list, which one best describes you?</label>
</div>
</div>
<div id="question-body">
<form class="form-horizontal">
<div data-fields="">
<div class="form-field-question-radio control-group form-field" data-field="">
<div id="tr-modal-radio-group" data-input="">
<label class="radio">
<input type="radio" name="field-input-question-radio" id="field-input-question-radio-0" value="qx100-0">African American/Black
</label>
<label class="radio">
<input type="radio" name="field-input-question-radio" id="field-input-question-radio-1" value="qx100-1">Asian/Asian American</label>
<label class="radio">
<input type="radio" name="field-input-question-radio" id="field-input-question-radio-2" value="qx100-2">Caucasian/White
</label>
<label class="radio">
<input type="radio" name="field-input-question-radio" id="field-input-question-radio-3" value="qx100-3">Native American, Inuit or Aleut</label>
<label class="radio">
<input type="radio" name="field-input-question-radio" id="field-input-question-radio-4" value="qx100-8">Native Hawaiian or Pacific Islander
</label>
<label class="radio">
<input type="radio" name="field-input-question-radio" id="field-input-question-radio-5" value="qx100-7">Hispanic or Latino origin
</label>
<label class="radio">
<input type="radio" name="field-input-question-radio" id="field-input-question-radio-6" value="qx100-4">Mixed Race
</label>
<label class="radio">
<input type="radio" name="field-input-question-radio" id="field-input-question-radio-7" value="qx100-5">Other
</label>
<label class="radio">
<input type="radio" name="field-input-question-radio" id="field-input-question-radio-8" value="qx100-6">Prefer not to Answer
</label>
<label class="radio">
<input type="radio" name="field-input-question-radio" id="field-input-question-radio-0" value="qx100-0">African American/Black
</label>
<label class="radio">
<input type="radio" name="field-input-question-radio" id="field-input-question-radio-1" value="qx100-1">Asian/Asian American</label>
<label class="radio">
<input type="radio" name="field-input-question-radio" id="field-input-question-radio-2" value="qx100-2">Caucasian/White
</label>
<label class="radio">
<input type="radio" name="field-input-question-radio" id="field-input-question-radio-3" value="qx100-3">Native American, Inuit or Aleut</label>
<label class="radio">
<input type="radio" name="field-input-question-radio" id="field-input-question-radio-4" value="qx100-8">Native Hawaiian or Pacific Islander
</label>
<label class="radio">
<input type="radio" name="field-input-question-radio" id="field-input-question-radio-5" value="qx100-7">Hispanic or Latino origin
</label>
<label class="radio">
<input type="radio" name="field-input-question-radio" id="field-input-question-radio-6" value="qx100-4">Mixed Race
</label>
<label class="radio">
<input type="radio" name="field-input-question-radio" id="field-input-question-radio-7" value="qx100-5">Other
</label>
<label class="radio">
<input type="radio" name="field-input-question-radio" id="field-input-question-radio-8" value="qx100-6">Prefer not to Answer
</label>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<div class="modal-table">
<button id="modal-continue-button" type="button" class="btn btn-primary">Continue</button>
</div>
</div>
</div>
</div>
</div>
而CSS：
#modal-continue-button {
color: #f6fcfc;
background-color: #17b4b3;
}
.radio {
border: 1px solid #777777 !important;
border-radius: 6px;
padding-left: 35px !important;
margin: 0 .5em !important;
}
.progress {
height: 16px;
background-color: #d1f0f0;
border-radius: 2em !important;
width: 72%;
margin: 24px auto;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
overflow: hidden;
max-width: 400px;
}
#bar {
background-color: #17b4b3;
border-bottom-right-radius: 2em;
border-top-right-radius: 2em;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.progress.active .progress-bar, .progress-bar.active {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.progress-bar {
transition: 0.1s linear;
float: left;
width: 0%;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
}
#question-progress-bar {
display: block;
position: relative;
right: 3px;
z-index: 5;
width: 100%;
border-bottom: 1px solid #dddddd;
padding-left: 3em;
}
#tr-modal .modal-footer {
text-align: center;
border: none;
padding-top: 0em;
padding-bottom: 0em;
height: 100%;
/*display: table;*/
width: 100%;
}
#tr-modal .modal-header {
padding: 0px;
border: none;
margin-bottom: 0px;
/*display: inline-block;*/
}
.modal-backdrop.in {
filter: alpha(opacity=50);
opacity: .1;
will-change: opacity;
transition-property: opacity;
transition-duration: 0.3s;
}
.modal-backdrop, .modal-backdrop.fade.in {
opacity: 0.65 !important;
background-color: #555555;
filter: alpha(opacity=70);
}
.modal-dialog {
height: 100%;
width: 100%;
margin: 0%;
}
#tr-modal {
text-align: center;
}
#tr-modal .closeModal {
color: #666;
opacity: 1;
margin-top: 1em;
margin-right: 1em;
}
.closeModal:hover {
color: #333;
}
#tr-modal #modal-continue-button {
text-align: center;
vertical-align: bottom;
}
.modal-dismiss, .modal-header, .modal-footer, .modal-content, #tr-modal {
height: 100%;
}
.tr-modal-content {
text-align: center;
width: 100%;
}
#question-body .text-input {
width: 210px;
border-width: 1px;
border-style: solid;
border-radius: 6px;
padding: 0.8em;
background-color: #FFFFFF;
border-color: #dddddd;
color: #777777;
}
.form-field-month .controls {
padding-left: 0px;
}
#tr-modal-radio-group .radio {
text-align: left;
margin: 10px !important;
padding: 10px;
font-family: Montserrat-Regular, Verdana, sans-serif;
color: #777777;
font-weight: 100;
font-size: 14px;
}
.tr-modal-content {
max-width: 30em;
margin: auto;
}
如果內容不是一個大名單，可完全適應頁面，它很好用： 
即使需要滾動，我如何才能將所有內容顯示在div容器內的任何想法？它似乎停止在modal-dialog的底部，儘管它被設置爲具有height: 100%;
你先生是驚人的！兩者都有效，但我認爲將高度設置爲自動效果最好（底部沒有額外的空白區域）。感謝您的徹底解答！ –
隨時好友..快樂編碼.. :) –