1

I am trying to set the height of a textarea element based on the window size using css. 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. 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?

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). Both elements should hopefully have almost the height of the window size, which did not result after using height: 100%;.

A link to a jsfiddle, where 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>
Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100
dsax7
  • 1,333
  • 22
  • 36
  • You mean using % width / height instead of fixed? – Marc Hjorth May 12 '18 at 09:12
  • 1
    Well, basically you are searching for something similar `height: 100%;` or `height: 100vh;`. We would need a bit more of your code in order to provide an accurate solution. – Paul May 12 '18 at 09:12
  • I edited my post. And as for the code, I just started, so I basically have an empty text area, which I am trying to scale. – dsax7 May 12 '18 at 09:25
  • `My goal is to have 2 textarea elements next to each other` i only see one ? – Rainbow May 12 '18 at 12:19
  • Well, I assumed that if I get one of them with the right size (length), I will simply copy and paste it, so I did not add the second one to the jsfiddle.. – dsax7 May 12 '18 at 12:21

3 Answers3

2

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

.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'>&nbsp;</span><textarea class='myfunones'>text2</textarea>
  </div>
</body>
Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100
1

Instead of a fixed width of 900px, set it to 100%, so the height becomes 100% of its parent/container.

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:

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.

.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:

This time I used flex to distribute the space and space between the two textareas. I applied the margin on the container so that it is easily adjusted without making the textareas bigger or smaller.

.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>
Ivan
  • 34,531
  • 8
  • 55
  • 100
Jos van Weesel
  • 2,128
  • 2
  • 12
  • 27
  • I tried your solution, but it still does not stretch the `textarea` to the end. – dsax7 May 12 '18 at 10:38
  • The end of what? It's hard to imagine what you mean without an example. Could you share what you tried? – Jos van Weesel May 12 '18 at 10:42
  • I have added a jsfiddle in the question. My goal is to increase the height of `textarea` so that it reaches the bottom of the web page (almost the bottom as there is some margin). This should hopefully be the same viewed from any size display. – dsax7 May 12 '18 at 10:56
  • 1
    There is a difference between putting the textarea at the bottom of the page and making it reach the bottom. If you mean the first option, then [**» this «**](https://jsfiddle.net/SirExotic/2vm2pf31/2/) will do that. You forgot to put the textarea in the container div in my example, as well. Did that help? – Jos van Weesel May 12 '18 at 11:22
1

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>
Rainbow
  • 6,772
  • 3
  • 11
  • 28