Jquery/CSS: 100% высота ДИВ изменяет размер, даже если переполнение авто

Question

http://jsfiddle.net/34tuuq2o/

ДИВ изменяет, даже если у меня есть overflow-y набор для auto и я дал DIV высоту (хотя эта высота не появляется в firebug DOM viewer).

Как я могу заставить div активировать полосу прокрутки вместо изменения размера?

Также мне нужно установить высоту для контейнера (height: 90%;)?

$('[type=button]').click(function() { 
 
    $('#chat').append("<p>text</p>"); 
 
});

.block { 
 
    display: block; 
 
} 
 
#chatDiv { 
 
    background-color: #F2D9AA; 
 
    background-color: rgba(242, 217, 170, 1); 
 
    font: 18px serif black; 
 
    border-radius: 3px; 
 
    width: 100%; 
 
    max-height: 50%; 
 
    min-height: 300px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
#chatDiv > .container { 
 
    height: 90%; 
 
    margin-bottom: 10%; 
 
} 
 
#chat { 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    height: 100%; 
 
} 
 
#chatInput { 
 
    position: absolute; 
 
    bottom: 0; 
 
    overflow: hidden; 
 
    border-top: 1px solid #AD8539; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 
#chatInput .container { 
 
    padding: 5px; 
 
    margin: 0; 
 
} 
 
#chatInput[type=text] { 
 
    width: 100%; 
 
    border: none; 
 
    background-color: transparent; 
 
    font: 18px serif; 
 
    overflow: hidden; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="block" id="chatDiv"> 
 
    <div class="block container"> 
 
    <div id="chat"></div> 
 
    </div> 
 
    <div class="block" id="chatInput"> 
 
    <div class="container"> 
 
     <input type="text" name="chatTI" /> 
 
    </div> 
 
    </div> 
 
</div> 
 
<input type='button' value='append'></input>

Answer 1

Не спрашивайте меня, как я только что попробовал вещи, но это работает: http://jsfiddle.net/o6d3644L/

$('[type=button]').click(function() { 
 
    $('#chat').append("<p>text</p>"); 
 
});

.block { 
 
    display: block; 
 
} 
 
#chatDiv { 
 
    background-color: rgba(242, 217, 170, 1); 
 
    border-radius: 3px; 
 
    font: 18px serif black; 
 
    max-height: 50%; 
 
    min-height: 300px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
#chatDiv .container { 
 
    bottom: 10%; 
 
    display: block; 
 
    left: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
} 
 
#chat { 
 
    height: 100%; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
#chatInput { 
 
    border-top: 1px solid #ad8539; 
 
    bottom: 0; 
 
    left: 0; 
 
    margin: 0; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 90%; 
 
} 
 
#chatInput .container { 
 
    margin: 0; 
 
    padding: 5px; 
 
} 
 
#chatInput[type="text"] { 
 
    background-color: transparent; 
 
    border: medium none; 
 
    font: 18px serif; 
 
    margin: 0; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="block" id="chatDiv"> 
 
    <div class="container"> 
 
    <div id="chat"></div> 
 
    </div> 
 
    <div class="block" id="chatInput"> 
 
    <div class="container"> 
 
     <input type="text" name="chatTI" /> 
 
    </div> 
 
    </div> 
 
</div> 
 
<input type='button' value='append'></input>

Answer 2

вам нужно изменить CSS, основные изменения:

набор htmlbody и height: 100%

набор #chatDivheight: 50%

набор .containerposition: absolute

попробовать это:

$('[type=button]').click(function() { 
 
    $('#chat').append("<p>text</p>"); 
 
});

body, 
 
html { 
 
    height: 100%; 
 
} 
 
.block { 
 
    display: block; 
 
} 
 
#chatDiv { 
 
    background-color: #F2D9AA; 
 
    background-color: rgba(242, 217, 170, 1); 
 
    font: 18px serif black; 
 
    border-radius: 3px; 
 
    width: 100%; 
 
    height: 50%; 
 
    min-height: 300px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
#chatDiv > .container { 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 40px; 
 
} 
 
#chat { 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    height: 100%; 
 
} 
 
#chatInput { 
 
    position: absolute; 
 
    bottom: 0; 
 
    overflow: hidden; 
 
    border-top: 1px solid #AD8539; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 
#chatInput .container { 
 
    padding: 5px; 
 
    margin: 0; 
 
} 
 
#chatInput[type=text] { 
 
    width: 100%; 
 
    border: none; 
 
    background-color: transparent; 
 
    font: 18px serif; 
 
    overflow: hidden; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="block" id="chatDiv"> 
 
    <div class="block container"> 
 
    <div id="chat"></div> 
 
    </div> 
 
    <div class="block" id="chatInput"> 
 
    <div class="container"> 
 
     <input type="text" name="chatTI" /> 
 
    </div> 
 
    </div> 
 
</div> 
 
<input type='button' value='append'></input>

Answer 3

Давайте начать с сокращения наша HTML-разметка немного.

Нам нужно:

• чат обертка, чтобы элементы чата содержали - класс является .chat

• Разговор нашего чата - этот класс .conversation который будет прокручиваться

• Ввод - класс .input

Для отображения нашего окна чата красиво:

• html,body { height: 100%; } позволяет элементы имеют высоту в процентах

• .chat получает высоту 50% (от высоты 100% на HTML, тело)

• ребенок чата - .conversation - задается высотой 90% (от его высоты родительского .chat «s) и входной ДИВ получает на оставшуюся 10%

• overflow-y: scroll скрывает переполнение .conversation и отображает полосу прокрутки.

CSS/HTML/Demo

$('[type=button]').click(function() { 
 
    $('.conversation').append("<p>text</p>"); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
} 
 
.chat { 
 
    height: 50%; 
 
} 
 
.conversation { 
 
    background-color: #F2D9AA; 
 
    background-color: rgba(242, 217, 170, 1); 
 
    font: 18px serif black; 
 
    height: 90%; 
 
    overflow-y: scroll; 
 
} 
 
.input { 
 
    background-color: #F2D9AA; 
 
    background-color: rgba(242, 217, 170, 1); 
 
    border-top: solid 1px #AD8539; 
 
    padding: 10px; 
 
    height: 10%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="chat"> 
 
    <div class="conversation"></div> 
 

 
    <div class="input"> 
 
    <input type="text" class="chat-input" /> 
 
    <button type='button'>Append</button> 
 
    </div> 
 
</div>