时间戳

首页 > 解决方案 > 使用 flexbox 移出父 div 的 div

html - 使用 flexbox 移出父 div 的 div

问题描述

我遇到了这个 flex-box 问题，我有 2 个 div 包含在 1 个 div 中，每个 div 也是一个 flexbox，Div 从父 div 中弹出，我希望它们永远不会移出父 div 尺寸，div 去目前在他们下面的桌子上，我该如何做到这一点？

另一个问题：
我想问的是，在名为容器的 div 中，我有一个表，我希望该表成为 div 的死点，当然永远不要与页脚或页眉冲突

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0
}

.main {
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 100vh;
}

.header {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  /* flex-wrap: wrap; */
  height: 20%;
}

.header h1 {
  width: 100%;
}

.secondHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.levels {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  background: green;
  margin: 5px;
}

.main-Game-Body {
  display: flex;
  flex-direction: row-reverse;
  height: 72%;
  margin: 5px;
  padding: 4px;
}

.container {
  flex-grow: 1;
}

.footer {
  height: 8%;
  margin: 4px;
}
<div class="main">
  <div class="header">
    <h1>Welcome To Minesweeper</h1>
    <div class="secondHeader">
      <button class="hints" onclick="activateHintMode()">
                You Have: <span></span> Hints Left
              </button>
      <button class="safe" onclick="safeClick()">
                You Have: <span></span> safe clicks Left
              </button>
      <button class="lives">You Have: <span></span> Lives Left</button>
      <button class="backUp" onclick="stepBack()">stepBack</button>
    </div>
    <div class="levels">
      <button class="manual" onclick="manualMode()">
                Manual Mode
              </button>
      <button class="level" onclick="easyMode()">Easy Mode</button>
      <button class="level" onclick="hardMode()">Hard Mode</button>
      <button class="level" onclick="expertMode()">EXPERT</button>
    </div>
  </div>
  <div class="main-Game-Body">
    <!-- <button class="icon" onclick="restartLevel()"></button> -->
    <div class="container"></div>
  </div>
  <div class="footer">
    <div class="timer" onclick="timer()">
      Your Score: <span class="stopwatch"></span> Best Score At Difficulty
      <span class="difficulty"></span> is: <span class="results"></span>
    </div>
  </div>
</div>

标签： htmlcss

解决方案

这不是levelsdiv 的问题。您为每个 div 提供了静态高度，这就是内容试图适应该高度的原因。当您尝试增加边距时，元素会位于容器高度内，从而导致将levelsdiv 上方的项目移动到容器外。

解决方案：删除header,main-Game-Body和的静态高度footer，flex-grow: 1用于main-Game-Body这将有助于将内容拟合到剩余高度。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0
}

.main {
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 100vh;
}

.header {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  /* height: 20%; */
}

.header h1{
  width: 100%;
}
.secondHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  
}

.levels {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  background: green;
  margin: 5px;

}

.main-Game-Body {
  display: flex;
  flex-direction: row-reverse;
  /* height: 72%; : Do not give height, use flex grow*/
  flex-grow: 1;
  margin: 5px;
  padding: 4px;
}

.container {
  flex-grow: 1;
}

.footer {
  /* height: 8%; */
  margin: 4px;
}
<div class="main">
    <div class="header">
        <h1>Welcome To Minesweeper</h1>
        <div class="secondHeader">
        <button class="hints" onclick="activateHintMode()">
            You Have: <span></span> Hints Left
        </button>
        <button class="safe" onclick="safeClick()">
            You Have: <span></span> safe clicks Left
        </button>
        <button class="lives">You Have: <span></span> Lives Left</button>
        <button class="backUp" onclick="stepBack()">stepBack</button>
        </div>
        <div class="levels">
        <button class="manual" onclick="manualMode()">
            Manual Mode
        </button>
        <button class="level" onclick="easyMode()">Easy Mode</button>
        <button class="level" onclick="hardMode()">Hard Mode</button>
        <button class="level" onclick="expertMode()">EXPERT</button>
        </div>
    </div>
    <div class="main-Game-Body">
        <!-- <button class="icon" onclick="restartLevel()"></button> -->
        <div class="container"></div>
    </div>
    <div class="footer">
        <div class="timer" onclick="timer()">
        Your Score: <span class="stopwatch"></span> Best Score At Difficulty
        <span class="difficulty"></span> is: <span class="results"></span>
        </div>
    </div>
</div>

推荐阅读