在所有浏览器中一致地显示文本区域大小答案

【问题标题】：Display textarea size consistently in all Browsers在所有浏览器中一致地显示文本区域大小
【发布时间】：2013-07-03 12:35:26
【问题描述】：

我在 IE 中的以下代码有一个小问题。

该设计在 Chrome 和 Firefox 中是完美的，但 IE 呈现的 textarea 尺寸非常小。我想要它在 Firefox 或 Chrome 中的样子。

它可能与
Consistently sizing a <textarea> under IE, FF, Safari/Chrome的重复
或
Firefox / IE textarea sizing quirk - workarounds?
但没有提到适当的解决方案。所以我开始了这个。

我确信 jQuery 可以解决它，但我只想要我的页面中的 CSS，有没有合适的 CSS 解决方案？？

我无法登录 jsFiddle，所以，没有 jsFiddle 伙计们.. :(

<!DOCROOT html>

<html>

<head>

    <meta charset="utf-8" />

    <title>Code Compressor</title>

    <link href="styles.css" rel="stylesheet" type="text/css" />

    <style type="text/css">

        .container {
            width: 100%;
            overflow: hidden;
        }

        .column {
            width: 48%;
            margin: 1%;
            float: left;
        }

        textarea {
            min-width: 100%;
            max-width: 100%;

            min-height: 80%;
            max-height: 80%;

            overflow: auto;
        }

        .center {
            clear: both;
            text-align: center;
        }

    </style>

</head>


<body>

    <div class="container">

        <div class="column">
            <div>Input Source:</div>
            <textarea id="sourceCode" name="sourceCode" ></textarea>
        </div>

        <div class="column">
            <div>Compressed Output:</div>
            <textarea id="outputCode" name="outputCode" ></textarea>
        </div>

        <div class="center">
            <input type="button" id="compressButton" name="compressButton" 
                value="Compress" onClick="compress" />
        </div>

    </div>

</body>

</html>

【问题讨论】：

如果你把width: 100%; height: 80%放在你的textarea的css中会怎样？
@Aguardientico：宽度工作正常，但高度没有增加，现在默认只显示 1 行。
@GauthamPJ 您的文本区域正在考虑.column 的高度仅为一行。例如，尝试将 300 像素的高度添加到您的 .column。
@chiefGui：是的，这会增加高度，但会使 压缩按钮 在页面下方约一英寸处移动。 ://
@PJ：Lo PJ，我说你不需要登录 Fiddle！ :-)

标签： html css

【解决方案1】：

如果高度不符合预期，请尝试为.column 设置高度。你的textarea 在一个柱子里面，它的高度是他父亲的百分比，但是，你父亲有多高？

更新

如果您将高度设置为textarea，您说过.center 层会与列重叠，对吗？然后我们必须设置列之间的相对关系，我们必须向 HTML 解释我们的.center 应该在我们的列之后。为此，请遵循以下代码：

.column {
    width: 48%;
    height: 500px; /* for example */
    position: relative; /* add this to trasnform your columns 
                           relative to each other */
    margin: 1%;
    float: left;
}

textarea {
    min-width: 100%;
    max-width: 100%;

    width: 90%;
    height: 90%;

    min-height: 80%;
    max-height: 80%;

    overflow: auto;
}

.center {
    width: 100%; /* to specify that your "center" must 
                    to occupy 100% of the width on the screen. */
    position: relative; /* to transform the position to relative */
    float: left; /* to accompany the columns' floating */
    clear: both;
    text-align: center;
}

百分比理解

只是为了让事情看起来更好：要使用百分比，我们需要一个初始点。这意味着要让某物具有其他某物的 80% 的高度，我们需要知道其他某物的高度。

换句话说，要.something有80%的身高，我们需要知道他父亲的身高，如果他父亲有90%的身高，他父亲的父亲必须有一个指定的身高。在某些时候，我们需要一个定义的高度。

JavaScript 替代品

正如我所说，我在百分比度量上工作了太多，但没有成功找到使用纯 CSS 2.1 的解决方案。在那里，我用 JavaScript + jQuery 创建了这个 mini-plugin。没有工作轮次：

function calculateResponsiveHeight(couple) {
    for (var value in couple) {
        $(value)
            .css("height", 
                 $(couple[value].wrapper).height() - 
                   couple[value].spacing + "px");
    }
}

用法：

calculateResponsiveHeight({
    ".content": {
        spacing: 135, // how much you want to spacing your layer?
        wrapper: window // who is the reference point?
    }
});

【讨论】：

是否添加了宽度和高度，仅影响宽度，高度仅保持 1 行高。
好的，如果我在 PX 中给出高度，它会起作用，但 Compress 按钮确实离两个 textarea 框有点远。我不能有 % 高度以便它完全动态吗？？
您可以使用百分比定义高度，但使用纯 CSS，有时您需要定义高度。使用 CSS 3，您可以使用 calc() 使其完全动态化，但如果没有此功能，您应该使用 JavaScript。
哦.. K.. 这是迄今为止最好的答案。现在我将输入 PX 值。但会保持线程打开一天，看看是否有新的答案出现。
我在一个使用完全响应式布局的应用程序中工作，并且我在百分比方面做了很多工作。说真的，我已经围绕这个主题进行了太多的搜索，而使用纯 CSS 是不可能的。正如我所说，我们需要知道某个时刻的高度。

【解决方案2】：

试试这个

#outputCode{
width:100%;
height:100%;
}

【讨论】：

如果它在 div 内超过 100% 高度意味着父 div 的高度...而不是 100% 使用静态高度（如 250px）它也不会影响响应式 CSS，因为在响应式中允许垂直滚动css ...所以尝试使用固定高度
是的，确实尝试过，它正在工作，但我希望它在 % 中，以便它显示到页面的某个高度。有可能吗？

【解决方案3】：

您还没有声明高度，添加“高度：80%”，您刚刚说了最大值和最小值 - 它本质上并不知道它应该介于两者之间。

【讨论】：

对我来说似乎可以正常工作，您测试的是哪个版本的 IE？总是可以尝试声明高度为 100% 的 html、body 和容器？
我用的是IE9，在textarea中添加了height: 90%，还是没有区别。仅显示 1 行文本区域。