Unable to set the max-height to 100% on textarea in CSS

Question

Unable to set the max-height to 100% on textarea in CSS

Within my div, I have a layout consisting of a header, textarea, and footer. The header and footer adjust their size based on content, while the textarea fills the remaining space. To ensure the textarea does not exceed 100% height, I set its max-height to be 100%. However, when resizing the textarea, it can expand beyond the parent's 100%. How can this issue be resolved?

View the code here: http://jsfiddle.net/FC7eY/1650/

Key Points:

The cumulative heights of all elements should equal 100%
The height of the textarea-wrapper div should be calculated as
```
totalHeight(100%) - headerHeight - footerHeight
```
The header and footer sizes are dynamic and depend on content
The parent/wrapper div must have a height of 80% and a width of 350px

html css textarea

Answer 1

Answer №1

To ensure all elements are visible on the screen regardless of size, you can utilize calc CSS for adjusting the height and width of textareas. By using display table and table-row properties, you can effectively manage element visibility across different screen sizes. To dynamically set the height of a textarea while excluding header and footer heights, consider implementing the following approach: ** For an updated example, refer to this Updated Fiddle for the CSS modifications.

UPDATE: The second div will now occupy the remaining height and width without horizontal overflow

html,
body,
* {
  margin: 0;
  padding: 0;
}

.wrap {
  width: 350px;
  height: 80%;
  display: table;
  border: 3px solid magenta;
}

.wrap > div {
  background: red;
  display: table-row;
  height: 0;
}

#textarea-wrapper {
  background: pink;
  height: auto;
}

#text {
  max-width: calc(350px - 3px);
  max-height:100%;
}

<div class="wrap">
 <div id="header">Header<br>Header<br>Header<br>Header<br>Header<br></div>
 <div id="textarea-wrapper">
   <textarea id="text"></textarea>
 </div>
 <div id="footer">Footer<br>Footer<br>Footer<br>Footer<br></div>
</div>

Answer 2

To ensure all elements are visible on the screen regardless of size, you can utilize calc CSS for adjusting the height and width of textareas. By using display table and table-row properties, you can effectively manage element visibility across different screen sizes. To dynamically set the height of a textarea while excluding header and footer heights, consider implementing the following approach: ** For an updated example, refer to this Updated Fiddle for the CSS modifications.

UPDATE: The second div will now occupy the remaining height and width without horizontal overflow

html,
body,
* {
  margin: 0;
  padding: 0;
}

.wrap {
  width: 350px;
  height: 80%;
  display: table;
  border: 3px solid magenta;
}

.wrap > div {
  background: red;
  display: table-row;
  height: 0;
}

#textarea-wrapper {
  background: pink;
  height: auto;
}

#text {
  max-width: calc(350px - 3px);
  max-height:100%;
}

<div class="wrap">
 <div id="header">Header<br>Header<br>Header<br>Header<br>Header<br></div>
 <div id="textarea-wrapper">
   <textarea id="text"></textarea>
 </div>
 <div id="footer">Footer<br>Footer<br>Footer<br>Footer<br></div>
</div>

Unable to set the max-height to 100% on textarea in CSS

Answer №1

Similar questions

Having trouble with dragging a file from one box to another in HTML5. The functionality is not working

Personalized animated Reactflow Connection Lines

What are the steps to transmit post data containing PHP source code with symbols such as (+, *, /, -) and save this information to a file using an AJAX request?

What could be causing the issue of not being able to load CSS files or images?

Guide on storing images in a designated folder using CodeIgniter

Struggling to properly line up the baselines of navigation list items that are styled as circular elements using CSS

Foundation Unveil Modal hidden from view

Looking for a solution to dynamically fill a list in JQuery with data from a JSON file. Any suggestions for troubleshooting?

Learn how to retrieve images from the web API at 'https://jsonplaceholder.typicode.com/photos' and showcase them on a webpage using Angular10

utilize a variable to insert the image URL into CSS styling

The functionality of "Body Onload" for sending "ScrollHeight" is malfunctioning in Chrome and Safari

Tips for making Google search results include query strings in the returned links

The title in my div class doesn't seem to be properly centered, even though I have set the margin to auto. What steps can I take to correct this issue?

Positioning an image on the left side of a div within a flex container using

What is the best way to position my two icons next to each other in the footer of my React application?

"Efficiently showcasing images within percentage-based divs with responsive design

The CSS media query is failing to function as expected

Avoid stretching the div to the edge of the screen

What is the proper way to ensure a pull right display appears correctly?

How to implement the @click event on a Bootstrap4 dropdown menu in a Nuxt.js project