div未扩展到底部
[英]div not extending to bottom
问题描述
我想创建这样的布局-
页脚发粘。
下面是我尝试的代码：
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>
我正在给height: 100% .adminpanelContainer及其祖先height: 100% ，但对它没有影响。
我希望白色区域可以扩展到整个网页，而不管其高度如何。
我必须进行哪些更改才能将div扩展到底部。
3 个解决方案
解决方案1
1 2017-12-01 07:42:35
这将为您工作：
我刚刚添加了↓
#body .container{
height: calc(100vh - (90px + 45px));
}
计算如下：
height: calc(100ViewportHeight - (#header[height+padding-bottom]+ #footerwrapper[height]));
您的代码段中的有效样本：
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>
希望这对您有所帮助。
解决方案2
0 2017-12-01 07:33:19
如果可以重构HTML，则可以使用flex轻松创建以下布局：
进入整页以获得更好的结果
* { 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
无需调整任何现有标记，也可以通过声明适用的嵌套元素的<percentage>高度单位值来实现预期的行为。
首先声明元素
#body的相对高度（带有百分比单位值 ）-考虑嵌套的header和footer元素的组合height，例如：#body { /* 100% height minus the sum of header & footer height */ height: calc(100% - 125px); }接下来，声明
height: 100%，以占用视口的全部可用高度所需的任何其他嵌套元素，例如：.panelContainer { height: 100%; }
下面的代码段通过fixed和relative页脚元素演示了此行为。
固定页脚：
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>
相对页脚：
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>
实用的交互式CodePen演示：
在这里，您可以观察fixed和relative页脚的实际演示，这些演示允许动态添加或删除内容。 此外，这些演示还说明了动态页脚高度 。
表单输入的底部边框延伸到div的末尾而不移动文本
[英]Form input with bottom border extending to the end of the div without moving the text
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.