Верстаю диалоги примерно как у вк. Использую flexbox
Скрин
Код
.block-flex-div { display: flex;width: 100%;justify-content: space-between;box-sizing: border-box;}
.block-line-flex {display: flex;padding: 8px; height: auto;font-size: 14px;width: 100%;color: #666;font-weight: 500;text-align: left;box-sizing: border-box; }
.block-column-flex{ flex: 1;}
.block-flex-div.dialogs-block{height: 100%;}
.block-column-flex.dialogs-user-list{flex: 1 1 13%; min-width:150px; white-space: nowrap;overflow:hidden;overflow-y:auto;color: #999;font-size:16px;border: 1px solid #efefef;}
.block-column-flex .dialogs-user-info{padding: 10px; border-top: 1px solid #efefef;text-align:left}
.block-column-flex .dialogs-user-info:first-child {border-top: 0px solid #efefef;}
.block-column-flex .dialogs-user-info:last-child {border-bottom: 1px solid #efefef;}
.block-column-flex .dialogs-user-info .dialogs-user-photo {flex: 1 1 20%;padding: 5px;}
.block-column-flex .dialogs-user-info .dialogs-user-name {flex: 2 1 80%;padding: 5px;}
.block-column-flex.dialogs-user-chat{flex: 2 1 80%;border-top: 1px solid #efefef;border-right: 1px solid #efefef;border-bottom: 1px solid #efefef;}
.block-line-flex.dialogs-user-chat-body-wrap {height: 90%;}
.block-line-flex.dialogs-user-chat-input {background: #fafbfc; max-height:70px; border-top: 1px solid #efefef}
.block-column-flex.chat-text-input {flex: 1 1 80%;padding:5px;}
.block-column-flex.chat-text-input #text {box-sizing: border-box; width: 100%;padding:8px 10px;}
.block-column-flex.chat-input-send-bottom {flex: 2 1 20%;padding:5px;}
<div class="block-flex-div dialogs-block">
<div class="block-column-flex dialogs-user-list">
<div class="block-line-flex dialogs-user-info">
<div class="block-column-flex dialogs-user-photo">
<img src="http://cliparting.com/wp-content/uploads/2016/05/Smiley-face-crazy-face-clip-art-smiley-eyes-clip-art-vector-clip-art.jpg" width="50" class="img-circle img-responsive vknotify-comment-avatar">
</div>
<div class="block-column-flex dialogs-user-name">
Имя
</div>
</div>
<div class="block-line-flex dialogs-user-info">
<div class="block-column-flex dialogs-user-photo">
<img src="http://cliparting.com/wp-content/uploads/2016/05/Smiley-face-crazy-face-clip-art-smiley-eyes-clip-art-vector-clip-art.jpg" width="50" class="img-circle img-responsive vknotify-comment-avatar">
</div>
<div class="block-column-flex dialogs-user-name">
Имя
</div>
</div>
<div class="block-line-flex dialogs-user-info">
<div class="block-column-flex dialogs-user-photo">
<img src="http://cliparting.com/wp-content/uploads/2016/05/Smiley-face-crazy-face-clip-art-smiley-eyes-clip-art-vector-clip-art.jpg" width="50" class="img-circle img-responsive vknotify-comment-avatar">
</div>
<div class="block-column-flex dialogs-user-name">
Имя
</div>
</div>
<div class="block-line-flex dialogs-user-info">
<div class="block-column-flex dialogs-user-photo">
<img src="http://cliparting.com/wp-content/uploads/2016/05/Smiley-face-crazy-face-clip-art-smiley-eyes-clip-art-vector-clip-art.jpg" width="50" class="img-circle img-responsive vknotify-comment-avatar">
</div>
<div class="block-column-flex dialogs-user-name">
Имя
</div>
</div>
<div class="block-line-flex dialogs-user-info">
<div class="block-column-flex dialogs-user-photo">
<img src="http://cliparting.com/wp-content/uploads/2016/05/Smiley-face-crazy-face-clip-art-smiley-eyes-clip-art-vector-clip-art.jpg" width="50" class="img-circle img-responsive vknotify-comment-avatar">
</div>
<div class="block-column-flex dialogs-user-name">
Имя
</div>
</div>
</div>
<div class="block-column-flex dialogs-user-chat">
<div class="block-line-flex dialogs-user-chat-body-wrap">
чат
</div>
<div class="block-line-flex dialogs-user-chat-input">
<div class="block-column-flex chat-text-input">
<input type="text" id="text" name="text" value="" placeholder="Текст ответа">
</div>
<div class="block-column-flex chat-input-send-bottom">
<button type="button" class="btn btn-success">Отправить</button>
</div>
</div>
</div>
</div>
Как мне блок .dialogs-user-chat-input
прижать к низу блока .dialogs-user-chat
, а блок .dialogs-user-chat-body-wrap
чтобы занимал все остальное пространство.
Вам нужно сделать всю обертку флексбоксом, расположить элементы в колонку и окну чата добавить свойство flex-grow: 1
.
.block-flex-div {
display: flex;
width: 100%;
justify-content: space-between;
box-sizing: border-box;
}
.block-line-flex {
display: flex;
padding: 8px;
height: auto;
font-size: 14px;
width: 100%;
color: #666;
font-weight: 500;
text-align: left;
box-sizing: border-box;
}
.block-column-flex {
flex: 1;
}
.block-flex-div.dialogs-block {
height: 100%;
}
.block-column-flex.dialogs-user-list {
flex: 1 1 13%;
min-width: 150px;
white-space: nowrap;
overflow: hidden;
overflow-y: auto;
color: #999;
font-size: 16px;
border: 1px solid #efefef;
}
.block-column-flex .dialogs-user-info {
padding: 10px;
border-top: 1px solid #efefef;
text-align: left
}
.block-column-flex .dialogs-user-info:first-child {
border-top: 0px solid #efefef;
}
.block-column-flex .dialogs-user-info:last-child {
border-bottom: 1px solid #efefef;
}
.block-column-flex .dialogs-user-info .dialogs-user-photo {
flex: 1 1 20%;
padding: 5px;
}
.block-column-flex .dialogs-user-info .dialogs-user-name {
flex: 2 1 80%;
padding: 5px;
}
.block-column-flex.dialogs-user-chat {
flex: 2 1 80%;
border-top: 1px solid #efefef;
border-right: 1px solid #efefef;
border-bottom: 1px solid #efefef;
display: flex;
flex-direction: column;
}
.block-line-flex.dialogs-user-chat-body-wrap {
flex-grow: 1;
}
.block-line-flex.dialogs-user-chat-input {
background: #fafbfc;
max-height: 70px;
border-top: 1px solid #efefef
}
.block-column-flex.chat-text-input {
flex: 1 1 80%;
padding: 5px;
}
.block-column-flex.chat-text-input #text {
box-sizing: border-box;
width: 100%;
padding: 8px 10px;
}
.block-column-flex.chat-input-send-bottom {
flex: 2 1 20%;
padding: 5px;
}
<div class="block-flex-div dialogs-block">
<div class="block-column-flex dialogs-user-list">
<div class="block-line-flex dialogs-user-info">
<div class="block-column-flex dialogs-user-photo">
<img src="http://cliparting.com/wp-content/uploads/2016/05/Smiley-face-crazy-face-clip-art-smiley-eyes-clip-art-vector-clip-art.jpg" width="50" class="img-circle img-responsive vknotify-comment-avatar">
</div>
<div class="block-column-flex dialogs-user-name">
Имя
</div>
</div>
<div class="block-line-flex dialogs-user-info">
<div class="block-column-flex dialogs-user-photo">
<img src="http://cliparting.com/wp-content/uploads/2016/05/Smiley-face-crazy-face-clip-art-smiley-eyes-clip-art-vector-clip-art.jpg" width="50" class="img-circle img-responsive vknotify-comment-avatar">
</div>
<div class="block-column-flex dialogs-user-name">
Имя
</div>
</div>
<div class="block-line-flex dialogs-user-info">
<div class="block-column-flex dialogs-user-photo">
<img src="http://cliparting.com/wp-content/uploads/2016/05/Smiley-face-crazy-face-clip-art-smiley-eyes-clip-art-vector-clip-art.jpg" width="50" class="img-circle img-responsive vknotify-comment-avatar">
</div>
<div class="block-column-flex dialogs-user-name">
Имя
</div>
</div>
<div class="block-line-flex dialogs-user-info">
<div class="block-column-flex dialogs-user-photo">
<img src="http://cliparting.com/wp-content/uploads/2016/05/Smiley-face-crazy-face-clip-art-smiley-eyes-clip-art-vector-clip-art.jpg" width="50" class="img-circle img-responsive vknotify-comment-avatar">
</div>
<div class="block-column-flex dialogs-user-name">
Имя
</div>
</div>
<div class="block-line-flex dialogs-user-info">
<div class="block-column-flex dialogs-user-photo">
<img src="http://cliparting.com/wp-content/uploads/2016/05/Smiley-face-crazy-face-clip-art-smiley-eyes-clip-art-vector-clip-art.jpg" width="50" class="img-circle img-responsive vknotify-comment-avatar">
</div>
<div class="block-column-flex dialogs-user-name">
Имя
</div>
</div>
</div>
<div class="block-column-flex dialogs-user-chat">
<div class="block-line-flex dialogs-user-chat-body-wrap">
чат
</div>
<div class="block-line-flex dialogs-user-chat-input">
<div class="block-column-flex chat-text-input">
<input type="text" id="text" name="text" value="" placeholder="Текст ответа">
</div>
<div class="block-column-flex chat-input-send-bottom">
<button type="button" class="btn btn-success">Отправить</button>
</div>
</div>
</div>
</div>
Оборудование для ресторана: новинки профессиональной кухонной техники
Частный дом престарелых в Киеве: комфорт, забота и профессиональный уход
Помогите пожалуйста сделать подобную разметку
Здравствуйте, подскажите, пожалуйстаВот есть, например, какой-то блок посередине страницы
Нужно выбрать сгруппированные по IP записи за последнюю минуту и DateTime, где одинаковые IP и DateTime, но разные RequestURIТ