How to make textarea 100% without overflow when padding is present ?

If we have given an HTML document containing <textarea> element and its parent element contains some padding then how to make textarea width to 100%. textarea contains

The idea is to create a div with the class name “wrapper”. Inside that <div> element, we create a text area with a certain number of columns and rows. In this case, it is 30 and 15 respectively. After that, we set the width property to 100% to make a Textarea width 100%.

HTML Code: The HTML code contains a <textarea> element that holds rows and columns values.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to make 100% tetxarea
        without overflowing when
        padding is pressent?
    </title>
</head>
  
<body>
    <div class="wrapper">
        <textarea cols="30" rows="15"></textarea>
    </div>
</body>
  
</html>

chevron_right


CSS Code: The CSS code contains the wrapper class that holds padding, margin and background-color property. The textarea element contains the width property.

filter_none

edit
close

play_arrow

link
brightness_4
code

<style>
    .wrapper {
        padding: 20px;
        margin:15px 0
        background-color: #0f9d58;
    }
      
    textarea {
        font-size:20px;
        width:100%;
    }
</style>

chevron_right


Complete Code: In this section, we will combine the above two sections to make the width of <tetxarea> element to 100% without overflowing when padding is pressent.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to make 100% tetxarea
        without overflowing when
        padding is pressent?
    </title>
  
    <style>
        .wrapper {
            padding: 20px;
            margin: 15px 0;
            background-color: #0f9d58;
        }
  
        textarea {
            font-size: 20px;
            width: 100%;
        }
    </style>
</head>
  
<body>
    <div class="wrapper">
        <textarea cols="30" rows="15"></textarea>
    </div>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.