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

Question

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

3

以下是代码，在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>

- LearningDeveloper

如果您在文本区域的CSS中添加width: 100%; height: 80%，会发生什么？ - Aguardientico

@Aguardientico：宽度没问题，但高度没有增加，现在默认只显示一行。 - LearningDeveloper

@GauthamPJ，你的文本区域认为.column的高度只有一行。尝试给你的.column添加一个高度，例如300像素。 - Guilherme Oderdenge

@chiefGui：是的，这会增加高度，但会将“压缩按钮”向下移动约一英寸。 :/ - LearningDeveloper

@PJ：Lo PJ，你不需要登录 Fiddle 哦！:-) - Harsha Venkataramu

我只是在使用Firefox时遇到了这个问题。我认为textarea的row和col属性在不同的浏览器中表现不同。我删除了row和col属性，并在我的CSS中使用了宽度和高度。通过这种方式，我的问题得到了解决。 - Noman_ibrahim

3个回答

1

尝试这个。

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

- Rajendra Khabiya

1

如果一个元素被包含在一个div中，那么高度设置为100%表示父div的高度...不要使用100%，而是使用一个固定的高度，比如250像素，这也不会影响响应式CSS，因为垂直滚动在响应式CSS中是允许的...所以尝试用一个固定高度。 - Rajendra Khabiya

是的，我试过了，它可以工作，但我想把它显示为百分比，以便它能够在页面上显示到一定的高度。这可行吗？ - LearningDeveloper

1

如果你想要显示文本框的高度，它的父元素标签应该是 body 或者高度为 100% 的 div...每当我们以 % 的方式设置 CSS 样式时，它始于其父元素。 - Rajendra Khabiya

0

你还没有声明高度，请添加“height: 80%”，你只是说了最大值和最小值 - 它本质上不知道中间应该是什么。

- Oli Fletcher

对我来说似乎工作正常，你测试的IE版本是什么？可以尝试声明html、body和container的高度为100%吗？ - Oli Fletcher

我正在使用IE9，在textarea中添加了**height: 90%**，但仍然没有任何区别。只有一行文本区域被显示出来。 - LearningDeveloper

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Guilherme Oderdenge · Accepted Answer

如果高度没有按预期那样表现，可以尝试为.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的小插件。无需绕过：

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