Question

我试图在另一个div中设置一个div，max-height设置为尊重该高度，最终使内容可以垂直滚动。

我在div中有一系列标签，其中display:block正确显示。父div扩展以适应那些突破它的父母max-height的标签，这是不可取的。

我尝试过设置溢出以及在父级和父级（容器）上设置相对位置，反之亦然，但没有成功。我想知道为什么list-container不尊重content-containers max-height参数。

＆＃13;

#container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

#content-container {
    width: 500px;
    max-height: 20%;
    margin: auto;
    margin-top: 2%;
    font-size: 20px;
    border: 1px solid blue;
}

#list-container {
    padding-top: 20px;
    padding-left: 10px;
    border: 1px solid green;
}

.list-item {
    /* width: 100%; */
    display: block;
    border: 1px solid salmon;
}

＆＃13;

<div id="container">
  <div id="content-container">
    <div id="list-container">
      <label class="list-item">Content 1</label>
      <label class="list-item">Content 2</label>
      <label class="list-item">Content 3</label>
      <label class="list-item">Content 4</label>
      <label class="list-item">Content 5</label>
      <label class="list-item">Content 6</label>
      <label class="list-item">Content 7</label>
    </div>
  </div>
</div>

＆＃13;

谢谢！

Answer 1

如果您希望它可滚动，则应使用overflow: auto或overflow: scroll：

＆＃13;

#container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#content-container {
  width: 500px;
  max-height: 20%;
  overflow: auto;
  margin: auto;
  margin-top: 2%;
  font-size: 20px;
  border: 1px solid blue;
}
#list-container {
  padding-top: 20px;
  padding-left: 10px;
  border: 1px solid green;
}
.list-item {
  /* width: 100%; */
  display: block;
  border: 1px solid salmon;
}

＆＃13;

<div id="container">
  <div id="content-container">
    <div id="list-container">
      <label class="list-item">Content 1</label>
      <label class="list-item">Content 2</label>
      <label class="list-item">Content 3</label>
      <label class="list-item">Content 4</label>
      <label class="list-item">Content 5</label>
      <label class="list-item">Content 6</label>
      <label class="list-item">Content 7</label>
    </div>
  </div>
</div>

＆＃13;

Answer 2

将overflow: scroll;添加到#content-container

jsfiddle

Answer 3

＆＃13;

#container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

#content-container {
    width: 500px;
    max-height: 20%;
    margin: auto;
    margin-top: 2%;
    font-size: 20px;
    border: 1px solid blue;
    overflow:auto;    //or overflow:hidden?
}

#list-container {
    padding-top: 20px;
    padding-left: 10px;
    border: 1px solid green;
}

.list-item {
    /* width: 100%; */
    display: block;
    border: 1px solid salmon;
}

＆＃13;

<div id="container">
  <div id="content-container">
    <div id="list-container">
      <label class="list-item">Content 1</label>
      <label class="list-item">Content 2</label>
      <label class="list-item">Content 3</label>
      <label class="list-item">Content 4</label>
      <label class="list-item">Content 5</label>
      <label class="list-item">Content 6</label>
      <label class="list-item">Content 7</label>
    </div>
  </div>
</div>

＆＃13;

Answer 4

你快到了。您overflow: auto上的#content-container遗失了public dynamic Get(decimal lat, decimal lon) { return new string[] { lat.ToString(), lon.ToString()}; }。这样它的区域就可以滚动了。

帮助您理解的代码笔： http://codepen.io/sandrina-p/pen/akRQEY

CSS div不尊重父边界

4 个答案: