自舉行重疊

我遇到問題。我試圖讓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。 –

回答

相關問題