1. 首页
  2. 问答
  3. 如何让这些div集响应？

如何让这些div集响应？

2017-10-04 68 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

相关问题

 相关问题