Question

我有一些包含消息的漂亮材料卡片。它们处于无限滚动的Feed中。期望的行为是他们会在＆＃34;更多＆＃34;之后显示完整的消息。单击按钮，因为消息往往很长。原型化这种行为，我试图修改我的应用程序，以便始终显示全长的消息，但是我无法让卡片获得高于457px的卡片，而我无法弄清楚原因。

通过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和{{1}与上述内容相同}。

所以它似乎不是负责的标题。

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

body确实继承了几种样式，但没有一种可以控制高度。

按钮的<hr/>也只会继承相同的全局类。

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

有关为何的想法？

<span>元素无论如何都会溢出到省略号中。我似乎无法使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;
}

控制div

1 个答案: