我有以下列表:
.outer-container{ height: 300px; width: 300px;}
.container {
position: relative;
border: solid 1px red;
height: 100%;
width: 100%;
overflow: auto;
}
.inner {
position: absolute;
bottom: 0;
width: 100%;
}
.item{
text-align: center;
padding: 12px;
border-bottom: 1px solid yellow;
}
.add{
width: 100%;
min-height: 30px;
border-top: 1px solid orange;
border-bottom: 1px solid orange;
}
.add textarea{
border: none;
width: 100%;
padding: 0;
}

<div class="outer-container">
<div class="container">
<div class="inner">
<div class="list">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<div class="add">
<form>
<textarea placeholder="Add some text"></textarea>
</form>
</div>
</div>
</div>
</div>
&#13;
这里的jsfiddle: http://jsfiddle.net/gubs5fg7/
textarea将扩大投入。
我试图仅在div.list元素上使滚动处于活动状态(溢出-y),即textarea旁边没有滚动条。我有一种感觉,我需要添加一些具有绝对和相对定位的嵌套div,但我想知道有没有办法让它像现在一样工作? (编辑 - 没有javascript可以吗?)
.outer-container div的高度将取决于窗口大小,所以不会总是300px。
答案 0 :(得分:0)
尝试:
* { box-sizing: border-box; }
.outer-container{ height: 300px; width: 300px;}
.container {
position: relative;
border: solid 1px red;
height: 100%;
width: 100%;
overflow-y: scroll;
}
.inner {
bottom: 0;
width: 100%;
overflow:vizibile;
}
.item{
text-align: center;
padding: 10px;
border: 1px solid yellow;
}
.add{
width: 100%;
min-height: 30px;
border: 1px solid orange;
}
.add textarea{width: 100%; border: none;resize: vertical;}
的jsfiddle:http://jsfiddle.net/gubs5fg7/2/
或根据您的需要:
$('textarea').on('keypress',function(){
$('.list').css({'margin-bottom': $('textarea').height()+'px'});
});
的CSS:
.add {
position: relative;
}
.add textarea{width: 100%; border: none;resize: vertical;
position:absolute;
bottom:0;
}
的jsfiddle:http://jsfiddle.net/gubs5fg7/5/