Question

我觉得这应该是一个非常简单的问题，但我似乎无法弄明白。

HTML：

<div class="outer">
  <div class="inner">
    <!-- lots of text -->
  </div>
  <div class="inner-bottom">
    This text should be inside the blue background
  </div>
</div>

CSS：

.outer {
  height: 300px;
  background: #99EEFF;
}

.inner {
  height: 100%;
  overflow: scroll;
}

.inner-bottom {
  text-align: center
}

Fiddle

目标是让两个内部div显示在其父级内部，其父级具有指定的背景，可以直观地组织它们。

如果我未在height: 100%;上指定.inner，则无论我在display属性上设置了什么，它都会溢出。实际上，display的某些值甚至会导致height: 100%无效。

无论如何，我真的希望.inner的大小由.outer的大小决定，而不是相反。我该怎么做？

Answer 1

您可以rootViewController使用makeKeyAndVisible上的Flexbox来执行此操作

flex: 1

.inner

Answer 2

您可以设置内部元素的高度，这是最佳方式

.inner {
    height: 275px;
    overflow-y: auto;
}

使用填充底部到父元素，即'外部'类。

.outer {
    height: 300px;
    background: #99EEFF;
    padding-bottom: 30px;
}

Answer 3

Flexbox是这里的方法，但是如果你想要一个非灵活的答案：如果要为外部div分配300px，那么你可以为内部div分配固定的像素值。你想要它们有多大？你可以这样做：

.inner {
 height: calc(100% - (insert height of .inner-bottom));
}

或者你可以使用两个元素高度相加的百分比。或者你可以使用最多300个像素。你的电话。

Answer 4

inner-bottom中的文字超出了蓝色背景，因为.inner div 占据了.outer DIV中所有可用的高度。如果您将.inner DIV的高度设置为小于100％，则.inner-bottom仍有一些空间可以放入.outer DIV。所以，改变

height: 100%

例如

height:65%

.inner中的

应该有效。

PS。您可以将65％更改为小于100％的任何值，并且它仍然可以正常工作。

Answer 5

我想出了一种使用表格的更简单，更动态，更交叉兼容的方法。

HTML：

<div class="table">
  <div class="tr greedy">
    <div class="td">
      <div class="scrollable">
        <!-- Lots of text -->
      </div>
    </div>
  </div>
  <div class="tr">
    <div class="td centered">
      Text should be inside the blue box
    </div>
  </div>
</div>

CSS：

.table {
  display: table;
  height: 300px;
  background: #99EEFF;
}

.tr {
  display: table-row;
}

.td {
  display: table-cell;
}

.scrollable {
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}

.greedy {
  height: 100%;
}

.centered {
  text-align: center;
}

如何使滚动div占用不到100％的父级？

5 个答案: