div未扩展到底部
[英]div not extending to bottom
问题描述
I want to create a layout like this- 
我想创建这样的布局-
Footer is sticky.
页脚发粘。
Below is the code I tried: 下面是我尝试的代码：
body { position: relative; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } html, body { height: 100%; margin: 0; } .container { max-width: 1280px; margin: 0 auto; } .page-wrap { min-height: 100%; margin-bottom: -45px; background-color: #f2f2f2; } #header { height: 80px; width: 100%; background-color: #fdbb30; position: relative; padding-bottom: 10px; } .adminpanelContainer { background-color: white; padding: 40px; margin-top: 20px; height: 100%; } #footer { width: 100%; background-color: #fff; z-index: 1; } #footerwrapper { height: 45px; }
<body> <div class="page-wrap"> <header id="header"> <div class="container"></div> </header> <div id="body"> <div class="container" style="height:100%;"> <div class="panelContainer"></div> </div> </div> </div> <footer id="footer"> <div class="container" id="footerwrapper"></div> </footer> </body>
I am giving height: 100% to .adminpanelContainer and its ancestors also but there is no effect on it. 我正在给height: 100% .adminpanelContainer及其祖先height: 100% ，但对它没有影响。
I want the white area to expand across the whole web page irrespective of their height. 我希望白色区域可以扩展到整个网页，而不管其高度如何。
What changes I have to make to extend the div till bottom. 我必须进行哪些更改才能将div扩展到底部。
3 个解决方案
解决方案1
1 2017-12-01 07:42:35
This will work for you: 这将为您工作：
I have just added ↓ 我刚刚添加了↓
#body .container{
height: calc(100vh - (90px + 45px));
}
the calculation is as follows: 计算如下：
height: calc(100ViewportHeight - (#header[height+padding-bottom]+ #footerwrapper[height]));
If you want to learn more about calc and vh , please click on them. 如果您想了解有关calc和vh更多信息，请单击它们。
A working Sample from your snippet: 您的代码段中的有效样本：
body { position: relative; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } html, body { height: 100%; margin: 0; } .container { max-width: 1280px; margin: 0 auto; } .page-wrap { min-height: 100%; margin-bottom: -45px; background-color: #f2f2f2; } #header { height: 80px; width: 100%; background-color: #fdbb30; position: relative; padding-bottom: 10px; } .adminpanelContainer { background-color: white; padding: 40px; margin-top: 20px; height: 100%; } #footer { width: 100%; background-color: #fff; z-index: 1; } #footerwrapper { height: 45px; } #body .container{ height: calc(100vh - (90px + 45px)); }
<body> <div class="page-wrap"> <header id="header"> <div class="container"> </div> </header> <div id="body"> <div class="container" > <div class="panelContainer"> </div> </div> </div> </div> <footer id="footer"> <div class="container" id="footerwrapper"> </div> </footer> </body>
Hope this was helpful for you. 希望这对您有所帮助。
解决方案2
0 2017-12-01 07:33:19
If you can restruct your HTML, you can easily create this layout using flex : 如果可以重构HTML，则可以使用flex轻松创建以下布局：
go full page for better result 进入整页以获得更好的结果
* { box-sizing: border-box; } body { margin: 0; display: flex; flex-direction: column; height: 100vh; } header { height: 80px; background-color: #fdbb30; position: relative; padding-bottom: 10px; } footer { height: 45px; background-color: #fff; z-index: 1; } .container { max-width: 1280px; margin: 0 auto; border: 1px solid; } .content { flex: 1; background: red; padding: 20px; } .content>.container { height: 100%; } .adminpanelContainer { background-color: #ccc; padding: 40px; height: 100%; }
<header> <div class="container"> header content </div> </header> <div class="content"> <div class="container"> <div class="adminpanelContainer"> full height content </div> </div> </div> <footer> <div class="container"> footer content </div> </footer>
解决方案3
0 2017-12-01 08:32:45
Without adjusting any existing markup the intended behaviour can be achieved by declaring <percentage> height unit values for applicable nested elements as well. 无需调整任何现有标记，也可以通过声明适用的嵌套元素的<percentage>高度单位值来实现预期的行为。
Start by declaring a relative height (with percentage unit values ) for the element
#body- account for the combinedheightof the nestedheader&footerelements, eg:首先声明元素#body的相对高度（带有百分比单位值 ）-考虑嵌套的header和footer元素的组合height，例如：#body { /* 100% height minus the sum of header & footer height */ height: calc(100% - 125px); }Next, declare
height: 100%for any further nested elements that are required to occupy the full available height of the viewport, eg:接下来，声明height: 100%，以占用视口的全部可用高度所需的任何其他嵌套元素，例如：.panelContainer { height: 100%; }
The code snippets below demonstrate this behaviour with both fixed and relative footer elements. 下面的代码段通过fixed和relative页脚元素演示了此行为。
Fixed Footer: 固定页脚：
body { position: relative; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } html, body { height: 100%; margin: 0; } .container { max-width: 1280px; margin: 0 auto; text-align: center; } .page-wrap { /* adjusted */ height: 100%; background-color: #f2f2f2; } #header { height: 80px; width: 100%; background-color: #fdbb30; position: relative; padding-bottom: 10px; } .adminpanelContainer { background-color: white; padding: 40px; margin-top: 20px; height: 100%; } #footer { width: 100%; background-color: #fff; z-index: 1; /* additional */ position: fixed; bottom: 0; } #footerwrapper { height: 45px; } /* Additional */ * { box-sizing: border-box; } #body { height: calc(100% - 125px); /* 100% height minus the sum of header & footer height */ } .panelContainer { height: 100%; /* following styles added just for the sake of demonstration */ background: white; border: 1px solid #d6d6d6; box-sizing: border-box; max-width: 80%; margin: auto; } .panelContainer .inner { position: relative; height: 100%; } .panelContainer .inner span { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 20px; margin: auto; }
<body> <div class="page-wrap"> <header id="header"> <div class="container"> <span>height: 80px</span> </div> </header> <div id="body"> <div class="container" style="height:100%;"> <div class="panelContainer"> <div class="inner"><span>relative height declared with <code>percentage</code> values</span></div> </div> </div> </div> </div> <footer id="footer"> <div class="container" id="footerwrapper"> <div class="container"> <span>height: 45px</span> </div> </div> </footer> </body>
Relative Footer: 相对页脚：
body { position: relative; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } html, body { height: 100%; margin: 0; } .container { max-width: 1280px; margin: 0 auto; text-align: center; } .page-wrap { /* adjusted */ height: 100%; background-color: #f2f2f2; } #header { height: 80px; width: 100%; background-color: #fdbb30; position: relative; padding-bottom: 10px; } .adminpanelContainer { background-color: white; padding: 40px; margin-top: 20px; height: 100%; } #footer { width: 100%; background-color: #fff; z-index: 1; /* additional */ position: relative; bottom: 0; } #footerwrapper { height: 45px; } /* Additional */ * { box-sizing: border-box; } body { padding-bottom: 45px; } #body { height: calc(100% - 80px); /* 100% height minus the height of the header */ } .panelContainer { height: 100%; /* following styles added just for the sake of demonstration */ background: white; border: 1px solid #d6d6d6; box-sizing: border-box; max-width: 80%; margin: auto; } .panelContainer .inner { position: relative; height: 100%; } .panelContainer .inner span { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 20px; margin: auto; }
<body> <div class="page-wrap"> <header id="header"> <div class="container"> <span>height: 80px</span> </div> </header> <div id="body"> <div class="container" style="height:100%;"> <div class="panelContainer"> <div class="inner"><span>relative height declared with <code>percentage</code> values</span></div> </div> </div> </div> </div> <footer id="footer"> <div class="container" id="footerwrapper"> <div class="container"> <span>height: 45px</span> </div> </div> </footer> </body>
Practical Interactive CodePen Demonstrations: 实用的交互式CodePen演示：
Here you can observe practical demonstrations, for fixed and relative footers, which allow content to be added or removed dynamically. 在这里，您可以观察fixed和relative页脚的实际演示，这些演示允许动态添加或删除内容。 In addition, these demonstrations also account for dynamic footer heights . 此外，这些演示还说明了动态页脚高度 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.