Question

我想要并且无法在框内容div中显示滚动条。添加'overflow-y：auto'不起作用。

我的要求：

整个布局必须适应浏览器的高度。这就是我的原因有#wrap {...身高：50vh; ......}
滚动条不得包含标题。它必须仅适用于box-content div。我希望标题的高度适应内容并在必要时包装它们。

这是css

    #wrap { 
        margin: 10px;
        height: 50vh;
        border: 2px solid black;
    }

    .container {
        border: 4px solid red;
        padding: 4px 3px;
        margin: 0;
        max-height: 90%;        /* As a percentage of the parent. */ 
        /* height: 300px;       /* This causes the scroll bar to appear, but its not what I want. */
    }   

    .box-header {
        background-color: green;
        padding: 5px 10px;
        color: white;
    }

    .box-content {
        border: 3px solid blue;
        overflow:auto;
        padding: 5px;
        padding-top: 10px;
        max-height:100%;
    }

和HTML

<div id="wrap">
    <div class="container">
        <div class="box-header"> Header String</div>
        <div class="box-content">
             <p>line 1</p>
             <p>line 2</p>
             <p>line 3</p>
             <p>line 4</p>
             <p>line 5</p>
             <p>line 6</p>
             <p>line 7</p>
             <p>line 8</p>
             <p>line 9</p>
             <p>line 10</p>
             <p>line 11</p>
             <p>line 12</p>
             <p>line 13</p>
             <p>line 14</p>
             <p>line 15</p>          
             <p>line 16</p>
             <p>line 17</p>
             <p>line 18</p>
             <p>line 19</p>          
        </div>
     </div>
</div>

这是一个小提琴的链接：https://jsfiddle.net/mjvancouver905/5vswprfw/

感谢。

Answer 1

您可以使用flex布局

＆＃13;

#wrap {
  margin: 10px;
  border: 2px solid black;
}

.container {
  padding: 4px 3px;
  margin: 0;
  height: 50vh;
  /* As a percentage of the parent. */
  /* height: 300px;				/* This causes the scroll bar to appear, but can't be used because the height must adjust to the size of the screen. */
  display: flex;
  flex-direction: column;
}

.box-header {
  background-color: green;
  padding: 5px 10px;
  color: white;
}

.box-content {
  border: 3px solid blue;
  padding: 5px;
  padding-top: 10px;
  overflow-y: scroll;
}

＆＃13;

<div id="wrap">
  <div class="container" style="border: 4px solid red">
    <div class="box-header"> Header in the B1 div.</div>
    <div class="box-content">
      <p>line 1</p>
      <p>line 2</p>
      <p>line 3</p>
      <p>line 4</p>
      <p>line 5</p>
      <p>line 6</p>
      <p>line 7</p>
      <p>line 8</p>
      <p>line 9</p>
      <p>line 10</p>
      <p>line 11</p>
      <p>line 12</p>
      <p>line 13</p>
      <p>line 14</p>
      <p>line 15</p>
      <p>line 16</p>
      <p>line 17</p>
      <p>line 18</p>
      <p>line 19</p>
    </div>
  </div>
</div>

＆＃13;

Answer 2

你应该添加一个合适的（固定的最大高度），例如：

.box-content {
  border: 3px solid blue;
  overflow: auto;
  padding: 5px;
  padding-top: 10px;
  max-height: 400px;
}

https://jsfiddle.net/motka53y/

Answer 3

我会这样做。首先，您的容器应具有固定的宽度，以便可以隐藏任何溢出。所以你必须改变最大高度：90％到高度：90％。然后你必须添加溢出隐藏的属性，以便隐藏容器外的溢出部分。

这是一个工作小提琴：https://jsfiddle.net/5vswprfw/12/

这是我在css样式中改变的内容：

  .container {
  padding: 4px 3px;
  margin: 0;
  height: 90%;
  overflow:hidden;
  }

在子div中获取垂直滚动条时遇到问题

3 个答案: