时间戳

首页 > 解决方案 > 当我必须排除导航栏时如何使 div 显示高度的 100%

html - 当我必须排除导航栏时如何使 div 显示高度的 100%

问题描述

一个问题我在导航栏下方有一个 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% 的剩余空间。

  1. 不可滚动
  2. 无法将导航栏集成到例如网格系统中
  3. 容器周围有一个漂亮的填充框架。

谢谢

标签： htmlcss

解决方案

这应该可以帮助您：使 div 填充剩余屏幕空间的高度

基本上你应该使用 flexbox 使 div 增长并填满页面的其余部分。你熟悉弹性盒子吗？如果没有，你可以在这里阅读：https ://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

推荐阅读