[英]Set textarea element height based on window size
我正在嘗試使用css根據窗口大小設置textarea元素的高度。 問題是，如果我使用height設置，則在一台顯示器上觀看將足夠好，而在另一台顯示器上將無法觀看。 例：
textarea {
resize: none;
margin: 5px 10px 5px 10px;
border-radius: 8px;
height: 900px;
}
可以僅使用CSS來完成此工作，還是使用JS來完成？
編輯：
我的目標是使2個textarea元素彼此相鄰，並且它們之間的距離很小，而與底部/頂部的距離很小（ergo margin）。 希望兩個元素都具有幾乎與窗口大小相同的高度，這在使用height: 100%;之后不會產生height: 100%; 。
指向jsfiddle的鏈接，其中height: 100%; 沒有做到這一點。
/* 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>
也許剛開始的時候，我使用了帶有綠色邊框的包裝器，因此您可以看到發生了什么。
您可能（我的假設）不想要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>
而不是將固定寬度設置為900px ，而是將其設置為100% ，因此高度變為其父級/容器級的100% 。
textarea {
resize: none;
margin: 5px 10px 5px 10px;
border-radius: 8px;
height: 100%;
}
如果要設置瀏覽器窗口本身的高度 （ 視口高度 ），請使用100vh ：
textarea {
resize: none;
margin: 5px 10px 5px 10px;
border-radius: 8px;
height: 100vh;
}
示例：我刪除了所有樣式，以使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>
根據要求更新 2個文本區域：
這次我使用flex在兩個文本區域之間分配空間。 我在容器上應用了頁邊距，以便可以輕松進行調整而不會增大或減小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>
尋找這樣的東西？
* { 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>
使用JavaScript根據瀏覽器窗口大小設置div的高度
[英]Using javascript to set the height of a div based on browser window size
根據當前屏幕窗口大小為我的模式窗口設置max-height
[英]set max-height for my modal window based on the current screen window size
我可以設置TEXTAREA元素的高度，但以后讓用戶調整其大小嗎？
[英]Can I set height of TEXTAREA element but let user resize it later?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.