Textarea не заполняет высоту родительского div

Я пытаюсь создать две колонки (одну с фотографией и выбором, а другую с текстовой областью). Мне нужно, чтобы моя текстовая область была той же высоты, что и столбец с фотографией, кнопкой и выбором.Textarea не заполняет высоту родительского div

Я нарисовал правый DIV до черного и с помощью «flex» он имеет тот же размер, что и левый. Но установка height=100% !improtant; в textarea не помогает.

Кроме того, установка height=500px !important хорошо работает и составляет 500 пикселей, поэтому размер действительно меняется. Но 100% не дают мне надлежащего результата.

.modalimg { 
 
    width:100%; 
 
    max-height:100px; 
 
    margin-bottom:5px; 
 
} 
 

 
.modalimg + button { 
 
    margin-bottom:5px; 
 
} 
 

 
.row-eq-height { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
}

<div class="form-group row-eq-height"> 
 
    <div class="col-sm-2 col-sm-offset-1"> 
 
    <img src="https://pp.vk.me/c637522/v637522431/7314/Of3UbOiEb8o.jpg" class="modalimg col-sm-12 img-rounded"> 
 
    <button class="btn col-sm-12 btn-primary">Upload</button> 
 
    <select class="form-control"> 
 
     <option>One</option> 
 
     <!--set of options--> 
 
    </select> 
 
    </div> 
 
    <div class="col-sm-9 " style="background: #000000;"> 
 
    <textarea type="text" placeholder="Body" class="form-control body-field row-eq-height"></textarea> 
 
    </div> 
 
</div>

источник

2016-09-07 utkillr

Установка 'height: 100%' на текстовое поле _does_ заставляет его заполнить его родительский элемент. Пример https://jsfiddle.net/xkkkapjL/. Возможно, это потому, что вы неправильно произнесли «важный» ('! Improtant'). – Turnip

Если вы укажете вашему div на шкалу '100%', он будет масштабироваться полностью до размера его родителя, который содержит его, а не другого элемента. Если вы установите 'height' на' 100% 'и измените размер родителя, вы увидите изменения. Таким образом, ваш 'textarea' будет масштабироваться до размера' col-sm-9'. – Justplayit94

Вы применили 'дисплей: Flex;' к неправильному элементу. Т. Е.

.col-sm-9, .row-eq-height { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
}

источник

2016-09-07 13:16:39 brod

с помощью JQuery можно получить высоту, как вам требуется

$(document).ready(function() { 
 
    var rightBoxHeight = $('.right-box-height').height(); 
 
    $('.left-box-height').css('height',rightBoxHeight); 
 
});

.modalimg { 
 
    width:100%; 
 
    max-height:100px; 
 
    margin-bottom:5px; 
 
} 
 

 
.modalimg + button { 
 
    margin-bottom:5px; 
 
} 
 

 
.row-eq-height { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group row-eq-height"> 
 
    <div class="col-sm-2 col-sm-offset-1 right-box-height"> 
 
    <img src="https://pp.vk.me/c637522/v637522431/7314/Of3UbOiEb8o.jpg" class="modalimg col-sm-12 img-rounded"> 
 
    <button class="btn col-sm-12 btn-primary">Upload</button> 
 
    <select class="form-control"> 
 
     <option>One</option> 
 
     <!--set of options--> 
 
    </select> 
 
    </div> 
 
    <div class="col-sm-9 " style="background: #000000;"> 
 
    <textarea type="text" placeholder="Body" class="form-control body-field row-eq-height left-box-height"></textarea> 
 
    </div> 
 
</div>

источник

2016-09-07 13:00:04

Textarea не заполняет высоту родительского div

ответ

Смежные вопросы