Question

我有以下内容：

        <div id="tab-notes" class="clearfix">
                <textarea cols=100 rows=15 class="full-width" id="dialogNotes" name="Pages">@Model.Notes</textarea>
        </div>

我添加了一个clearfix类，但似乎DIV没有拉伸以适应textarea的高度。我缺少一些简单的东西吗？

.clearfix:after, .block-controls:after, .side-tabs:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
}

Answer 1

给#tab-notes background-color你会发现拉伸到textareas高（就像它应该），如果真的没有任何其他的css-影响这些元素的规则。

你可以在这里看到它：http://jsfiddle.net/Mqke4/

如果给出这个片段，那么clearsfix似乎毫无意义，并且不会改变任何内容（http://jsfiddle.net/Mqke4/1/）。鉴于此，必须为.full-width，#tab-notes，#dialogNotes（或其他类似内容）定义导致此问题的样式。

Answer 2

您的textarea是否已应用float: left或float: right？

如果是这样，请从textarea中删除float属性。

但是如果你必须使用那个属性，解决问题的最简单方法是将float:也应用于您的div。

或者您可以使用display: block

更改div的显示类型以阻止

还有更多方法可以解决这个问题但我认为这些是最简单的。

如何使div伸展以适应textarea的高度？

2 个答案: