Как сделать адаптивную высоту блока css

DIV на всю высоту родителя?

fullpage — родительский блок с высотой в 2 экрана (200%), который содержит в себе 2 дочерних блока с высотой по 1 экрану каждый (50% от fullpage). У первого top: 0px и высота 50%, у второго top: 50% (т.к. он идёт встык после первого блока). Таким образом, мы можем задать n-е кол-во блоков-экранов с высотой (100% / n) и точкой top для каждого
for (i = 0; i < n; i++) <
top[i] = (100% / n) * i;
>
:)))

Да, а ещё в современных браузерах поддерживается такая клёвая адаптивная штука, как vh и vw, что есть размеры видимой области окна браузера по высоте и ширине соответственно:

НО! Эта штука не поддерживается на разных мобильных браузерах и на старых версиях обычных браузеров, так что пока эта штука не такая уж и крутая 🙁

CSS: скажите элементу блока заполнить высоту

Мне кажется, что это должно быть проще всего на свете, но у меня возникли трудности. Я начинаю думать, что я не знал так много о CSS, как я думал, или CSS был разработан более плохо, чем я думал.

У меня есть страница. В верхней части есть произвольное количество markup. Тогда есть элемент блока. Все, что я хочу сделать, это сделать так, чтобы этот элемент блока увеличивал свою высоту до нижней части окна.

Увидеть http://jsfiddle.net/vHVeC/4/ . Это близко, но последний элемент блока выходит за пределы видимой области браузера, создавая полосы прокрутки. Никакое содержимое не должно выходить за пределы размеров видового экрана (то есть не должно быть полос прокрутки).

Как я могу сделать это с помощью JavaScript?

3 ответа

Я делаю очень простую целевую страницу с помощью Bootstrap. Идея состоит в том, чтобы иметь текстовый элемент hero unit, охватывающий всю страницу независимо от размера окна. Инструкция width: 100%; CSS отлично работает, но height: 100%; не имеет никакого эффекта – элемент hero unit по-прежнему.

В CSS, могу ли я выровнять высоту встроенных блоков? Я думал, установив поля на 0 и высоту на авто, что блок будет расширяться, чтобы соответствовать доступному пространству, но он все еще плотно обертывается вокруг блока. .myclass < display: inline-block; margin: 0em; padding: 1em; height: auto;.

Используя Javascript, вы бы пошли:

Кстати, в вашем Fiddle узел открытого текста над div компенсирует div ниже. Он находит 100% высоты тела, но затем его толкают вниз, вызывая полосу прокрутки. Способ исправить это в CSS-это position:absolute;left:0;top:0 , который фиксирует его на месте.

Также обратите внимание, что в любом из этих случаев, если вы закончите прокрутку (например, до 150%),, вы увидите нижний край вашего div внизу на 100%.

Вы столкнулись с проблемой модели коробки css . Быстрое и грязное решение состоит в том, чтобы установить свойство overflow: hidden для предотвращения полос прокрутки, но вы должны быть очень осторожны при этом. Вам нужно будет убедиться, что ваш контент помещается на экране, так как любой контент, выходящий за пределы элемента блока, будет недоступен для пользователей.

Вот как вы можете сделать это с помощью таблицы (это чисто CSS):

Похожие вопросы:

У меня было 2 рекламных блока Adsense (300×250) в правой боковой панели моего сайта Я сделал сайт отзывчивым и заменил эти рекламные блоки адаптивными рекламными блоками Adsense. Проблема, с которой.

В этом jsfiddle нажмите на кнопку Add Question в демо-версии, чтобы добавить строку таблицы. Проблема у меня в том, что если вы посмотрите под столбцом Question в добавленной строке, то textarea не.

Блочный элемент, внутри другого блока. Первый блок имеет высоту 200px, поэтому внутренний блок должен получить общие поля + отступ + граница + высота 200px в соответствии со спецификацией CSS. Таким.

Я делаю очень простую целевую страницу с помощью Bootstrap. Идея состоит в том, чтобы иметь текстовый элемент hero unit, охватывающий всю страницу независимо от размера окна. Инструкция width: 100%;.

В CSS, могу ли я выровнять высоту встроенных блоков? Я думал, установив поля на 0 и высоту на авто, что блок будет расширяться, чтобы соответствовать доступному пространству, но он все еще плотно.

Я знаю, что можно настроить ширину блока 100%, и он расширит экран по горизонтали, как в приведенном ниже фрагменте кода. Но почему это не работает для высоты? .block1< width:100%; float:left;.

У меня есть контейнер и два div внутри него: Контейнер имеет фиксированную высоту 500px. Я не знаю размера головы, но я хочу заполнить всю высоту контейнера телом. Я попытался установить это.

Теперь мне нужно установить высоту div ‘#bottomshow’, полную rest экрана устройства. Сначала я использую rem для установки стиля. #Bg и #topSelector, я установил высоту с rem . Как установить.

