adjust the size of the textarea to perfectly fill the available space

I want my textarea within the wrapctxt container to always fill up the remaining space below the wrapctop section, reaching the bottom of the wrapc element.

.panelb{
  display:grid;
  grid-template-columns: 130px 34% auto;
  height:100vh;
  width:100%;
}
.wrapa{
  background:gold;
}
.wrapb{
  background:silver;
}
.wrapc{
  background:lightseagreen;
}
.wrapctop{
  background:lightblue;
  padding:9px;
}
.wrapctxt{
  display:block;
  width:100%;
  background:gold;
  padding:0;
  outline:none;
  border:none;
}
<div class='panelb'>
  <div class='wrapa'>wrapa</div>
  <div class='wrapb'>wrapb</div>
  <div class='wrapc'>
    <div class='wrapctop'>wrapctop</div>
    <textarea class='wrapctxt'></textarea>
  </div>
</div>

The content inside wrapctop can vary in length, so its height is unpredictable. How can I ensure that the wrapctxt adjusts perfectly?

htmlcssgrid

Answer №1

* {
  margin: 0;
  padding: 0;
}

.panelb {
  display: grid;
  grid-template-columns: 130px 34% auto;
  height: 100vh;
  width: 100%;
}

.wrapa {
  background: gold;
}

.wrapb {
  background: silver;
}

.wrapc {
  background: lightseagreen;
}

.wrapctop {
  background: lightblue;
  padding: 9px;
}

.wrapctxt {
  display: block;
  width: 100%;
  background: gold;
  padding: 0;
  outline: none;
  border: none;
  overflow: auto;
  height: calc(100% - 36px);
}
<div class='panelb'>
  <div class='wrapa'>wrapa</div>
  <div class='wrapb'>wrapb</div>
  <div class='wrapc'>
    <div class='wrapctop'>wrapctop</div>
    <textarea class='wrapctxt'></textarea>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customize your Bootstrap tabs with a unique border design

I am currently working on a wizard project where the header design is inspired by the image below. I am utilizing Bootstrap-4 tabs components and the :after pseudo element method on the li element to achieve this effect. However, I am facing a challenge in ...

twitter-bootstrapcssbootstrap-4

One way to create dynamic function parameters in JavaScript is by using

Currently, I am in the process of implementing a payment API checkout feature on my order.html page. However, I have encountered an issue where I need to add a script in the head of the HTML document. This script requires me to specify the subtotal amoun ...

javascripthtml

Using Javascript to deactivate a clickable image upon clicking another image

I have two buttons with alert functions assigned to each. I want the function on the first button to only work when that button is clicked, and not work if the second button has been clicked. Below is the code I've tried, but it's not functioning ...

javascriptjquerycsshtml

How to transfer a java list to an html template

