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

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

该设计在Chrome和Firefox中非常完美，但IE使文本区域的大小非常小。我想要它在Firefox或Chrome中的外观

它可能是

或

但没有提到适当的解决办法。所以我开始了这个

我确信jQuery可以解决这个问题，但我只想在我的页面中使用CSS，是否有合适的CSS解决方案

我无法登录到JSIDdle，因此，没有JSIDdle人员..：(

代码压缩器
.集装箱{
宽度：100%；
溢出：隐藏；
}
.栏目{
宽度：48%；
利润率：1%；
浮动：左；
}
文本区{
最小宽度：100%；
最大宽度：100%；
最小高度：80%；
最高高度：80%；
溢出：自动；
}
.中心{
明确：两者皆有；
文本对齐：居中；
}
输入源：
压缩输出：

如果高度不符合预期，那么请尝试为

.column

设置一个高度。您的

文本区域

位于一个列的内部，其高度为其父亲的百分比，但是，您的父亲有多高

更新 你说过如果你给

文本区域设置了一个高度，那么
.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%高度的东西，我们需要知道其他东西的高度

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

JavaScript替代方案
正如我所说的，我对百分比度量做了太多的工作，但没有成功地找到纯CSS 2.1的解决方案。因此，我在JavaScript+jQuery中创建了这个小插件。没有工作循环：

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?
    }
});

你没有声明高度，加上一个“高度：80%”，你只是说了最大值和最小值可以是什么-它本质上不知道应该介于两者之间。
试试这个

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

如果将
宽度：100%；高度：80%
放在textarea的css中会怎样？@Aguardietico:宽度可以正常工作，但高度没有增加，现在默认情况下只显示一行。@GauthamPJ您的textarea考虑到
.column
的高度只有一行。例如，尝试将高度增加到
.column
中例如。@chiefGui:是的，这会增加高度，但会将压缩按钮移到页面下方约一英寸处。：/@PJ:Lo PJ，你不需要登录到Fiddle，我说！：-）添加了宽度和高度，只有宽度受到影响，高度只保留在1行高度。好的，如果我用PX给出高度，它会工作，但是压缩按钮确实离两个文本区域框稍远一些。我不能用%height使它完全是动态的吗？你可以用百分比定义高度，但是用纯CSS，在某个时候你需要定义高度。有了CSS3，您可以使用来使其完全动态化，但是如果没有这个函数，您应该使用JavaScript.Oh。。K这是迄今为止最好的答案。现在我将输入PX值。。但是我会把这个帖子打开一天，看看是否有新的答案出现。我在一个使用完全响应布局的应用程序中工作，而且我在百分比方面做了很多工作。说真的，我已经在这个主题上搜索了太多，纯CSS是不可能的。正如我所说，我们需要知道某个点的高度。对我来说似乎很好，你在测试什么版本的IE？可以尝试声明高度为100%的html、正文和容器吗？我使用IE9，添加了高度：textarea中的90%，仍然没有区别。只有一行文本区域被显示。如果它在一个div内，超过100%的高度意味着父div的高度…而不是100%使用像250px这样的静态高度，它也不会影响响应css，因为响应css中允许垂直滚动…所以尝试固定高度是的，尝试过了，它正在工作，但我希望它以%显示，这样它就可以显示到页面的某个高度。有可能吗？如果你想显示textarea的高度，它的父标记将是body或高度为100%的div。。。当我们在%中给出css时，它从其父元素开始
#outputCode{
width:100%;
height:100%;
}