Я просто пробую Tailwind CSS и хочу знать, как заполнить высоту видового окна. Взяв этот пример HTML из документов <div items-stretch bg-grey-lighter> <div >
Разделите высоту страницы на два блока, используя CSS

У меня есть два блока: заголовок .AccountInfo и контент .DebitsAndCredits . Они оба должны делить высоту страницы, и .DebitsAndCredits должно быть прокручиваемо. Управление прокруткой должно быть.

4 способа как создать блоки одинаковой высоты

Равная высота

Раньше, когда все верстали с использованием таблиц, создать колонки одинаковой высоты было очень просто. Достаточно создать таблицу, например, с 3мя колонками и все они автоматически будут иметь одинаковую высоту. Но в блочной верстке не все так просто.
В этой статье я расскажу вам о некоторых способах создания колонок равной высоты и о совместимости этих методов с браузерами (включая IE6). Все эти способы описывают создание 3х колоночного макета.

Способ 1. Использование свойства display: table

Преимущества:

Это наиболее простой и легкий способ создания колонок одинаковой высоты, в отличие от других методов.
Внешний отступ ( margin , как cellspacing для таблиц) равный для всех колонок создать не получится, однако, его можно заменить границей белого цвета (или цвета фона колонки) с соотвествующей шириной для иммитации отступа.

Недостатки:

Этот метод не работает в браузерах IE7 и ниже. Пройдет немало времени (когда IE7 станет новым IE6), прежде чем мы сможем без опаски использовать этот метод.

Способ 2: Использование JavaScript

Преимущества:

Главное преимущество метода – он работает во всех браузерах и вам не нужно напрягаться с CSS кодом для выравнивания высоты.

Недостатки:

Если JavaScript будет отключен, соотвественно, колонки не будут равной высоты. Но, как правило, это очень редкий случай, т.к. большинство современных сайтов требуют включения JS.

Способ 3: искусственные колонки

Этот метод придуман одним из первых для реализации колонок одинаковой высоты. Суть его в том, что обрамляющему блоку присваивается фон, иммитирующий колонки (см. рис. ниже). Они просто накладываются на этот фон. Эффект равной высоты создается за счет повторяющегося фона.

HTML код:

.container <
background-image: tile.png;
background-repeat: repeat-y;
width: 900px;
margin-left: auto;
margin-right: auto;

.leftsidebar <
float: left;
width: 200px;
>

.content <
float: left;
width: 400px;
>

.right <
float:left;
width: 300px;
>

Преимущества:

Очень простая реализация.

Недостатки:

Этот метод можно использовать только для макетов/колонок фиксированной ширины.

Способ 4: Использование раздельных блоков с фоном

.rightback <
width: 100%;
float:left;
background-color: green;
overflow:hidden;
position:relative;
>
.contentback <
float:left;
background-color:blue;
width: 100%;
position:relative;
right: 300px; /* width of right sidebar */
>
.leftback <
width: 100%;
position:relative;
right: 400px; /* width of the content area */
float:left;
background-color: #f00;
>

.container <
width: 900px;
margin-left: auto;
margin-right:auto;
>

.leftsidebar <
float:left;
width: 200px;
overflow:hidden;
position:relative;
left: 700px;
>

.content <
float:left;
width: 400px;
overflow:hidden;
position:relative;
left: 700px;
>

.rightsidebar <
float:left;
overflow:hidden;
width: 300px;
background-color:#333;
position:relative;
left: 700px;
>

  1. .rightback, .contentback, и.leftback содержат элементы .leftsidebar, .content and .rightsidebar, которые, в свою очередь, содержат текст.
  2. Каждый из вложенных блоков отвечает за цвет/фон колонки. В данном примере
    .leftback соотвествует.leftsidebar,
    .contentback – .content
    и .rightback – .rightsidebar.
  3. Кроме последнего (отвечающего за правую крайнюю колонку), каждому из блоков <div> задан отступ справа, равный ширине элемента, прилегающего справа, который содержит фон. В данном примере .contentback (отвечающего за фон .content) сдвинут влево на 300px (что является шириной блока .rightsidebar). (см. рис. ниже)
  4. Колонки .leftsidebar, .content и .rightsidebar расположены друг за другом с определенной шириной.
  5. Они обеспечивают отступ слева равный сумме ширины каждой из колонок, кроме крайней правой. Т.е. они равны=ширина .rightsidebar (300px) и .content (400px) = 700px.( B+G)
Преимущества:

Метод работает во всех браузерах, включая Internet Explorer 6. Для реализации не требуется JavaScript, он полностью основан на CSS и HTML.

Недостатки:

Метод не так прост, как остальные, однако, он позволяет создать столько равных по высоте колонок, сколько требуется.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *