3

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

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

它可能是
在 IE、FF、Safari/Chrome
或
Firefox / IE textarea 大小调整怪癖下一致地调整 <textarea> 大小的副本 - 解决方法？
但没有提到适当的解决方案。所以我开始了这个。

我确信 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>
4

3 回答 3

2

如果高度不符合预期，请尝试为.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 创建了这个迷你插件。没有工作一个回合：

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?
    }
});
于 2013-07-03T12:39:29.663 回答
1

试试这个

#outputCode{
width:100%;
height:100%;
}
于 2013-07-03T12:47:20.990 回答
0

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

于 2013-07-03T12:43:05.643 回答