1. 首頁
  2. 問答
  3. 如何讓這些div集響應？

如何讓這些div集響應？

2017-10-04 69 views
0

似乎不管我做什麼我無法得到這套特殊的div來填充視口..我嘗試用負值推動..但是要麼通過屏幕。我的意圖是保持陰影......並仍然填滿屏幕。應該只有一個滾動條，多數民衆贊成在裏面#divBody如何讓這些div集響應？

我已經能夠創建粘腳，但我失去了我的頭使用推div。

我真的很喜歡這個頁眉/ body/footer佈局的佈局。希望有人能幫助我。

#mainContainer { 
 
    height: 100%; 
 
    margin: 2%; 
 
    border: 1px solid white; 
 
    background-color: white; 
 
    box-shadow: 0 2px 7px #292929; 
 
    -moz-box-shadow: 0 2px 7px #292929; 
 
    -webkit-box-shadow: 0 2px 7px #292929; 
 
    border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
} 
 
    #divBody { 
 
     margin-top: 0; 
 
     min-height: 150px; 
 
     max-height: 500px; 
 
     overflow: auto; 
 
    } 
 
    
 
    #divBody, 
 
    #divHeader, 
 
    #divFooter { 
 
     padding: 1px; 
 
    } 
 
    
 
    #divHeader { 
 
     height: 40px; 
 
     border-bottom: 1px solid #EEE; 
 
     background-color: #fff; 
 
     -webkit-border-top-left-radius: 5px; 
 
     -webkit-border-top-right-radius: 5px; 
 
     -moz-border-radius-topleft: 5px; 
 
     -moz-border-radius-topright: 5px; 
 
     border-top-left-radius: 5px; 
 
     border-top-right-radius: 5px; 
 
     font-size: 16px; 
 
     font-family: sans-serif; 
 
     overflow: hidden; 
 
    } 
 
    #divFooter { 
 
    font-size: 17px; 
 
    height: 40px; 
 
    background-color: white; 
 
    border-top: 1px solid #DDD; 
 
    -webkit-border-bottom-left-radius: 5px; 
 
    -webkit-border-bottom-right-radius: 5px; 
 
    -moz-border-radius-bottomleft: 5px; 
 
    -moz-border-radius-bottomright: 5px; 
 
    border-bottom-left-radius: 5px; 
 
    border-bottom-right-radius: 5px 
 
}
<html> 
 

 
<head> 
 
    <title></title> 
 
    <link rel="stylesheet" href="temp.css" /> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    
 
</head> 
 

 
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
 
    <div id="mainContainer"> 
 
     <div id="divHeader"> 
 
      header 
 
     </div> 
 
     <div id="divBody" class="simplebar"> 
 
     body<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
     </div> 
 
     <div id="divFooter"> 
 
      footer 
 
     </div> 
 
    </div> 
 
</body> 
 

 

 
</html>

來源

2017-10-04 substancev

+0

寬度100vw，高度100vh？ – ProEvilz

回答

0

如果我理解正確，你想要的頁眉和頁腳總是可見，divBody採取了在瀏覽器高度的剩餘空間（所以只能滾動條在divBody上）。

這是一個有效的例子。有幾個calc來補償邊界寬度。

html { 
 
    height: 100%; 
 
    margin:0; 
 
} 
 

 
body { 
 
    height: 96vh; 
 
    margin: 0; 
 
    padding: 2vh; 
 
} 
 

 
#mainContainer { 
 
    height: calc(100% - 4px); 
 
    border: 1px solid white; 
 
    background-color: white; 
 
    box-shadow: 0 2px 7px #292929; 
 
    -moz-box-shadow: 0 2px 7px #292929; 
 
    -webkit-box-shadow: 0 2px 7px #292929; 
 
    border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
} 
 
#divBody { 
 
    margin-top: 0; 
 
    height: calc(100% - 90px); 
 
    overflow: auto; 
 
} 
 

 
#divBody, 
 
#divHeader, 
 
#divFooter { 
 
    padding: 1px; 
 
} 
 

 
#divHeader { 
 
    height: 40px; 
 
    border-bottom: 1px solid #EEE; 
 
    background-color: #fff; 
 
    -webkit-border-top-left-radius: 5px; 
 
    -webkit-border-top-right-radius: 5px; 
 
    -moz-border-radius-topleft: 5px; 
 
    -moz-border-radius-topright: 5px; 
 
    border-top-left-radius: 5px; 
 
    border-top-right-radius: 5px; 
 
    font-size: 16px; 
 
    font-family: sans-serif; 
 
    overflow: hidden; 
 
} 
 
#divFooter { 
 
    font-size: 17px; 
 
    height: 40px; 
 
    background-color: white; 
 
    border-top: 1px solid #DDD; 
 
    -webkit-border-bottom-left-radius: 5px; 
 
    -webkit-border-bottom-right-radius: 5px; 
 
    -moz-border-radius-bottomleft: 5px; 
 
    -moz-border-radius-bottomright: 5px; 
 
    border-bottom-left-radius: 5px; 
 
    border-bottom-right-radius: 5px 
 
}
<html> 
 

 
<head> 
 
    <title></title> 
 
    <link rel="stylesheet" href="temp.css" /> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    
 
</head> 
 

 
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
 
    <div id="mainContainer"> 
 
     <div id="divHeader"> 
 
      header 
 
     </div> 
 
     <div id="divBody" class="simplebar"> 
 
     body<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
     </div> 
 
     <div id="divFooter"> 
 
      footer 
 
     </div> 
 
    </div> 
 
</body> 
 

 

 
</html>

來源

2017-10-04 14:10:33 Jonathan

+0

試過這個跨瀏覽器，它完美的作品。我看到你做了 - 4px ..這是爲了保證金..但什麼是 - 90px的？ – substancev

+0

Header + Footer = 80px（每個40px）+ 2px的邊框（每個1px）+ 4px的填充（每個2px）;在divBody上填充+ 2px; mainContainer上的+ 2px邊框。 – Jonathan

0

正如我在我的評論說，你需要設置你的height到100vh並刪除max-height你在#divBody設置。 width:100%應該就足夠了，不需要width:100vw。

vh單位是代表垂直高度（視口）的相對度量。進一步瞭解here

#mainContainer { 
 
    height: 100%; 
 
    margin: 2%; 
 
    border: 1px solid white; 
 
    background-color: white; 
 
    box-shadow: 0 2px 7px #292929; 
 
    -moz-box-shadow: 0 2px 7px #292929; 
 
    -webkit-box-shadow: 0 2px 7px #292929; 
 
    border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
} 
 
    #divBody { 
 
     margin-top: 0; 
 
     min-height: 150px; 
 
     height:100vh; 
 
     overflow: auto; 
 
    } 
 
    
 
    #divBody, 
 
    #divHeader, 
 
    #divFooter { 
 
     padding: 1px; 
 
    } 
 
    
 
    #divHeader { 
 
     height: 40px; 
 
     border-bottom: 1px solid #EEE; 
 
     background-color: #fff; 
 
     -webkit-border-top-left-radius: 5px; 
 
     -webkit-border-top-right-radius: 5px; 
 
     -moz-border-radius-topleft: 5px; 
 
     -moz-border-radius-topright: 5px; 
 
     border-top-left-radius: 5px; 
 
     border-top-right-radius: 5px; 
 
     font-size: 16px; 
 
     font-family: sans-serif; 
 
     overflow: hidden; 
 
    } 
 
    #divFooter { 
 
    font-size: 17px; 
 
    height: 40px; 
 
    background-color: white; 
 
    border-top: 1px solid #DDD; 
 
    -webkit-border-bottom-left-radius: 5px; 
 
    -webkit-border-bottom-right-radius: 5px; 
 
    -moz-border-radius-bottomleft: 5px; 
 
    -moz-border-radius-bottomright: 5px; 
 
    border-bottom-left-radius: 5px; 
 
    border-bottom-right-radius: 5px 
 
}
<html> 
 

 
<head> 
 
    <title></title> 
 
    <link rel="stylesheet" href="temp.css" /> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    
 
</head> 
 

 
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
 
    <div id="mainContainer"> 
 
     <div id="divHeader"> 
 
      header 
 
     </div> 
 
     <div id="divBody" class="simplebar"> 
 
     body<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
      1<br> 
 
     </div> 
 
     <div id="divFooter"> 
 
      footer 
 
     </div> 
 
    </div> 
 
</body> 
 

 

 
</html>

來源

2017-10-04 13:52:36 ProEvilz

+0

感謝這看起來正是我所需要的。我會閱讀這個鏈接。感謝您的資源和解釋 – substancev

+0

當我把它放入firefox ..我的頁腳使它在maincontainer下面... – substancev

+0

@substancev你是什麼意思？我剛剛在Firefox中加載了它，它和Chrome中的外觀一樣？ – ProEvilz

相關問題

 相關問題