时间戳

首页 > 解决方案 > 当我使用流框时，即使设置了最大高度，我的框也会跳出页面

html - 当我使用流框时，即使设置了最大高度，我的框也会跳出页面

问题描述

我目前有这个

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Madokami</title>
        <link rel="stylesheet" href="css/CSS">
    </head>
    <body>
        <div class="container">
            <div class="box color1">Box One</div>
            <div class="box color2">Box Two</div>
            <div class="box color3">Box Three</div>
            <div class="box color4">Box Four</div>
            <div class="box color5">Box Five</div>
        </div>
    </body>
</html>

我制作了这段代码https://jsfiddle.net/qu02ch4z/1/并用它来创建一个侧边栏，我可以在我的网站上使用 flex 而不是仅仅创建单独的框。问题是，当我使用 flexboxes 时，它会不断离开站点并且不想工作

标签： htmlcssflexbox

解决方案

我不确定我是否理解正确。但是如果你想在视口高度上拉伸所有盒子而不是超出这个高度，你可以将容器的高度设置为100vh，从盒子中删除固定line-height并添加flex: 1到它们。

body {
  margin: 0;
  font-family: verdena, sans-serif;
  background: #262626;
}

.container {
  /* 100 % of the viewport height */
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.box {
  /* stretch boxes to fill 100% of the height */
  flex: 1;
  
  /* center text */
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 15%;
  padding: 0.5em;
  transition: .5s;
}

.box:hover {
  width: 30%
}

.color1 { background: #f00; }
.color2 { background: #A16340; }
.color3 { background: #A6A340; }
.color4 { background: #A12224; }
.color5 { background: #f66340; }
<div class="container">
  <div class="box color1">Box One</div>
  <div class="box color2">Box Two</div>
  <div class="box color3">Box Three</div>
  <div class="box color4">Box Four</div>
  <div class="box color5">Box Five</div>
</div>

编辑：如果您希望框保持其原始大小并且只缩小，如果有很多，您可以使用flex-grow: 0; flex-shrink: 1; flex-basis: 20px;，其中flex-basis定义默认大小。这是一个交互式示例：

const heightSlider = document.getElementById('height-slider');
const heightSliderValue = document.getElementById('height-slider-value');
const container = document.getElementById('container');

heightSlider.addEventListener('input', changeContainerHeight);

function changeContainerHeight(e = null) {
  const factor = e ? parseInt(e.target.value) / 100 : 0.8;
  const newHeight = Math.round(110 * factor);
  container.style.height = `${newHeight}px`;

  heightSliderValue.innerText = newHeight;
}

changeContainerHeight();


const flexBasisSlider = document.getElementById('flex-basis-slider');
const flexBasisSliderValue = document.getElementById('flex-basis-slider-value');
const boxes = document.querySelectorAll('.box');

flexBasisSlider.addEventListener('input', changeFlexBasis);

function changeFlexBasis(e = null) {
  const factor = e ? parseInt(e.target.value) / 100 : 0.5;
  const newFlexBasis = Math.round(16 * factor)
  boxes.forEach(box => {
    box.style.flexBasis = `${newFlexBasis}px`;
  })
  flexBasisSliderValue.innerText = newFlexBasis;
}

changeFlexBasis();
body {
  font-family: sans-serif;
}

.form {
  display: flex;
}

.form-group {
  display: flex;
  flex-direction: column;
  width: 50%;
  max-width: 300px;
  min-width: 150px;
  text-align: center;
  margin: 1rem auto;
}

.container {
  height: 100px;
  background-color: burlywood;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.box {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 8px;
  font-size: 0.5rem;
  width: 50%;
  color: #fff;
  background-color: cornflowerblue;
  border-bottom: 2px solid #fff;
  padding: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="form">
  <div class="form-group">
    <label for="height-slider">Container Height: <span id="height-slider-value">88</span>px</label>
    <input type="range" id="height-slider" step="1" value="80">
  </div>
  <div class="form-group">
    <label for="flex-basis-slider">Box Flex Basis: <span id="flex-basis-slider-value">8</span>px</label>
    <input type="range" id="flex-basis-slider" step="1" value="50">
  </div>
</div>
<div class="container" id="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

推荐阅读