Question

我正在尝试使用Bootstrap flex设置HTML网站。我想要一个布局，其中内部div获取滚动条，外部div填充页面的其余部分。

请参见以下示例；

<div class="d-flex align-items-start flex-column" style="height: 100vh;">
<div style="background-color: red" class="ml-5 mr-5 p-2">Flex item 1</div>
<div style="background-color: blue" class="ml-5 mr-5 p-2">Flex item 2</div>
<div style="background-color: firebrick" class="ml-5 mr-5 p-2">Flex item 3</div>
<div style="background-color: hotpink" class="ml-5 mr-5 p-2">Flex item 4</div>
<div style="background-color: brown" class="ml-5 mr-5 p-2">Flex item 5</div>
<div style="background-color: violet" class="ml-5 mr-5 p-2">Flex item 6</div>
<div id="filler" style="background-color: magenta" class="mb-auto ml-5 mr-5 p-2 overflow-auto">
    <div style="background-color: darkcyan">
        <div>Flex item 7</div>
    </div>
    <div id="scroller" style="background-color: crimson;" class="overflow-auto">
        <div>Flex item 8</div>
        <div>Flex item 8</div>
        <div>Flex item 8</div>
        <div>Flex item 8</div>
        <div>Flex item 8</div>
        <div>Flex item 8</div>
        <div>Flex item 8</div>
        <div>Flex item 8</div>
        <div>Flex item 8</div>
    </div>
</div>
<div  style="background-color: green" class="ml-5 mr-5 p-2">Flex item 9</div>

现在，布局可以按预期工作，但是滚动条已连接到div“填充器”上，我希望将其放置在div“ scroller”上。

我该如何解决？

Answer 1

具有id滚动条的div必须具有高度。

添加了100px的高度并溢出：自动；内联样式

<div class="d-flex align-items-start flex-column" style="height: 100vh;">
  <div style="background-color: red" class="ml-5 mr-5 p-2">Flex item 1</div>
  <div style="background-color: blue" class="ml-5 mr-5 p-2">Flex item 2</div>
  <div style="background-color: firebrick" class="ml-5 mr-5 p-2">Flex item 3</div>
  <div style="background-color: hotpink" class="ml-5 mr-5 p-2">Flex item 4</div>
  <div style="background-color: brown" class="ml-5 mr-5 p-2">Flex item 5</div>
  <div style="background-color: violet" class="ml-5 mr-5 p-2">Flex item 6</div>
  <div id="filler" style="background-color: magenta" class="mb-auto ml-5 mr-5 p-2 overflow-auto">
    <div style="background-color: darkcyan">
      <div>Flex item 7</div>
    </div>
    <div id="scroller" style="background-color: crimson; overflow:auto; height:100px;" class="overflow-auto">
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
    </div>
  </div>
  <div  style="background-color: green" class="ml-5 mr-5 p-2">Flex item 9</div>
</div>

Answer 2

尝试在全屏查看较小的设备，您应该编写媒体查询。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<style>
#wrap{}
#wrap > div{ height:50px;}
#scroller{}
#wrap #filler { height:calc(100% - 50px * 7)}
</style>
<body>
<div class="d-flex align-items-start flex-column" style="height: 100vh;" id="wrap">
  <div style="background-color: red" class="ml-5 mr-5 p-2">Flex item 1</div>
  <div style="background-color: blue" class="ml-5 mr-5 p-2">Flex item 2</div>
  <div style="background-color: firebrick" class="ml-5 mr-5 p-2">Flex item 3</div>
  <div style="background-color: hotpink" class="ml-5 mr-5 p-2">Flex item 4</div>
  <div style="background-color: brown" class="ml-5 mr-5 p-2">Flex item 5</div>
  <div style="background-color: violet" class="ml-5 mr-5 p-2">Flex item 6</div>
  <div id="filler" style="background-color: magenta" class="mb-auto ml-5 mr-5 p-2">
    <div style="background-color: darkcyan; height:50px;">
      <div>Flex item 7</div>
    </div>
    <div id="scroller" style="background-color: crimson; overflow:auto; height:calc(100% - 50px);" class="overflow-auto">
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
    </div>
  </div>
  
  <div  style="background-color: green" class="ml-5 mr-5 p-2">Flex item 9</div>
</div>
</body>
</html>

使用flexbox，在flexitem中的div上显示滚动条

2 个答案: