I have the following fiddle当你运行它时,它会显示一个红色边框,表示我的 div 有问题。 我真的希望我的 div 位于其上方左右两侧的 2 个 div 之下。
有问题的 div 是这样的:
<div id="Tabs" role="tabpanel" style=" position:relative; width:100%; border:1px solid red;">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#sqlOutput" aria-controls="sqlOutput" role="tab" data-toggle="tab">"U or R" Table Scripts</a></li>
<li><a href="#sqlCRUD" aria-controls="sqlCRUD" role="tab" data-toggle="tab">"U or R" Table CRUD</a></li>
<li><a href="#sqlETable" aria-controls="sqlETable" role="tab" data-toggle="tab">"E" Table Scripts</a></li>
<li><a href="#xTableInserts" aria-controls="xtablecrud" role="tab" data-toggle="tab">"X" Table Scripts</a></li>
<li><a href="#JSONDATA" aria-controls="JSONDATA" role="tab" data-toggle="tab">JSON DATA</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content" style="padding-top: 20px; overflow:auto;">
<div role="tabpanel" class="tab-pane active" id="sqlOutput" ng-bind-html="sqlOutput | unsafe" style="height:200px; overflow:auto;"></div>
<div role="tabpanel" class="tab-pane" id="sqlCRUD" ng-bind-html="sqlCRUD | unsafe" style="height:200px; overflow:auto;"></div>
<div role="tabpanel" class="tab-pane active" id="sqlETable" ng-bind-html="sqlETable | unsafe" style="height:200px; overflow:auto;"></div>
<div role="tabpanel" class="tab-pane active" id="xTableInserts" ng-bind-html="xTableInserts | unsafe" style="height:200px; overflow:auto;"></div>
<div role="tabpanel" class="tab-pane active" id="JSONDATA" ng-bind-html="JSONDATA | unsafe" style="height:200px; overflow:auto;"></div>
</div>
</div>
请告知我需要更改什么?您可能会注意到我的 fiddle 中有重复的正文说明。我有 dashboard.css(bootstrap 主题)和 bootstrap.css。
最佳答案
您需要清除 float 元素。在这种情况下,您可以使用 <div class="clearfix"></div>
在两列和你的红色 div 之间。我建议使用 bootstrap grid虽然。
关于html - css div 占据整个屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35351210/