控制div的高度

Question

我有一些包含信息的漂亮材料卡片。它们处于无限滚动提要中。所需的行为是在单击“更多”按钮后它们将显示完整的消息，因为消息往往很长。作为这种行为的原型，我尝试修改我的应用程序以始终全长显示消息，但我无法让卡片 div 的高度超过 457 像素，我不知道为什么。

通过 Chrome 调试器，我可以看到卡片高度为 457 像素，但它始终是灰色的，表明它是从其他地方获得的高度。我想让卡片和内容一样高。

这是我得到的：

<div *ngFor="let message of messages">
    <div class="event card" style="margin-left: 65px; width: 550px;">
        <div class="card-header inlineblock" style="text-overflow: ellipses;">
            <div class="card-date text-caption" style="float: right;">{{message.date}}</div>
            <div class="text-title">{{message.subject | titlecase}}</div>
        </div>
        <div class="message inlineblock text-body">
            <div style="text-overflow: ellipses; white-space: pre-wrap; height: auto;">{{message['email-body']}}</div>
    </div>
    <div>
        <hr style="margin: 20px 0 20px 0;"/>
        <span class="text-button" style="padding-left: 20px;">More</span>
    </div>
</div>

这是我非常简单的卡片。以下是所有提到的 CSS：

.event {
    border-radius: 2px;
    background-color: white;
    margin: 15px 0 0 0;
    padding-bottom: 20px;
    }

.card {
    border-radius: 2px;
    transition: box-shadow .25s;
    background-color: white;
    margin: .5rem 0 1rem 0;
    width: 100%;
    justify-content: center;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,.16), 0 2px 5px 0 rgba(0,0,0,.26)
    }

.card-header {
    width: 100%;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    padding: 8px 20px;
    }

.inlineblock {
    display: inline-block;
    }

.card-date {
    float: right;
    }

.text-caption {
    font-size: 12px;
    font-weight: 400;
    line-height: 32px;
    opacity: .54;
    margin: 0 0 0 0 !important;
    }

.text-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 44px;
    opacity: .87;
    margin: 0 0 0 0 !important;
    }

.message {
    display: block;
    display: -webkit-box;
    padding: 15px 20px 0 20px;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    }

.text-body {
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
    opacity: .87;
    margin: 0 0 0 0 !important;
    }

text-button: {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 32px;
    opacity: .87;
    margin: 0 0 0 0 !important;
    }

我觉得里面没有任何东西会导致高度，所以我检查了一个更高的级别。

它包含在另一个 HTML 模板中：

<div class="feed-container">
    <div class="feed-scroll">
        <messages></messages>
    </div>
</div>

用下面对应的CSS：

.feed-container {
    width: 630px;
    overflow: hidden;
    }

.feed-scroll {
    min-height: 400px;
    width: 650px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: 10px;
    padding-right: 10px;
    }

容器的目的是允许使用不可见的滚动条进行无限滚动。

不过，没有什么让我觉得卡片的高度受到限制，以至于无法显示完整的消息。如果我指定消息的 div 或其父级的高度，则文本只会溢出卡片。卡片无法匹配它。

所以我认为可能是某些全局样式导致了这种情况。以下是应用的所有内容：

在最高的 div 上：

* {
box-sizing: border-box;
}

div {
    display: block;
}

body {
    font-family: 'Roboto', arial, sans-serif;
    font-weight: 400;
    color: #212121;
}

在<div class="event card style="margin-left: 65px; width: 550px;"> 上，*、div 和 body 与上述相同。

在<div class="card-header inlineblock" style="text-overflow: ellipsis;"> 和<div class="card-date text-caption" style="float: right;"> 和<div class="text-title"> 上，*、div 和body 与上述相同。

所以似乎不是标题负责。

<div class="message inlineblock text-body"> 和<div style="text-overflow: ellipsis; white-space: pre-wrap; height: auto;"> 除了*、div 和body 之外，不继承任何其他类。

<hr/> 确实继承了几种样式，但没有一个可以控制高度。

按钮的<span> 也只继承相同的全局类。

所以在这一点上，我很困惑为什么我的卡不会变高。我看不到任何限制它的东西，但无论我明确设置它多高，它都不会超过 457px。

有什么想法吗？

无论如何，{{message['email-body']}} 元素都会溢出到省略号中。我似乎无法让 div 更高。

Answer 1

您是否尝试过使用calc 功能

* {
  /* So 100% means 100% */
  box-sizing: border-box;
}
html, body {
  /* Make the body to be as tall as browser window */
  height: 100%;
  background: #ccc;
  padding: 20px;
}
body {
  padding: 20px;
  background: white;  
}
.area-one {
  /* With the body as tall as the browser window
     this will be too */
  height: 100%;
}
.area-one h2 {
  height: 50px;
  line-height: 50px;
}
.content {
  /* Subtract the header size */
  height: calc(100% - 50px);
  overflow: auto;
}