如何使这些div响应集？
[英]How do I make these sets of divs responsive?
问题描述
Seems like no matter what I do I can't get this particular set of div's to fill the viewport.. I've tried pushing with negative values.. but either goes past the screen. 
似乎无论如何我都无法获得这组特定的div来填充视口。.我尝试使用负值进行推..但其中任何一个都超过了屏幕。 My intentions is to maintain the drop shadows.. and still fill the screen. 我的意图是保持阴影..并仍然填充屏幕。 There should be only one scroll bar and thats the one inside #divBody 应该只有一个滚动条，而多数民众赞成在#divBody中
I have been able to create sticky footers but i lose my header using a push div. 我已经能够创建粘性页脚，但是使用push div丢失了页眉。
I really enjoy the layout of this header/body/footer layout. 我真的很喜欢此页眉/正文/页脚布局的布局。 Hope someone could help me with this. 希望有人可以帮助我。
#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>
2 个解决方案
解决方案1
0 2017-10-04 13:52:36
As I stated in my comment, you need to set your height to 100vh and remove the max-height you've set on #divBody . 正如我在评论中所述，您需要将height设置为100vh并删除在#divBody设置的max-height 。 width:100% should suffice, no need for width:100vw . width:100%就足够了，不需要width:100vw 。
The vh unit is a relative measurement which stands for vertical height (of the viewport). vh单位是一个相对度量，代表（视口的）垂直高度。 Learn more about that 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>
解决方案2
0 已采纳 2017-10-04 14:10:33
If I am understanding correctly, you want the header and footer always visible and the divBody to take up the remaining space in the browser height (so the only scrollbar is on the divBody). 如果我理解正确，则希望页眉和页脚始终可见，并且divBody占用浏览器高度中的剩余空间（因此，唯一的滚动条位于divBody上）。
Here is a working example of that. 这是一个可行的例子。 There are several calc to compensate for the border widths. 有几种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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.