Question

我在IE中遇到以下代码的问题。

该设计在Chrome和Firefox中非常完美，但IE使 textarea 的尺寸非常小。我想要它在Firefox或Chrome中看起来。

它可能是重复的 Consistently sizing a <textarea> under IE, FF, Safari/Chrome
OR
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>

Answer 1

如果高度不符合预期，请尝试设置.column的高度。你的textarea位于一列之内，它的高度是他父亲的百分比，但是，你的父亲有多高？

更新

如果您将高度设置为.center，您告诉textarea图层与列重叠，对吗？然后我们必须相对于彼此设置列，我们必须向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?
    }
});

Answer 2

试试这个

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

Answer 3

你还没有声明一个身高，加上“身高：80％”，你刚才说了最大可以和最小值是什么 - 它本身并不知道它应该在什么之间。< / p>

在所有浏览器中始终显示textarea大小

3 个答案:

更新

理解百分比

JavaScript替代