根据窗口大小设置textarea元素的高度
[英]Set textarea element height based on window size
问题描述
I am trying to set the height of a textarea element based on the window size using css. 
我正在尝试使用css根据窗口大小设置textarea元素的高度。 The problem is, that if I set it using height it will be good enough viewed on one monitor, but on another it will not be. 问题是，如果我使用height设置，则在一台显示器上观看将足够好，而在另一台显示器上将无法观看。 Example: 例：
textarea {
resize: none;
margin: 5px 10px 5px 10px;
border-radius: 8px;
height: 900px;
}
Can this be accomplished using just CSS or is it a job for JS? 可以仅使用CSS来完成此工作，还是使用JS来完成？
EDIT: 编辑：
My goal is to have 2 textarea elements next to each other with small distance between them and a small distance from the bottom/top (ergo the margin). 我的目标是使2个textarea元素彼此相邻，并且它们之间的距离很小，而与底部/顶部的距离很小（ergo margin）。 Both elements should hopefully have almost the height of the window size, which did not result after using height: 100%; 希望两个元素都具有几乎与窗口大小相同的高度，这在使用height: 100%;之后不会产生height: 100%; . 。
A link to a jsfiddle , where height: 100%; 指向jsfiddle的链接，其中height: 100%; did not do the trick. 没有做到这一点。
/* Commented out because of background img body { background-image: url(./images/background.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } */ .btn-group button { background: #DF6C6C; border-color: transparent; color: white; padding: 10px 24px; cursor: pointer; float: left; outline: 0px !important; -webkit-appearance: none; } .btn-group button:not(:last-child) { border-right: none; /* Prevent double borders */ } /* Clear floats (clearfix hack) */ .btn-group:after { content: ""; clear: both; display: table; } /* Add a background color on hover */ .btn-group button:hover { background-color: #E58B8B; } /* Align buttons */ .wrapper { text-align: center; } textarea { resize: none; margin: 5px 10px 5px 10px; border-radius: 8px; outline: 0px !important; -webkit-appearance: none; height: 100%; }
<body> <div class="wrapper"> <div class="btn-group"> <button>Button1</button> <button>Button2</button> <button>Button3</button> <button>Button4</button> <button>Button5</button> <button>Button6</button> </div> </div> <textarea></textarea> </body>
3 个解决方案
解决方案1
2 已采纳 2018-05-12 12:40:24
Perhaps something to start with, I used a wrapper with green border so you can see what is going on. 也许刚开始的时候，我使用了带有绿色边框的包装器，因此您可以看到发生了什么。
You probably (my assumption) do not want 100% height but "remaining of 100% height" there are other answers for that on here for example https://stackoverflow.com/a/11226029/125981 您可能（我的假设）不想要100％的高度，但“保持100％的高度”在此还有其他答案，例如https://stackoverflow.com/a/11226029/125981
.btn-group button { background: #DF6C6C; border-color: transparent; color: white; padding: 10px 24px; cursor: pointer; float: left; outline: 0px !important; -webkit-appearance: none; } .btn-group button:not(:last-child) { border-right: none; /* Prevent double borders */ } /* Clear floats (clearfix hack) */ .btn-group:after { content: ""; clear: both; display: table; } /* Add a background color on hover */ .btn-group button:hover { background-color: #E58B8B; } /* Align buttons */ .wrapper { text-align: center; } .txtcontainer { border: solid lime 1px; text-align: center; height: 140px; padding-top: 5%; padding-bottom: 5%; } .spacer { width: 5%; } .myfunones{ resize: none; border-radius: 8px; outline: 0px !important; -webkit-appearance: none; height: 100%; width: 45%; }
<body> <div class="wrapper"> <div class="btn-group"> <button>Button1</button> <button>Button2</button> <button>Button3</button> <button>Button4</button> <button>Button5</button> <button>Button6</button> </div> </div> <div class='txtcontainer'> <textarea class='myfunones'>text</textarea><span class='spacer'> </span><textarea class='myfunones'>text2</textarea> </div> </body>
解决方案2
1 2018-05-12 09:14:20
Instead of a fixed width of 900px , set it to 100% , so the height becomes 100% of its parent/container. 而不是将固定宽度设置为900px ，而是将其设置为100% ，因此高度变为其父级/容器级的100% 。
textarea {
resize: none;
margin: 5px 10px 5px 10px;
border-radius: 8px;
height: 100%;
}
If you want to set the height of the browser window itself ( viewport height ), then use 100vh : 如果要设置浏览器窗口本身的高度 （ 视口高度 ），请使用100vh ：
textarea {
resize: none;
margin: 5px 10px 5px 10px;
border-radius: 8px;
height: 100vh;
}
Example: I removed all the styling so that the textarea is covering the parents' height and width exactly. 示例：我删除了所有样式，以使textarea完全覆盖父母的高度和宽度。
.container { height: 200px; background: steelblue; } textarea { resize: none; height: 100%; width: 100%; margin: 0; border: none; overflow: auto; -webkit-box-shadow: none; -moz-box-shadow: none; border-radius: 0; background: rgba(255, 255, 255, 0.5); } textarea:focus, textarea:active { outline: none; }
<h1>Text field</h1> <div class="container"> <textarea></textarea> </div>
Update with 2 textareas as requested: 根据要求更新 2个文本区域：
This time I used flex to distribute the space and space between the two textareas. 这次我使用flex在两个文本区域之间分配空间。 I applied the margin on the container so that it is easily adjusted without making the textareas bigger or smaller. 我在容器上应用了页边距，以便可以轻松进行调整而不会增大或减小textareas。
.container { display: flex; flex-direction: row; justify-content: space-between; align-content: center; height: 200px; background: steelblue; margin: 20px; } textarea { flex: 0 1 48%; height: 100%; margin: 0; border: none; overflow: auto; resize: none; -webkit-box-shadow: none; -moz-box-shadow: none; border-radius: 0; background: rgba(255, 255, 255, 0.5); } textarea:focus, textarea:active { outline: none; }
<h1>Text field</h1> <div class="container"> <textarea></textarea> <textarea></textarea> </div>
解决方案3
1 2018-05-12 12:28:49
Looking for something like this ? 寻找这样的东西？
* { padding: 0; margin: 0; box-sizing: border-box; } .container { height: 100vh; display: grid; grid-template-areas: ". ."; grid-template-rows: 100% 100%; grid-gap: 10px; background-color: #09ff00; padding: 10px 0; } .left, .right { resize: none; border-radius: 8px; }
<div class="container"> <textarea class="left"></textarea> <textarea class="right"></textarea> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.