CSS → Вывод в одной строке фиксированного и резинового элемента

06.09.2016

Несколько способов вывода в одной строке фиксированного и резинового элемента:


1. float:left + float:none

Самый простой способ, когда фиксированный элемент флоатится, а резиновый нет:

.fixed {
  float: left;
  width: 200px;
}
.fluid {
  margin-left: 200px;
}

https://jsfiddle.net/xandeadx/09fcx78e/

Минусы:

  1. Дублирование размера фиксированного элемента (сначала в width, потом в margin-left)
  2. Внутри резинового элемента нельзя делать clear:left или clear:both, иначе дочерний элемент съедет под фиксированный (демо). Решается созданием враппера внутри .fluid с заданием ему нового контекста форматирования.

2. Отрицательный margin

Способ, используемый для создания многоколоночных раскладок:

.wrapper {
  margin-left: 200px;
}
.fixed {
  float: left;
  width: 200px;
  margin-left: -200px;
}
.fluid {
  float: left;
  width: 100%;
}

https://jsfiddle.net/xandeadx/y03qecqe/

Минусы:

  1. Дублирование размера фиксированного элемента (margin-left, width)
  2. Ограниченные возможности стилизация враппера, поскольку фиксированный элемент выходит за его пределы (демо). Решается созданием дополнительного враппера.

3. position:absolute

Фиксированный элемент позиционируется абсолютно, а резиновому устанавливается левый отступ:

.fixed {
  position: absolute;
  width: 200px;
}
.fluid {
  margin-left: 200px;
}

https://jsfiddle.net/xandeadx/6dat0x4c/

Минусы:

  1. Дублирование размера фиксированного элемента (width, margin-left)
  2. Можно использовать только если резиновый элемент по высоте равен или больше фиксированного, или если известна высота фиксированного элемента, чтобы была возможность установить min-height для резинового.

4. display:table + display:table-cell

Эмуляция таблицы:

.wrapper {
  display: table;
  width: 100%;
}
.fixed {
  display: table-cell;
  width: 200px;
}
.fluid {
  display: table-cell;
}

https://jsfiddle.net/xandeadx/nc7d0qq5/

Минусы:

  1. Высота элементов будет одинаковая
  2. Невозможно задать внешние отступы для элементов
  3. Другие ограничения и особенности поведения таблиц

Большинство минусов решается созданием дополнительных врапперов внутри элементов.

5. float:left + calc()

Использование css3 функции calc() для вычисления ширины резинового элемента:

.fixed {
  float: left;
  width: 200px;
}
.fluid {
  float: left;
  width: calc(100% - 200px);
}

https://jsfiddle.net/xandeadx/m6qyxhvo/

Минусы:

  1. Дублирование размера фиксированного элемента
  2. Не будет работать в Opera Mini

6. Flexbox

Использование флексбокса:

.wrapper {
  display: flex;
}
.fixed {
  flex: 0 0 200px;
}
.fluid {
  flex-grow: 1;
}

https://jsfiddle.net/xandeadx/g8sq6d3p/

Минусы:

  1. IE 11+
Похожие записи

Комментарии

danSamara
06.09.2016, 20:27

Ты забыл упомянуть CSS3 Grid - хотя сейчас и рано говорить о свободном использовании данной технологии, но зато через три года эта статья будет всё ещё актуальной :)

"Дублирование размера", имхо, не есть минус - less/sass уже вовсю заменяют голый CSS.

1. float:left + float:none:

Дублирование размера фиксированного элемента (сначала в width, потом в margin-left)

если можно использовать overflow: hidden; то marging-left можно убрать.

Внутри резинового элемента нельзя делать clear:left или clear:both, иначе дочерний элемент съедет под фиксированный

опять же, если нет ограничений на использование overflow: hidden;, то это св-во снимает ограничения. (демо)

не рекомендую использовать overflow:hidden не по назначению

я бы сказал по другому, нужно понимать последствия его применения, потому что назначений может быть несколько в зависимости от того что надо сделать и какая верстка

Гость
09.09.2016, 11:03

display: inline-block;
width: 100%
внутрь резинового блока и можно использовать clear:both

не рекомендую использовать overflow:hidden не по назначению

А в чем собственно проблема? Я например всегда использую overflow вместо псевдо элемента ::after с clear:both или вместо очищающего div.

проблемы в том, что обрезается всё что выходит за пределы элементы, в том числе тени, и создаётся новый контекст

Гость
25.08.2017, 13:54

Для Flexbox лучше так:

.fixed {
  flex: 0 0 200px;
}

Вариант с width: 200px; не всегда работает.

Добавить комментарий