The absolute positioned area of ​​the text does not match the properties on the right and bottom

Question

I am trying to create an absolute position for a text area that will stretch to cover its parent. Unfortunately, Chrome seems to ignore the right property , and Firefox ignores the right and bottom properties .

Here is the CSS that I use:

#container {
  position: relative;
}
#my-text-area {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 10px;
  right: 10px;
}

Run codeHide result

Here is a JsFiddle example: enter link description here

textarea , ? , , , 0.

Answer 1

css . : https://jsfiddle.net/lotusgodkk/csub6b96/2/

HTML:

<div id="container">
    <div id="my-text-area">

        <textarea></textarea>
    </div>

</div>

CSS

body,
html,
#container {
    width: 100%;
    height: 100%;
}

body {
    margin: 0px;
}

#container {
    position: relative;
}

#my-text-area {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

textarea {
    height: 100%;
    width: 100%;
}

: http://snook.ca/archives/html_and_css/absolute-position-textarea

Answer 2

, inherit width, height .

fiddle .

body,
html,
#container {
  width: 100px;
  height: 100px;
}

body {
  margin: 0px;
}

#container {
  position: relative;
}

#my-text-area {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  width: inherit;
  height: inherit;
}

<div id="container">
  <textarea id="my-text-area"></textarea>
</div>

Hide result