有个问题我在导航栏下面有一个 div 。我希望 div 拥有 100% 的剩余空间，并在其周围添加一个漂亮的填充作为 Frame。它不应该是可以滚动的。另外，我无法以某种方式绑定导航栏，因为在项目中它的组件完全不同。
我尝试简化我的代码。
nav {
min-height: 80px;
background-color: blue;
}
.take-page-height {
padding: 1.5%;
background-color: red;
/* added for demonstration */
}
.welcome-div {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 100%;
word-wrap: break-word;
background-color: green;
background-clip: border-box;
}
<meta name="viewport" content="width=device-width,initial-scale=1" />
<nav>Hello world</nav>
<div class="take-page-height">
<div class="welcome-div">
<div class="col-md-12 center-text">
<div>
<h1>Hello</h1>
</div>
</div>
</div>
问题是如何使 div 占剩余空间的 100%。
- 不可滚动
- 无法将导航栏集成到网格系统中
- 容器周围有一个漂亮的填充框架。
Thanks
这应该可以帮助您：让 div 填充剩余屏幕空间的高度 https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space
基本上你应该使用 flexbox 来使 div 增长并填充页面的其余部分。你熟悉弹性盒子吗？如果没有，您可以在这里阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
