0

Есть код:

<footer> <div class="rightfooter"><input type="text"> </div></footer>

Как блок .rightfooter не имеет фиксированной высоты, но нужно чтобы поле ввода растягивалось на всю его высоту, как это сделать?

2
  • Попробуйте указать для input height: inherit;
    – Alexander
    29 фев 2016 в 20:14
  • див итак примет высоту инпута, если там нифига больше нет. 29 фев 2016 в 20:26

1 ответ 1

0

Вот так можно попробовать сделать:

$('button').click(function(){
  $('footer').toggleClass('active')
})
* {
  box-sizing: border-box
}
body, html {
 
}
body {
  background: #797A9E
}
.rightfooter, .leftfooter {  
  display: flex;
  flex-direction: column
}
input, textarea {
  flex: 1;  
}

/*--layout--*/
.wrapper {
  max-width: 600px;
  margin: auto;
  display: flex;
  flex-direction: column;
  min-height: 80vh
}
.content {
  flex: 1;
  background: #fff;
}
footer {
  background: #72727E;
  padding: 20px;
  display: flex;
  justify-content: space-between;  
  height: 100px;
  transition: 1s
}
footer.active {
  height: 200px;
  transition: 1s
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="content">
    <button>click me</button>
  </div>
<footer>
  <div class="rightfooter">
    <input type="text" placeholder="input"> 
  </div>
  <div class="leftfooter">
    <textarea placeholder="textarea"></textarea>
  </div>
</footer>
</div>

И я бы советовал использовать textarea потому как ввод текста будет начинаться с первой строки окна, а не по середине, как у input'a.

1
  • не совсем то, что нужно, но спасибо, интересное решение! )
    – SvArt713
    2 мар 2016 в 14:33

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.