All geek questions in one place

Textarea CSS {height: 100%} in a table-cell div (IE) element

NOTE. This is a problem only in IE.

How to force a text field to vertically fill a cell table div? I applied height: 100%to all the parent elements, but the text area still retains its default height.

Screenshot: Example from my test site

An example of my problem: JSFiddle

Code example:

HTML

<div class="table">
    <div class="row">
        <div class="col col-sm">
            <div class="thumbnail">Thumbnail</div>
        </div>
        <div class="col col-lg">
            <textarea>Text area</textarea>
        </div>
    </div>
</div>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.table {
    display: table;
    width: 100%;
    height: 100%;
}
.row {
    display: table-row;
    height: 100%;
}
.col {
    display: table-cell;
    border: 1px dashed #FF0000;
    padding: 5px;
    vertical-align: top;
    height: 100%;
}
.col-sm {
    width: 30%;
}
.col-lg {
    width: 70%;
}
.thumbnail {
    height: 150px;
    width: 200px;
    border: 1px solid #CCC;
}

textarea {
    width: 100%;
    height: 100%;
}
+5
source share
6 answers

, , , . , , , CSS. : , .

http://jsfiddle.net/py4gs/14/

/ CSS , display: table*. , , .

, , . :

body {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Fiddle: http://jsfiddle.net/py4gs/12/

, . , , .

, , , , . CSS- CSS CSS IE. , , .

, . , , , (, $(document).ready()), :

$(document).ready(function() {
    // avoid layout thrashing! read then write!
    var heights = $('row').map(function(row) { return $(row).height(); });
    $('row').each(function(i, el) { 
        $(el).height(heights[i]);
    });
});

-jquery-. , . , , . , YouTube , iframe 100% , , 200px. , CSS , ( ), .

+2

, , IE CSS resize , , textarea . , :

fooobar.com/questions/772024/...

EDIT , :

$(document).ready(function() {
    $('textarea').parent().resize(function() {
        var $t = $(this);
        $t.find('textarea').height($t.height());
    }).resize();
});
+1

jsfiddle

.col {
    display: table-cell;
    border: 1px dashed #FF0000;
    padding: 5px;
    vertical-align: top;
    height:10px;
}

(.table), , 100%

jsfiddle

.table { display: table; width: 100%; height: 150px; }

jsfiddle

      <div class="col col-lg">
      <div contenteditable='true' class='contenteditable'>Text area</div>
      </div>

.contenteditable {
    width: 100%;
    height: 100%;
    }

.contenteditable p{margin-top:0px; margin-bottom:0px;}
0

- ( ), jQuery HTML, . , .

$(window).resize(function(){
   var padding = 82;
   var ratio = 0.009;
   var rows = Math.floor(($('.main-container').width()-padding)*ratio);
   $('.text-area').attr('rows',rows);
}).resize();
0

, , CSS, . , FireFox, IE SlimJet. . 90% .

jsfiddle: https://jsfiddle.net/RationalRabbit/wpsqx8kh/7/

HTML:

<body>
   <div class="table">
      <div class="row">
         <div class="col col-sm">
             <div class="thumbnail">Thumbnail</div>
         </div>
         <div class="col col-lg">
             <textarea>Text area</textarea>
         </div>
      </div>
      <div class="row">
         <div class="col col-sm">
             <div class="thumbnail">Thumbnail 2</div>
         </div>
         <div class="col col-lg">
             <textarea>Text area 2</textarea>
         </div>
      </div>
   </div>
</body>

CSS:

  * {
     -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
     box-sizing:border-box;
  }
  .table {
     width:500px;
     height:100%px;
     border:1px dashed blue;
  }
  .row {
     height:200px;
  }
  .col {
     float:left;
     border:1px dashed #FF0000;
     padding:5px;
     vertical-align:top;
     height:100%;
  }
  .col-sm {
     width:30%;
  }
  .col-lg {
     width:70%;
     height:90%;
  }
  .thumbnail {
     height:150px;
     width:100%;
     border:1px solid green;
  }
  textarea {
     height:100%;
     width:100%;
  }
0

, :

td{
   position:relative;
}
textarea{
   position:absolute;
   top:0;
   bottom:0;
   left:0;
   right:0;
}
-1

Source: https://habr.com/ru/post/1536989/

More articles:


All Articles