Bootstrap адаптивное оформление

300

28 марта 2017, 10:48

Как сделать чтобы объекты 1 2 и 3 заполняли всю высоту div2

,но не на равные три части нужно чтобы 1 и 3 были равны а 2 я выставлял бы сам?

Примерно вот так:

проблема в том что Div2 занимает весь экран и я не могу знать его высоту.

Важно что бы я мог выставлять высоту 2 произвольно например вот так:

Answer 1

Не уверена что условие поняла, но например flex:

body { 
  font-size: 5rem; 
  color: #95989a; 
  font-weight: bold; 
  text-align: center; 
} 
 
.div1 { 
  background: #f3f3f3; 
  padding: 1rem; 
} 
 
.div2 { 
  background: #dfdfdf; 
} 
 
.b-1, 
.b-3 { 
  background: #ffb9b9; 
   
  /*height: 100px;*/ 
} 
 
.b-2 { 
  background: #ffdcdc; 
  flex: 1 auto; 
} 
 
.div2 { 
  height: 100vh; /* На всю высоту экрана, например */ 
   
  display: flex; 
  flex-flow: column nowrap; 
   
}

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<div class="div1"> 
  <div class="div2"> 
    <div class="col-xs-offset-5 col-xs-2 b-1"> 
      1 
    </div> 
     
    <div class="col-xs-offset-5 col-xs-2 b-2"> 
      2 
    </div> 
     
    <div class="col-xs-offset-5 col-xs-2 b-3"> 
      3 
    </div> 
  </div> 
</div>

Вариант 2 (задана фиксированная высота второго блока):

body { 
  font-size: 5rem; 
  color: #95989a; 
  font-weight: bold; 
  text-align: center; 
} 
 
.div1 { 
  background: #f3f3f3; 
  padding: 1rem; 
} 
 
.div2 { 
  background: #dfdfdf; 
} 
 
.b-1, 
.b-3 { 
  background: #ffb9b9; 
   
  /* height: 100px; */ 
  flex: 1 auto; 
} 
 
.b-2 { 
  background: #ffdcdc; 
  /* flex: 1 auto; */ 
  height: 50px; 
} 
 
.div2 { 
  height: 100vh; /* На всю высоту экрана, например */ 
   
  display: flex; 
  flex-flow: column nowrap; 
   
}

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<div class="div1"> 
  <div class="div2"> 
    <div class="col-xs-offset-5 col-xs-2 b-1"> 
      1 
    </div> 
     
    <div class="col-xs-offset-5 col-xs-2 b-2"> 
      2 
    </div> 
     
    <div class="col-xs-offset-5 col-xs-2 b-3"> 
      3 
    </div> 
  </div> 
</div>

Создание интернет-магазина спортивных товаров в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Создание адаптивных форм

Хочу на сайт добавить контактную форму, но не совсем понимаю как сделать плавающими поля формы (input type="text"), ведь у поля ввода есть фиксированная...

281

HTML

Форма отправки на почту

Добрый деньНе могли бы вы помочь мне объединить мою форму, с рабочим вариантом? Вот моя форма:

284

Документация (summary) во внешнем файле

Имеется библиотекаВ ней методы, поля (свойства), которые хорошо бы описать, чтобы при использовании Visual Studio высвечивала описание и подсказки...

254

Отдельная страница для каждого товара ASP.NET MVC

Делаю учебный сайт на ASPNET MVC, в котором на главной должен быть список товаров и отдельные страницы на каждый товар, на которые ведут ссылки...

291