时间戳

首页 > 解决方案 > 如何让弯曲的孩子占据100％的高度

html - 如何让弯曲的孩子占据100％的高度

问题描述

我无法使复选框 div 占据 100% 的高度，如下面的代码/小提琴所示。正如您从第二个孩子看到的那样，高度为 100%（悬停不占用 100% 的高度），但我也希望第一个孩子的高度为 100%。我如何实现这一目标？

jsfiddle：https ://jsfiddle.net/s3hdx14u/

供将来参考的代码（由于 scss 而无法使用）

ul {
    &.content {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    li {
        align-items: center;
        display: flex;
        flex-direction: row;
        overflow: auto;

        & + li {
            border-top: 5px solid black;
        }

        div.checkbox {
            height: 100%;
            flex: 1;
            align-items: stretch;
            flex-shrink: 0;
            &:hover {
                background-color: green;
            }
            input[type=checkbox] {
    
            }
        }

        div.container {
            padding: 10px;
            width: 100%;
            &:hover {
                background-color: lighten(lightblue, 10%);
                cursor: pointer;
            }
        }

        header {
            font-size: 125%;
            font-weight: bold;
            .small {
                font-size: 80%;
                font-weight: normal;
            }
        }        
    }
}
        <ul class="content">
            <li 
                v-for="(result, key) in results" 
                :key="key"
            >
                <div class="checkbox">
                    <input 
                        type="checkbox" 
                    />
                </div>
                <div>
                  content<br>
                  content<br>
                  content<br>
                  content<br>                  
                </div>
            </li>
        </ul>

标签： htmlcsssassflexbox

解决方案

这可以通过对 SCSS 进行一些调整来实现。首先，您可以从中删除以下规则div.checkbox，并添加display:flex

div.checkbox {
    // height: 100%;
    // flex: 1;
    // align-items: stretch;
    // flex-shrink: 0;

    display:flex; // Add this

    ...
}

通过将display:flex规则添加到 中div.checkbox，我们可以基于 flex 控制它的任何子元素的垂直放置。

最后，我们实际上希望复选框在div.checkbox. 为此，我们可以将align-self规则添加input[type=checkbox]如下：

input[type=checkbox] {    
    align-self: center; // Add this
}

有关工作示例，请参阅此 jsFiddle - 希望对您有所帮助！

推荐阅读