将 textarea 的 line-height 设置为与背景中的 li 元素高度相同的百分比答案

【问题标题】：Setting a textarea's line-height to a percentage equal to the same height as a li element in the background将 textarea 的 line-height 设置为与背景中的 li 元素高度相同的百分比
【发布时间】：2015-01-08 03:24:03
【问题描述】：

我在设置 textarea 的行高时遇到了麻烦。我希望它始终与背景中的li 元素高度相同，因为当您调整屏幕大小时，文本会越过行并进入看起来一点都不好看的新行。我一直在想办法解决这个问题，但我一直画空白.. li 有一个 height 的 5% ，我需要 textarea 的 line-height 也是 @987654328 @，但我需要基于ul 的height 而不是content-wrapper 的百分比。是否有可能以某种方式实现这一目标？详情见下文。

看看这张图片（每一行都是li）：

它有这样的结构：

<main class="full-height">
    <div id="top-bar">
        <button id="all-notes" class="btn brown-btn hide">Alla anteckningar</button>
        <button id="add-note" class="btn brown-btn">Ny</button>
        <input type="submit" form="note-text" value="Klar" id="done-btn" class="btn brown-btn hide">
        <button id="edit" class="btn brown-btn hide">Ändra</button>
    </div>
    <div id="content-wrapper" class="full-height">
        <div class="vertical-stripes"></div>
        <div class="vertical-stripes"></div>
        <ul id="note-block" class="reset">
            <li>
                <span>Idag</span>
                <span class="date"><?php include('datetime.php'); ?></span>
                <span><?php echo date('H:i'); ?></span>
            </li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <form id="note-text" method="post" action="../includes/notepages/savenote.php">
            <textarea name="textarea" id="notes-area">Text goes here</textarea>
        </form>
    </div>
</main>

覆盖所有内容的 textarea 的 CSS 以及构成文本行的 lis。

ul#note-block {
    height: 90%;
    border: $thin-grey;
    @include smoothEdges($bottomLeft: 10px, $bottomRight: 10px);
    z-index: 1;

    li {
        height: 5%;
        border-bottom: $thin-grey;
        box-sizing: border-box;
        background-color: $notes-yellow;
    }
}

textarea#notes-area {
    position: absolute;
    top: 17%;
    left: 12%;
    width: 86%;
    height: 72%;
    line-height: 43px; //This can't be a fixed px height, needs to be 5% like the li above
    padding: 0;
    border: 0;
    outline: 0;
    resize: none;
    overflow: auto;
    background: none;
    font-family: notesworthy;
    font-size: 20px;
}

【问题讨论】：

标签： html css sass

【解决方案1】：

当 CSS 高度以百分比指定时，它是 height of a containing element 的百分比。因此，声明高度为 5% 的元素仍将因其父项的高度而具有不同的高度。

尝试使用其他相对单位之一来声明高度，例如 rem 或 vh。 1rem 与 html 元素的字体大小相同，而 1vh 是视口高度的 1/100。这两个单位都将与访问者的浏览器相关，但无论您设计什么元素都是一样的。

【讨论】：