Question

关于获取剩余高度的大多数问题和答案都集中在页面上的内容部分。我已经尝试了几个答案我的方案，但无法解决它。

我有一个包含四个元素的垂直布局。

    <div class="col-sm-6" style="height: 350px">
        <h1>Header Text 1</h1>
        <h2>Header Text 2</h2>
        <p>paragraph that should take the remaining space</p>          
        <a href="">Button</a>
    </div>

高度是固定的，足以容纳h1，h2，a。我希望p元素占用剩余空间并在该空间中尽可能显示文本行。如果空间不足，则应显示点...或某个指示符。

我尝试为段落设置一个固定的高度，但这不起作用，因为我不知道会有多少行h1,h2。

Answer 1

你的问题的第一部分是可以用flex解决的：https://jsbin.com/japojezofa/edit?html,css,output（对不起我在电话里..在丛林中..而且堆栈溢出不能让我选择在这里放置代码）

然而，我认为使用纯css是不可能的可变线长的多行椭圆（也许你可以用右下对齐的背景图像“......”来伪造它）：Is it possible to use text-overflow:ellipsis on multiline text?

编辑：这是代码

.col-sm-6 {
  display: flex;
  flex-direction: column;
}

.col-sm-6 > * {
  flex-basis: auto;
  flex-shrink: 1;
}

p {
  flex-grow: 1;
  overflow: hidden;
}

Answer 2

正如Dominic Tobias的回答中提到的，flexbox可以为你做高度调整。

div {
  border: 1px solid red;
  display: flex;
  flex-direction: column;
}
p {
  flex: 1;
  background: lightblue;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-6" style="height: 350px">
  <h1>Header Text 1</h1>
  <h2>Header Text 2</h2>
  <p>paragraph that should take the remaining space</p>
  <a href="">Button</a>
</div>

至于多行省略号，他提供了一个链接......我将提供另一个链接。 - Applying an ellipsis to multiline text

Answer 3

你可以使用百分比（％如95％或其他东西）作为高度，然后无论h1和h2的高度是多少，百分比都会将剩余高度分配给p。

style="height:95%"

使段落取剩余高度

3 个答案: