文章/答案/技术大牛

发布

社区首页 >问答首页 >挠性div总是保持高度。

问挠性div总是保持高度。
EN

Stack Overflow用户

提问于 2021-02-11 22:05:18

回答 1查看 47关注 0票数 0

我正在制作一个网页，但我很难使它响应和满足我的愿望。

我正在用一个警告框制作一个登录页面，只有当用户输入错误的密码或电子邮件时，警报才会出现。

我想要发生的是，主div ( flex-3 )内容以页面为中心，当页面出现警告(flex-2)时，页面没有滚动轮，所以flex-3必须计算页面的剩余高度并以中心为中心，显然，无论设备分辨率如何，所有这些都必须工作。

我试着用flex div来完成这个操作，但是我得到的最接近的是，警报增加了页面的总高度，所以它会有一个滚动轮，底部没有任何内容。

html,
body {
    color: #fff;
    height: 100%;
    min-height: 100%;
}

.flex-1 {
    flex: 1;
    background-color: red;
}

.flex-2 {
    display: flex;
    background-color: green;
}

.flex-3 {
    display: flex;
    background-color: black;
}

<html>
<head>
    <!-- import bootstrap css -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <!-- import jquery and bootstrap -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>

<body class="d-flex flex-column">
    <header>
        <nav class="navbar navbar-expand-md navbar-dark bg-dark">
            <a class="navbar-brand" href="#">
                <img src="" class="d-inline-block align-top" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end" id='navbarNav'>
                <ul class="navbar-nav navbar-right">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <main class="flex-1">
        <div class="flex-2 d-flex alert-test">
            <h1>TEST</h1>
        </div>
        <div class="flex-3 d-flex justify-content-center align-items-center">
            <h1>TEST</h1>
        </div>
    </main>
</body>
</html>

html

css

flexbox

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-02-12 06:07:00

我就是这样让你的解决方案起作用的。

将display: flex; flex-direction: column;添加到flex-1中以使第二点起作用，
将flex-grow: 1添加到flex-3类以使潜水延伸到剩余区域。

只有将display: flex添加到父类flex-1中，flex-3才能工作。

希望这是你正在寻找的解决方案。

html,
body {
  color: #fff;
  height: 100%;
  min-height: 100%;
}

.flex-1 {
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: red;
}

.flex-2 {
  display: flex;
  background-color: green;
}

.flex-3 {
  display: flex;
  flex-grow: 1;
  overflow: auto;
  background-color: black;
}

<!-- import bootstrap css -->
<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
/>
<!-- import jquery and bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<body class="d-flex flex-column">
  <header>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <a class="navbar-brand" href="#">
        <img src="" class="d-inline-block align-top" alt="" />
      </a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNav"
        aria-controls="navbarNav"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div
        class="collapse navbar-collapse justify-content-end"
        id="navbarNav"
      >
        <ul class="navbar-nav navbar-right">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <main class="flex-1">
    <div class="flex-2 d-flex alert-test">
      <h1>flex-2 TEST</h1>
    </div>
    <div class="flex-3 d-flex justify-content-center align-items-center">
      <h1>flex-3 Test</h1>
    </div>
  </main>
</body>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66163646

复制

相似问题

问挠性div总是保持高度。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问挠性div总是保持高度。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问挠性div总是保持高度。
EN