Диалоги как у вконтакте. Как прилепить блок ввода сообщения к низу блока чата?

256
29 марта 2018, 07:01

Верстаю диалоги примерно как у вк. Использую 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 чтобы занимал все остальное пространство.

Answer 1

Вам нужно сделать всю обертку флексбоксом, расположить элементы в колонку и окну чата добавить свойство 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>

READ ALSO
Разметка для стены как у Вконтакте [требует правки]

Разметка для стены как у Вконтакте [требует правки]

Помогите пожалуйста сделать подобную разметку

533
Параллакс элементов при скролле

Параллакс элементов при скролле

Здравствуйте, подскажите, пожалуйстаВот есть, например, какой-то блок посередине страницы

245
Как правильно составить данный sql запрос?

Как правильно составить данный sql запрос?

Нужно выбрать сгруппированные по IP записи за последнюю минуту и DateTime, где одинаковые IP и DateTime, но разные RequestURIТ

257
Необходимо исправить запрос из питона в БД mysql

Необходимо исправить запрос из питона в БД mysql

Есть код для добавления в mysql:

234