Question

我只是难倒;我有一个元素，由于我无法看到的原因，不会以任何方式响应控制它的高度的尝试。大部分代码都是不必要的，但我对HTML / CSS非常了不起，通常当我无法破解某些东西时，或者由于某些我不知道的默默无闻或者我应该有的愚蠢;大多数情况下，我只想要这个<tbody>元素滚动

<div class="orb-card">
    <ul class="orb-card">
        <!-- TOP  ROW -->
        <li class="orb-card-row">
            <div id="favorite" class="orb-card-button">
                <div class="triangle-down"></div>
            </div
                    >
            <div id="description" class="orb-card-content">
                <p>Zesty BBQ Sauce, Double Hamburger, Real Bacon, Onions, Tomatoes, Mozzarella & Cheddar
                    Cheese</p>
                <h4 id="hidden-description">BBQ BACON CHEESEBURGER PIZZA</h4>
            </div>
        </li>
        <!-- MIDDLE  ROW -->
        <li class="orb-card-row">
            <div id="order" class="orb-card-button">
                <div class="triangle-down"></div>
            </div
                    >
            <div id="price-matrix" class="orb-card-content">
                <table class="price-matrix-content">
                    <thead>
                    <tr>
                        <td><h4 id="price-matrix-size">SIZE</h4></td>
                        <td><h4 id="price-matrix-price">PRICE</h4></td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td class="orb-size">9in</td>
                        <td class="orb-price"> $ 13.10</td>
                    </tr>
                    <tr>
                        <td class="orb-size">12in</td>
                        <td class="orb-price"> $ 17.50</td>
                    </tr>
                    <tr>
                        <td class="orb-size">16in</td>
                        <td class="orb-price"> $ 21.65</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </li>
        <!-- BOTTOM ROW -->
        >
        <li class="orb-card-row">
            <div id="like" class="orb-card-button">
                <div class="triangle-right"></div>
            </div>
            <div id="orb-card-options" class="orb-card-content"></div>
        </li>
    </ul>
</div>

我的CSS（从SASS生成）：

div.orb-card-content {
    width       : 29.6875rem;
    margin-left : 1.25rem;
    position    : relative; }

div.orb-card-content#description {
    background-color : #b4b4b4;
    height           : 5.3125rem;
    padding          : 0.625rem;
    font-family      : "Helvetica Neue Medium Condensed", arial, sans-serif; }

div.orb-card-content#price-matrix {
    max-height : 5.3125rem; }

div.orb-card-content#price-matrix h4 {
    width       : 6.25rem;
    font-family : "Helvetica Neue Condensed Black", arial, sans-serif;
    color       : #e02027; }

div.orb-card-content#price-matrix h4#price-matrix-size {
    float : left;
    clear : left; }

div.orb-card-content#price-matrix h4#price-matrix-price {
    float : right;
    clear : right; }

div.orb-card-content#price-matrix table {
    margin   : 0;
    position : relative;
    height   : 5.3125rem; }

div.orb-card-content#price-matrix thead {
    height : 1.75313rem; }

div.orb-card-content#price-matrix tbody#stupid-fuck {
    padding    : 0;
    margin     : 0;
    height     : 60px;  // originally expressed in rems, tried increasingly more explicit in attempt to make this worl :S
    max-height : 60px;
    overflow-y : scroll; }

div.orb-card-content#price-matrix td {
    color : #373737; }

div.orb-card-content#orb-card-options {
    background-color : #373737; }

Answer 1

标准不允许{table-row-group＆＃39;上的overflow设置元素。您寻求的行为实际上是supported in Firefox 9 years ago but removed to comply to standards。

tbody元素不会尊重max-height

1 个答案: