时间戳

首页 > 解决方案 > 嵌套 div 高度和溢出

html - 嵌套 div 高度和溢出

问题描述

假设我有一些固定大小的容器，并且我希望所有元素都适合其中，但我不知道内部元素的所有高度。有些元素有很多文字，所以我设置了溢出：隐藏。但是这个元素忽略了容器的高度，只是拉伸以适应内容。我该怎么做？

编辑：如果我在容器上设置溢出，溢出的文本将被隐藏，但底部填充将被忽略（参见第二个片段）。如何从底部边框剪切文本 5px，使所有边看起来都相等？

.outer {
  width: 200px;
  height: 200px;
}

.inner {
  padding: 5px;
  background-color: #ccc;
  height: 150px;
  border: 1px solid black;
}

.text {
  overflow: hidden;
}
<div class="outer">
  <div class="inner">
    <span style="color: red">Some element so we can't make text 100% height</span>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </div>
  </div>
  <div>Some other text</div>
</div>

.outer {
  width: 200px;
  height: 200px;
}

.inner {
  padding: 5px;
  overflow: hidden;
  background-color: #ccc;
  height: 150px;
  border: 1px solid black;
}

.text {
  overflow: hidden;
}
<div class="outer">
  <div class="inner">
    <span style="color: red">Some element so we can't make text 100% height</span>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </div>
  </div>
  <div>Some other text</div>
</div>

标签： htmlcssoverflow

解决方案

你可以在里面嵌套一个额外的 div .inner（我.inner2在这个例子中使用过，你可以想出一个更有意义的名字！:)）。

基本上，您需要将背景/边框与控制溢出的容器分开（您是对的，溢出到元素的边缘，它不关心填充）。

只是一个例子，但我在其中添加了第二个 div ( .inner2).inner并将heightandoverflow规则移到了那个。背景/填充/边框保持不变。

编辑：为 inner2 添加了一个石灰边框，以更好地说明正在发生的事情。

.outer {
  width: 200px;
  height: 200px;

}

.inner {
  padding: 5px;
  background-color: #ccc;
  border: 1px solid black;
}
.inner2 {
    height: 150px;
    overflow: hidden;
    border: 1px solid lime;
}

.text {
  
}
<div class="outer">
  <div class="inner">
  <div class="inner2">
    <span style="color: red">Some element so we can't make text 100% height</span>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </div>
  </div>
  </div>
  <div>Some other text</div>
</div>

推荐阅读