时间戳

首页 > 解决方案 > 如何在调整 flexbox 上的浏览​​器高度时启用滚动

html - 如何在调整 flexbox 上的浏览​​器高度时启用滚动

问题描述

所以我创建了一个如下所示的flexbox并为边框着色，如图所示：

在此处输入图像描述

基本上我现在要做的是在我调整默认工作的浏览器窗口大小时只让框灵活宽度：

在此处输入图像描述

但是，我现在想要的是，我只希望它在调整浏览器窗口的宽度时弯曲，而不是在调整浏览器窗口的高度时。如果我现在调整浏览器高度，flexbox 会这样响应：

在此处输入图像描述

因此，我想要的是，每当浏览器的高度降低时，我希望 flexbox高度保持不变并使其高度可滚动，因此只要高度降低，侧面的滚动条就会显示。它类似于https://www.apple.com/网站，如果我们调整浏览器的宽度，它会弯曲，但高度会利用滚动条。

我如何实现这一目标？

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

#outer {
    border: 1px solid black;
    height: 90%;
    display: flex;
    width: 90%;
}
<!DOCTYPE html>
<html lang="en">  
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "style.css">
  
  <title>Document</title>
</head>
<body>
  <div id = "outer">
  </div>
</body>
</html>

标签： htmlcssflexbox

解决方案

因此，我想要的是，每当浏览器的高度降低时，我希望 flexbox 高度保持不变并使其高度可滚动，因此只要高度降低，侧面的滚动条就会显示。


鉴于这个要求，我会做的是

  1. 删除height: 90%;CSS 中的行。这会导致您的 flexbox 占据浏览器窗口高度的 90%，即使在调整大小时也是如此。
  2. 添加flex-direction: column;
  3. 添加一些比浏览器窗口占用更多高度的内容。毕竟你提到了www.apple.com :-)
  4. 观看垂直滚动条出现！

HTML：

<body>
  <div id = "outer">
    <p>Images and text and content, oh my!</p>
    <p>Images and text and content, oh my!</p>
    <p>Images and text and content, oh my!</p>
  </div>
</body>

CSS：

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

#outer {
    border: 1px solid black;
    display: flex;
    flex-direction: column;
    width: 90%;
}

p {
    font-size: x-large;
    border: 1px solid blue;
    padding: 300px; /* or other sufficiently large property:value */
}

推荐阅读