自举行重叠

我遇到问题。我试图让4行的bootstrap网格系统，但问题是一些行重叠。我不知道这个问题来自哪里。这个小提琴显示了我的问题自举行重叠

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>

，如果您有任何想法，请帮我解决这个问题。

来源

2017-08-15 zakaria mouqcit

这是由绝对定位造成的。你能解释一下你使用的是什么吗？ – ACJ

您需要删除的位置是：绝对

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>

来源

2017-08-15 09:06:07

你可以给我们添加一些关于你在OP代码中添加的内容的解释吗？你为什么添加它？ – Swellar

这是绝对定位谁给了这么糟糕的visulisation。 –

回答

相关问题