我在 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>
最佳答案
如果高度不符合预期，请尝试为 .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?
}
});
关于html - 在所有浏览器中一致地显示文本区域大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17448162/