I have extracted some information from an HTML file that relies on input from a Map structure as demonstrated below Template t = TemplateLoader.load("Printing/account.html"); Map<String, Object> map = new HashMap<String, Object>(); map.put("a ...

javahtmlplayframework

Polyfill for the :nth-column CSS4 Grid-Structural pseudo-class

In my CSS grid layout, I want to include a margin in every even column. While the :nth-column pseudo-class would be ideal for this, it unfortunately won't be supported in the near future. Could anyone recommend any polyfills that I could utilize, or ...

csscss-selectorscss-gridpseudo-classpolyfills

Firefox compatibility issue: Bootstrap modal button not functioning properly when wrapping other HTML elements

Hey everyone, I've come up with some awesome image hover effects that you can use. I've implemented bootstrap modals so that when you click on 'show code', a pop-up will display with the HTML and CSS codes for easy copy-pasting. However ...

htmlcsstwitter-bootstrap

Clicking on tabs causes their content to mysteriously vanish

I am working on creating a dynamic menu using jQuery that switches content based on tabs. However, I am facing an issue where clicking on a different <li> item causes the content to disappear. Each list item should correspond to different content sec ...

jqueryhtmlcssmenutabs

How can I retrieve the index of a v-for loop within a function in Vue.js HTML?

How can I splice the array from the fields in HTML Vue JS if the status is true? I also need to pass the index value to a function. Is this possible? The error I am encountering is: Uncaught ReferenceError: index is not defined at Object.success (80 ...

javascripthtmlvue.jsvue-component

Rebel Spirit on a Wordpress Platform

I've encountered a strange issue on my Wordpress blog. For some reason, the code "&nbsp" is being inserted right after the opening <body> tag. I have checked the header.php file and there is no instance of this code present there. It's ...

phphtmlcsswordpresswordpress-theming

I'm having an issue with my progress bar in ReactJS - it seems to move when I scroll the window instead of

My code includes a progress bar that works fine - it shows a movable progress bar when the window is scrolled. However, I want the progress bar to move when scrolling inside my div, not on the entire window. I am currently using jQuery for this functionali ...

javascriptjquerycssreactjs

Make sure to include !important for the hidden property when applying inline styles in React jsx

Is there a way to include !important in the hidden property within React JSX inline style? I'm attempting to conceal the scroll bar in an Ag Grid table component as it is displayed by default. I've already attempted: ref={(nod ...

javascriptcssreactjsstylesjsx

Each time a nested collapse occurs, it triggers its parent collapse

I have come across some similar answers, but they all pertain to accordions, which I am not utilizing in this case. In my code, I have nested collapse items. You can view the code snippet here on CodePen $('#collapseOutter').on('show.bs. ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Setting the minimum width for Cards in Bootstrap: A How-To Guide

I'm facing an issue with Bootstrap cards. When I set a minimum width for the cards, they end up overlapping as I reduce the window width. How can I ensure that the third card moves to the next row to prevent this overlapping? https://i.sstatic.net/XA ...

csstwitter-bootstrapsassbootstrap-4

Text positioned in the center alongside an image, or if there is limited space, it will be aligned to

Take a look at this code snippet: img { float: left; } #inner { height: 128px; background-color: yellowgreen; display: table-cell; vertical-align: middle; } #content { background-color: red; } <img src="http://cdn.memegener ...

htmlcss

Store the arrays in a JSON file before utilizing Array.push() to append data into it

I'm currently developing a calendar software and I want to store events in a JSON file. My strategy involves nesting arrays within arrays in the JSON format, allowing for easy iteration and loading during program initialization. My main question is: ...

javascripthtmlcssarraysjson

Top method for centering a flexible SVG vertically once the page width becomes too narrow

Currently, I have two SVG images displayed side by side on a webpage. One SVG needs to maintain a fixed size while the other should scale as needed, and I have achieved this functionality. However, I am facing an issue where I want the two SVGs to align v ...

javascriptjqueryhtmlcss

Guide to displaying or hiding elements based on the number of selected checkboxes

When only one checkbox is checked, all buttons in the head-btn class should be displayed. By default, only the add folder and upload buttons are shown. If a user selects two checkboxes, the share button should be hidden. If they uncheck one of the checkbo ...

javascriptjqueryhtmlcheckbox

The table value is only updated once with the onclick event, but the updated value is not displayed when the event is clicked again

I am facing an issue with updating names in a table through a modal edit form. The first name update works perfectly, but the second update does not reflect in the table. I want every change made in the modal edit form to be instantly displayed in the tabl ...

javascriptcssajaxhtmldom

"Step-by-step guide on adding and deleting a div element with a double click

$(".sd").dblclick(function() { $(this).parent().remove(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table width="750" border="0" cellpadding="0" cellspacing="0"> <tr> <t ...

javascriptjqueryhtmlcss

I am having trouble selecting Bootstrap radio buttons on my ASP.NET Core MVC application

My asp.net mvc core web application has the following code to display 2 radio buttons:- <div class="form-group"> <label class="control-label" style="font-weight:bold"> ...

htmlasp.net-corebootstrap-4asp.net-core-mvcradio-button