Есть код:
<footer> <div class="rightfooter"><input type="text"> </div></footer>
Как блок .rightfooter
не имеет фиксированной высоты, но нужно чтобы поле ввода растягивалось на всю его высоту, как это сделать?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуВот так можно попробовать сделать:
$('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.
input
height: inherit;