Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.11.2016, 06:30
Аспирант
Отправить личное сообщение для snovapavel Посмотреть профиль Найти все сообщения от snovapavel
 
Регистрация: 08.03.2015
Сообщений: 78

Как сделать 50% высоты у дочерних блоков, с помощью flexbox?
Добрый день!

Как с помощью flexbox сделать такую конструкцию?

<div class="wrapper"><!-- Высота этого контейнера неизвестна -->
    <div class="column"><!-- Этот, должен быть 100% высоты своего ↑ родителя -->
        <div class="cell"></div><!-- Один под другим. 50% высоты -->
        <div class="cell"></div><!-- Один под другим. 50% высоты -->
    </div>
</div>
Ответить с цитированием
  #2 (permalink)  
Старый 07.11.2016, 09:16
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от snovapavel
Как с помощью flexbox сделать такую конструкцию?
Не совсем понятно зачем именно флекс... Но, как вариант.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.wrapper {
	/* для примера */
	height: 200px;
	border: 1px solid red;
	display: flex;
	align-items: stretch;
}
.column {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	border: 1px solid green;
}
.cell {
	height: 50%;
	border: 1px solid;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div class="wrapper"><!-- Высота этого контейнера неизвестна -->
    <div class="column"><!-- Этот, должен быть 100% высоты своего ↑ родителя -->
        <div class="cell">1</div><!-- Один под другим. 50% высоты -->
        <div class="cell">2</div><!-- Один под другим. 50% высоты -->
    </div>
</div>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 07.11.2016, 11:32
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

Сообщение от snovapavel
Как сделать 50% высоты у дочерних блоков, с помощью flexbox?
можно также у дочерних элементов flex-grow: 1;

<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
	height: 200px;
}
.column {
    height: 100%;
    display: flex;
    flex-direction: column;
    outline: 3px solid green;
}
.cell {
    flex-grow: 1;
    background: orange;
}
.cell:last-child {
    background: tan;
}
  
</style>
</head>
<body>
  <div class="wrapper"><!-- Высота этого контейнера неизвестна -->
      <div class="column"><!-- Этот, должен быть 100% высоты своего ↑ родителя -->
          <div class="cell">1</div><!-- Один под другим. 50% высоты -->
          <div class="cell">2</div><!-- Один под другим. 50% высоты -->
      </div>
  </div>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать переход по этой ссылке с помощью js licn87 Events/DOM/Window 7 03.01.2016 16:35
Как сделать статичную шапку сайта с помощью JavaScript Strekodza Общие вопросы Javascript 4 19.12.2012 20:24
Вопрос как сделать эту панельку Определённых размеров и свойств. jei jQuery 3 09.06.2009 19:14
Как сделать электронный каталог продукции? natarius Серверные языки и технологии 6 24.05.2009 20:56
Как сделать, чтобы 2 ссылки отображались как hover при наведении мышкой на любую? Ava Элементы интерфейса 5 19.05.2009 23:24