我有一个问题。我尝试使用4行制作自举网格系统，但问题是某些行重叠。我不知道这个问题出在哪里。 这个小提琴显示了我的问题
html, body{
width: 100% !important;
height: 100% !important;
padding:0;
position: relative;
}
#header-sec{
position: absolute;
/*top: 0;*/
width: 100%;
background-color: green;
height : 15%;
min-height: 30px;
}
#footer-sec{
position: absolute;
bottom: 0;
width: 100%;
background-color: black;
height : 5%;
}
#data-viewer{
height : 60%;
}
#zone-geog{
height : 20%;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div id="header-sec" class="row">
<div class="col-sm-12">header</div>
</div>
<div id="zone-geog" class="row">
<div class="col-sm-12">
zone geog
</div>
</div>
<div id="data-viewer" class="row bg-primary">
<div class="col-sm-9">map</div>
<div class="col-sm-3">idica evolu</div>
</div>
<div id="footer-sec" class="row">
<div class="col-sm-12">footer</div>
</div>
</div>
</body>
如果您有任何想法，请帮我解决这个问题。
答案 0 :(得分：1)
你需要删除position：absolute
html, body{
width: 100% !important;
height: 100% !important;
padding:0;
position: relative;
}
#header-sec{
width: 100%;
background-color: green !important;
height : 15%;
min-height: 30px;
}
#footer-sec{
position: absolute;
bottom: 0;
width: 100%;
background-color: black;
height : 5%;
}
#data-viewer{
height : 60%;
}
#zone-geog{
height : 20%;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div id="header-sec" class="row">
<div class="col-sm-12">header</div>
</div>
<div id="zone-geog" class="row">
<div class="col-sm-12">
zone geog
</div>
</div>
<div id="data-viewer" class="row bg-primary">
<div class="col-sm-9">map</div>
<div class="col-sm-3">idica evolu</div>
</div>
<div id="footer-sec" class="row">
<div class="col-sm-12">footer</div>
</div>
</div>
</body>