Div по размеру содержимого: html — Ширина div по контенту

Как сделать ширину блока по содержимому css

min-content, max-content и fit-content в CSS

От автора: понимание размеров в CSS необходимо разработчикам, которым нужна гибкость для правильного представления содержимого веб-страницы. В CSS мы определяем размер элемента, используя значения длины (px, em), процентов и ключевых слов. Хотя типы значений длины и процентного значения часто используются для макетов веб-страниц, они не всегда идеально подходят.

Иногда мы используем ключевые слова, такие как fit-content, min-content и max-content. В этом руководстве мы расскажем о значении этих ключевых слов, их различии и как они могут применяться в реальном проекте. Прежде чем мы продолжим, убедитесь, что у вас есть базовые представления о CSS.

Внутренние и внешние размеры

Рассмотрим div элемент, содержащий контент с фиксированной шириной и высотой 200 пикселей:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Установим рамку для div, чтобы увидеть размер.

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

С другой стороны, когда размер содержимого определяет размер элемента, мы называем его внутренним или естественным размером.

Ограничивая размер блока определенным размером, мы сталкиваемся с переполнением контента, что является обратной стороной внешнего изменения размера.

Однако мы можем исправить нежелательное поведение, чтобы улучшить макет, определив внутренний размер элемента с помощью ключевых слов.

Значение ключевого слова min-content

Согласно спецификации W3C, min-content — это наименьший размер, который может принимать блок, не переполняя его содержимое.

Для горизонтального содержимого min-content использует длину самой широкой части содержимого в блоке элемента и автоматически устанавливает значение его длины как ширину блока. Контент в этом случае включает текст и ресурсы, такие как изображения и видео.

Если мы вернемся к приведенному выше примеру, мы можем применить min-content к элементу нашей коробки следующим образом:

Размеры блока

Размеры блока — это комплексная величина и складывается из значений разных свойств. Ниже рассмотрим особенности формирования ширины и высоты блока.

Ширина блока

Ширина блока представляет собой сумму значений следующих свойств:

— ширина содержимого; и padding-right — поле слева и справа от содержимого;
• border-left и border-right — толщина границы слева и справа; и margin-right — отступ слева и справа.

На рис. 1 схематично изображены свойства, влияющие на ширину блока. При этом какие-то свойства могут отсутствовать и на размер влияние не оказывают.

Рис. 1. Ширина блока

Обратите внимание, что свойство width задаёт ширину содержимого, а не всего блока целиком. Если значение width не задано, то оно по умолчанию устанавливается как auto . В этом случае ширина блока будет занимать всю доступную ширину при сохранении значений padding , border и margin . Под доступной шириной в данном случае подразумевается ширина содержимого родительского блока, а если родителя нет, то ширина окна браузера.

В примере 1 показано создание блока, занимающего всю доступную ширину. При изменении ширины окна браузера ширина блока будет соответствующим образом подстраиваться.

Пример 1. Ширина блока

Результат данного примера показан на рис. 2.

Рис. 2. Блок, занимающий всю ширину

Если свойство width задано, то его значение добавляется к общей ширине блока. В качестве примера рассмотрим следующий стиль.

Ширина блока в данном случае будет равна 442 пикселя; эта величина получается складыванием значения ширины содержимого плюс поле слева, граница слева и отступ слева, плюс поле справа, граница справа и отступ справа. Суммируем все числа.

Ширину содержимого можно задавать в процентах, но в этом случае общая ширина блока может превысить ширину веб-страницы, что приведёт к появлению горизонтальной полосы прокрутки.

Высота блока

Высота блока формируется по тем же правилам, что и ширина. А именно, высота складывается из значений следующих свойств:

— высота содержимого; и padding-bottom — поле сверху и снизу от содержимого; и border-bottom — толщина границы сверху и снизу; и margin-bottom — отступ сверху и снизу.

Если свойство height не указано, то оно считается как auto , в этом случае высота содержимого вычисляется автоматически. На рис. 3 показаны свойства, влияющие на высоту блока.

Рис. 3. Высота блока

Несмотря на схожесть принципов построения ширины и высоты, у них есть некоторые различия.

1. Если содержимое превышает размер блока при заданном height , то содержимое отображается поверх блока (рис. 4).

Рис. 4. Превышение размеров блока

Чтобы избежать подобного поведения, свойство height лучше не задавать, тогда высота блока будет вычисляться автоматически. Впрочем, бывают случаи, когда высота должна быть чётко указана, тогда рекомендуется добавить свойство overflow — значение auto устанавливает полосы прокрутки при необходимости (пример 2), а значение hidden скрывает всё, что не помещается в заданные размеры.

Пример 2. Использование overflow

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Высота</title> <style> .block </style> </head> <body> <div <p>Лев ревёт только в том случае, когда сообщает, что территория принадлежит ему или провозглашает себя царём природы.</p> <p>Охотничий участок льва может иметь длину и ширину до тридцати километров.</p> </div> </body> </html>

Результат данного примера показан на рис. 5. Высота блока задана явно и если содержимое не помещается в блок по высоте, то появляется вертикальная полоса прокрутки.

Рис. 5. Полосы прокрутки в блоке

2. Установка значения высоты в процентах обычно не приводит к каким-либо заметным результатам, поскольку высота родителя браузером не вычисляется. Чтобы проценты начали работать, высота родителя должна быть задана явно. В примере 3 показано, как задать высоту блока в процентах.

Пример 3. Высота блока

Результат данного примера показан на рис. 6. Здесь для <div> родителем выступает элемент <body> , поэтому для него устанавливаем значение height равным 100%. В то же время на <body> действуют те же правила, что и на <div> , поэтому для родителя <body> , которым является <html> , также требуется поставить значение height равным 100%. Только в этом случае высота блока в процентах будет зависеть от высоты веб-страницы.

Рис. 6. Высота блока в процентах

Алгоритм блочной модели

Ширина блока формируется из значений width , padding , border и margin . Считать итоговую ширину не всегда удобно, особенно когда в качестве значений встречается комбинация пикселей и процентов. Для изменения алгоритма подсчёта ширины и высоты блока применяется свойство box-sizing со значением border-box . После добавления этого свойства к блоку значение width включает в себя padding и border (но не margin ). Таким образом, свойство width будет задавать ширину всего блока, а не содержимого как раньше. В примере 4 показано изменение вида поля для поиска, чтобы оно занимало всю доступную ширину веб-страницы.

Размеры блочных элементов в CSS

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

При изучении блочной модели CSS мы разобрали, что свойства width и height устанавливают ширину и высоту внутренней области элемента (content area), которая может содержать текст, изображения и прочие элементы.

В блочной модели CSS существует разница между значениями ширины и высоты, которые вы задаете для элемента и размером пространства, которое браузер резервирует для его отображения. Общая ширина и высота элементов представляет собой область окна браузера, которая состоит из ширины и высоты внутренних отступов, границ и указанных для них пользовательских значений.

Рис. 99 Схема вычисления общей ширины и высоты элементов.

Общая ширина элемента вычисляется по формуле:

width (ширина) + padding-left (левый внутренний отступ) + padding-right (правый внутренний отступ) + border-left (левая граница) + border-right (правая граница).

Общая высота элемента вычисляется по формуле:

height (высота) + padding-top (верхний внутренний отступ) + padding-bottom (нижний внутренний отступ) + border-top (верхняя граница) + border-bottom (нижняя граница).

Допустим, у нас есть следующие стили для элемента <div>:

Для размещения элемента <div> браузеру необходимо подготовить следующее пространство:

Общая ширина элемента:

150 пикселей (пользовательское значение ширины) + 10 пикселей (левый внутренний отступ) + 10 пикселей (правый внутренний отступ) + 5 пикселей (левая граница) + 5 пикселей (правая граница) = 180 пикселей .

Общая высота элемента:

150 пикселей (пользовательское значение высоты) + 10 пикселей (нижний внутренний отступ) + 10 пикселей (верхний внутренний отступ) + 5 пикселей (нижняя граница) + 5 пикселей (верхняя граница) = 180 пикселей .

И так, мы с Вами рассмотрели, как классически происходит вычисление общей ширины и высоты элементов. Минусы этой модели заключаются в том, что вам необходимо проводить математические вычисления, чтобы понять какую действительно ширину, либо высоту имеет тот, или иной элемент. Удобно ли это?

Изменение модели вычисления ширины и высоты элементов

С выходом стандарта CSS 3 добавлено свойство box-sizing, оно позволяет изменить, применяемую по умолчанию CSS модель, с помощью которой вычисляются ширина и высота элементов.

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

Обратите внимание на важный момент — все четыре блока размещены в одну строчку.

Это очень тонкий момент, дело в том, что когда вы используете display: inline-block браузер расценивает переносы строки как пробельный символ, и как следствие, добавляет после каждого блока 3-4px пустого пространства в зависимости от браузера и шрифта пользователя. По сути это является междусловным интервалом, так как блок расценивается в данном случае как слово. Может на данном этапе этот момент для вас не до конца понятен, просто запомните его, чтобы в последствии случайно не потерять пару часов, когда у вас будет «съезжать» какой-то блок, или список в панели навигации из-за вдруг появившихся «не понятно откуда пикселей». Я человек простой: вижу непонятные пиксели при display: inline-block – пишу элементы в линейку без пробелов.

В результате у нас должно получиться четыре разноцветных блока, расположенных в линейку:

Рис.100 Пример вычисления ширины и высоты элементов.

А теперь техническое задание поменялось, и Вам необходимо к каждому нечетному блоку добавить сплошную границу справа размером 5px. Для этого мы создадим следующий стиль:

Теперь добавим стиль к нашему коду и посмотрим, что у нас из этого получится.

Как вы можете заметить на изображении ниже, нас ждет разочарование, так как наш макет «поплыл»:

Рис. 101 Пример вычисления ширины и высоты элементов в процентах.

Какие у нас есть варианты, чтобы исправить наш макет?

Варианта два:

1. Первый – брать в руки калькулятор и высчитывать проценты, которые стали занимать элементы в нашем документе.
2. Второй – использовать альтернативную модель вычисления ширины и высоты элементов.

В нашем случае я считаю, что необходимо выбрать второй вариант:

Мы использовали CSS свойство box-sizing со значением border-box , что позволило нам изменить модель вычисления ширины и высоты элементов.

Отличительная особенность данной модели заключается в том, что значения свойства ширины (width) и высоты (height) включают в себя содержание элемента, границы (border) и внутренние отступы (padding).

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

Рис.102 Пример использования свойства box-sizing.

Для окончательного понимания этой модели вычисления ширины и высоты элементов, закрепим полученные знания на следующем примере:

Значение content-box свойства box-sizing является значением по умолчанию и производит расчёт общей ширины и высоты элемента по классической схеме. На примере ширины:

150 пикселей (пользовательское значение ширины) + 10 пикселей (левый внутренний отступ) + 10 пикселей (правый внутренний отступ) + 10 пикселей (левая граница) + 10 пикселей (правая граница) = 190 пикселей .

Что касается второго элемента, к которому мы применили свойство box-sizing alt=»css3″ /> со значением border-box , то пользовательское значение ширины и высоты элемента уже включают в себя содержание элемента, границы (border) и внутренние отступы (padding). В большинстве случаев применение свойства box-sizing alt=»css3″ /> со значением border-box предпочтительно на страницах, так как делает очевидным конечные размеры элемента и позволяет избежать некоторых непредвиденных ситуаций рассмотренных выше.

Результат нашего примера:

Рис. 103 Пример изменения модели вычисления ширины и высоты элементов (свойство box-sizing).

Управление переполнением блочных элементов

В процессе верстки у вас будут возникать такие ситуации, когда содержимое элемента будет отображаться за пределами границ элемента. По умолчанию браузер отображает такое содержимое (переполнение элемента отображается), что в некоторых случаях приводит к визуальным ошибкам. За такое поведение браузера отвечает CSS свойство overflow. Рассмотрим его возможные значения:

Значение	Описание
visible	Переполнение не обрезается, содержимое выходит за пределы размеров элемента. Это значение по умолчанию.
hidden	Переполнение обрезается (контент, который выходит за размеры будет невидимым).
scroll	Переполнение обрезается, но добавляется полоса прокрутки, позволяющая увидеть содержимое, которое выходит из заданных размеров.
auto	Если переполнение обрезается, то полоса прокрутки будет добавлена автоматически, чтобы увидеть содержимое, которое выходит из заданных размеров.

Давайте рассмотрим следующий пример:

В данном примере мы разместили четыре блока фиксированной ширины и высоты, для которых указали различные значения CSS свойства overflow:

• Первый блок (значение visible ) – содержимое выходит за границы элемента (значение по умолчанию).
• Второй блок (значение hidden ) – содержимое, которое переполняет элемент обрезается.
• Третий блок (значение scroll ) – переполнение обрезается, но добавляется полоса прокрутки.
• Четвертый блок (значение auto ) – как и при значении scroll , только полоса прокрутки будет добавлена автоматически, если произойдет переполнение блока по определенной оси (x — горизонтальной, либо y — вертикальной), а не отображается на странице постоянно.

Результат нашего примера:

Рис. 104 Пример управления переполнением элемента.

Переполнение по определённой оси

С выходом стандарта CSS 3 были добавлены свойства, которые способны управлять по отдельности горизонтальным переполнением (ось x) – overflow-x alt=»css3″ /> и вертикальным переполнением (ось y) – overflow-y alt=»css3″ />. В отличии от свойства overflow, данные свойства отвечают только за одну ось (x, либо y) при этом значения и синтаксис аналогичен свойству overflow (таблица выше).

Давайте рассмотрим пример, в котором нам необходимо добавить полосу прокрутки для блока текста, если содержимое переполнит элемент по горизонтали:

В данном примере мы использовали элемент <pre>, который сохраняет все пробелы и переносы строк (текст может выходить из отведённой области), что нам и помогло продемонстрировать возможности свойства overflow-x. В нашем случае текст вышел за пределы ширины размера элемента <pre> и браузер добавил горизонтальный бегунок прокрутки, что нам и требовалось.

Результат нашего примера:

Рис. 105 Пример управления переполнением элемента по горизонтальной оси.

Минимальные и максимальные значения ширины и высоты блочного элемента

Заключительная тема этой статьи, которую необходимо освоить это указание минимальных и максимальных размеров для блочных элементов.

CSS, помимо явного указания значений ширины и высоты элементов (свойства width и height) предлагает такие свойства, которые позволяют указать для блочных элементов их минимальные, либо максимальные значения:

(устанавливает минимальную ширину элемента). (устанавливает максимальную ширину элемента). (устанавливает минимальную высоту элемента). (устанавливает максимальную высоту элемента).

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

Какие приёмы CSS надо обязательно уяснить из этого примера:

Как установить высоту элемента 100% при любом разрешении?

Как горизонтально центрировать страницу?

Как установить стиль, который будет приоритетней элемента <html>?

Результат нашего примера приведен на изображении ниже:

Рис. 106 Пример установки минимальной высоты и максимальной ширины для блочных элементов.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

• Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:
  

Практическое задание № 26.

Обратите внимание, что при уменьшении размера окна браузера страница принимает следующий вид:

Практическое задание № 26 (при уменьшении размеров окна).

Обращаю Ваше внимание, что для выполнения этого задания Вам необходимы знания из прошлых статей учебника.

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

true }) window.dataLayer = window.dataLayer || [] function gtag(){dataLayer.push(arguments)} gtag(«js», new Date()) gtag(«config», «G-GH8FX28ET0»)

1. Кратко
2. Пример
3. Как это понять
4. Как пишется
5. Подсказки
6. На практике
   1. Дока Дог советует
   2. Вадим Макеев советует
   3. Алёна Батицкая советует

Кратко

Секция статьи «Кратко»

Элемент <div> группирует или оборачивает другие элементы и семантически ничего не значит. Сам по себе <div> без стилей ничего из себя не представляет — пользователь увидит пустое место на экране.

Можно представить этот тег как универсальную коробку. В неё можно положить что угодно или не класть ничего и просто оформить как нужно.

Пример

Секция статьи «Пример»

В этом примере абзац текста обёрнут в <div>, которому заданы внутренние отступы и фоновый цвет:

<div>  <p>    Мы поместили текст в <code>&lt;div&gt;</code>,    а сам контейнер покрасили в оранжевый.  </p></div>
          <div>
  <p>
    Мы поместили текст в <code>&lt;div">&gt;</code>,
    а сам контейнер покрасили в оранжевый.
  </p>
</div>

.container {  background-color: #FF8630;  padding: 55px 40px;}
          .container {
  background-color: #FF8630;
  padding: 55px 40px;
}

Открыть демо в новой вкладке

Как это понять

Секция статьи «Как это понять»

Div — от английского division — раздел, секция.

Чтобы сделать что-нибудь полезное, надо обратиться к такому диву и добавить каких-нибудь стилей, обычно с помощью атрибута class, например: class="my-block" в HTML и .my-block в CSS. Можно задать ширину и отцентрировать всё содержимое. Или можно задать ему какие-нибудь наследуемые стили, вроде color: tomato или font-size: 20px, и тогда эти стили применятся ко всему содержимому этого дива.

Как пишется

Секция статьи «Как пишется»

Тег <div> парный, его всегда нужно закрывать </div>.

Подсказки

Секция статьи «Подсказки»

💡 У <div> блочные стили по умолчанию 🤓

💡 Важно помнить, что <div> без содержимого и стилей не видно на экране. По умолчанию он растянется на всю ширину родителя, но не будет иметь высоты, если только у него нет внутренних отступов. Положите внутрь контент или задайте стили, чтобы блок расправился по высоте.

💡 <div> — это универсальный блок, не несущий семантического смысла. По внешнему виду и поведению очень похож на семантические элементы: <header>, <main>, <footer> и другие. Если вы можете использовать семантический элемент и подсказать браузеру, что именно там находится, лучше использовать подходящий элемент, а не <div>.

На практике

Секция статьи «На практике»

Дока Дог советует

Секция статьи «Дока Дог советует»

🛠 Понять, как выглядит <div>, несложно — это всегда прямоугольник (или в частном случае квадрат), но начинающие верстальщики умудряются неслабо накосячить с этим тегом. Я постоянно вижу ошибки в структуре вложенности блоков <div> друг в друга.

🛠 Если провести аналогию между HTML-кодом сайта и человеком, то тег <body> — это всё тело. Например, у нас есть <div class="hand">, который обозначает руку. Логично, что внутри него должны быть <div class="finger">, внутри них <div class="nail">. Но некоторые умудряются сделать <div class="nail"> вложенным в <body> и потом подвинуть его рядом, чтобы выглядело, будто «ноготь» находится на «пальце». А на самом деле он откуда-то извне прилетел вообще — отдельно лежит «ноготь» и отдельно рядом «палец». Не надо так, соблюдайте структуру 💪🏻

Вадим Макеев советует

Секция статьи «Вадим Макеев советует»

🛠 <div> — самый простой и самый крутой тег во всём HTML: нет стилей — нет проблем. Если сильно извратиться, то можно написать целый сайт на одних дивах. Разве что ссылки и формы делать не всегда удобно. Даже доступность можно накрутить поверх дивов с помощью ARIA-атрибутов и кучи JS.

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

Алёна Батицкая советует

Секция статьи «Алёна Батицкая советует»

🛠 Начинающие разработчики часто заболевают болезнью под названием диватоз — всегда и везде используют <div>. На самом деле в HTML большое количество специальных тегов для разных нужд.

Например, для статей существует тег <article>, а для дополнительной информации тег <aside>. Они ведут себя и выглядят как <div>. Это тоже прямоугольники, в которые можно вкладывать другие блоки. Разница между ними в смысловой нагрузке.

Браузеру проще понимать, какой контент важен, когда HTML-разметка написана правильно, с использованием семантических тегов.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

<code>

alt + ←

→

<span>

alt + →

Div не отображается в соответствии с размером экрана [javascript, html, css]

В моем приложении я хочу, чтобы все отображалось в соответствии с размером экрана.

Но div не отображается;

Вот код:

<div>
.....
</div>

CSS:

#tools{
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 5%;
   overflow: hidden;
   background: #ffffff;
}

Он не отображается в соответствии с размером экрана. Пожалуйста, предоставьте мне какое-нибудь возможное решение для этого

РЕДАКТИРОВАТЬ :

Значок некоторых инструментов используется в приведенном выше разделе. Таким образом, какой бы размер экрана не использовался, размер значка изображения остается прежним. он не отображается в соответствии с размером экрана

javascript html css

person Rishi    schedule 17.07.2013    source источник

---

Ответы (7)

arrow_upward
1
arrow_downward

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

height. Кроме того, избегайте использования идентификатора для идентификации CSS. Вместо этого используйте его класс.

CSS:

.open {
    position:absolute; 
    top:0; 
    right:0;
    bottom:0;
    width:5%;
    height:10%;
    overflow:hidden;
    background:#999999;
}

Вместо height:10% укажите любую высоту, которая вам подходит.

Здесь работает скрипт

person Raul Rene    schedule 17.07.2013

arrow_upward
0
arrow_downward

Попробуй это:

#tools {
    position:absolute; 
    top:0; 
    right:0;
    width:5%;
    overflow:hidden; 
    background:red;
}
html, body {
    width: 100%;
    height: 100%;
}

Скрипка

person karaxuna    schedule 17.07.2013

arrow_upward
0
arrow_downward

Вы указали «ширина: 5%;». Это может быть причиной того, что ваш div не показывает правильную ширину в соответствии с экраном. Сделайте его «ширина: 100%».

Кроме того, вы определили {position:absolute; верх:0; справа: 0; внизу: 0;}. Если верх равен 0, то почему вы указали низ как 0?? Это не требуется. Вы можете удалить его.

person Disha Jain    schedule 17.07.2013

arrow_upward
0
arrow_downward

Я думаю, проблема не в размере используемого вами div. Но размер значка, который не меняется в зависимости от размера div. либо вы используете очень маленькое изображение, либо задаете им фиксированную ширину. попробуйте это с изображениями. Amke их с хорошим стандартным размером в соответствии с вашим приложением. и напиши это.

.class{max-width:100%}

Это с изменением их размера в соответствии с размером div

person Community    schedule 17. 07.2013

arrow_upward
0
arrow_downward

Проблема не может возникнуть из-за этого div, потому что не определены фиксированные размеры. Таким образом, проблема исходит от родительского div. Вы должны проверить, не имеют ли все его родительские элементы div фиксированные значения.

person Lucas Willems    schedule 17.07.2013

arrow_upward
0
arrow_downward

Он отлично работает, просто нужно добавить немного цвета, чтобы вы могли его видеть.

http://jsfiddle.net/A2JjN/2/

background:red;
font-size:50px;

Для тех, кто не понимает, почему можно использовать top:0; bottom:0;, прочитайте этот пост CSS 100% высота с абсолютным позиционированием верх 0 низ 0

person iConnor    schedule 17. 07.2013

arrow_upward
-1
arrow_downward

Я получил свое решение. Я просто указываю ширину в пикселях вместо %, и это сработало.

#tools{
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 50px;
   overflow: hidden;
   background: #ffffff;
}

person Rishi    schedule 17.07.2013

css — Высота Div 100% и расширяется, чтобы соответствовать содержимому

Asked 10 лет, 7 месяцев назад

Изменено 6 месяцев назад

Просмотрено 572 тыс. раз

231

Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.

На моей странице есть элемент div, высота которого установлена ​​на 100%. Высота тела также установлена ​​на 100%. Внутренний div имеет фон и все такое и отличается от фона тела. Это работает для того, чтобы сделать высоту div равной 100% высоты экрана браузера, но проблема в том, что у меня есть контент внутри этого div, который выходит за пределы высоты экрана браузера по вертикали. Когда я прокручиваю вниз, div заканчивается в точке, с которой вы должны были начать прокручивать страницу, но содержимое выходит за пределы этого. Как сделать, чтобы div всегда доходил до самого низа, чтобы соответствовать внутреннему содержимому?

Вот упрощенный код CSS:

 body {
    высота:100%;
    фон:красный;
}
#some_div {
    высота:100%;
    фон: черный;
}
 

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

Редактировать: Вот скриншот проблемы:

• css
• html
• высота
• переполнение

6

Вот что вы должны сделать в стиле CSS, на главном дисплее div

: block;
переполнение: авто;
 

И не трогать высота

10

Установить высоту на auto и min-height на 100% . Это должно решить проблему для большинства браузеров.

 корпус {
  положение: родственник;
  высота: авто;
  минимальная высота: 100% !важно;
}
 

4

Обычно эта проблема возникает, когда дочерние элементы родительского элемента Div плавают. Вот

Последнее решение проблемы:

В файле CSS напишите следующий класс с именем .clearfix вместе с псевдоселектором :after

 . clearfix:after {
содержание: "";
дисплей: таблица;
ясно: оба;
}
 

Затем в HTML-коде добавьте класс .clearfix к родительскому элементу Div. Например:

 <дел>
    <дел>
    <дел>

 #yourdiv {
    дисплей: гибкий;
    ширина:100%;
    высота:100%;
}
 

 тело {
    минимальная высота: 100%;
    фон:красный;
}
#some_div {
    минимальная высота: 100%;
    фон: черный;
}
 

 #some_div {
  высота: фит-контент;
}
 

 .parent{
    дисплей: гибкий
}
.fit-родитель {
    дисплей: гибкий;
    гибкий рост: 1
}
 

 height: auto;
 

 #some_div {
    высота: 100вх;
    фон: черный;
}
 

 display: block;
переполнение: авто;
 

 позиция: относительная
 

 #overlaywrapper {
    положение: абсолютное;
    сверху: 0;
    ширина: 100%;
    высота: 100%;
    фон: #00000080;
    z-индекс: 100;
}
 

 #MainDiv {
  /* куда идет весь контент */
  дисплей: таблица;
  переполнение-у: авто;
}
 

 #some_div {
    высота:100%;
    фон: черный;
    переполнение: видимое;
    }
 

 display:block;
переполнение:авто;
высота: 100%;
 

 display: inline-block;
 

коробка {
ширина: авто;
минимальная ширина: минимальное содержание;
максимальная ширина: максимальное содержание;
}
 

коробка {
ширина: -moz-fit-content;
ширина: подгонка содержимого;
}
 

1fr fit-content(200px) 1fr
 

1fr min(max-content-size, max(min-content, 200px)) 1fr
 

1fr min(min(max-content, available-size), max(min-content, 200px)) 1fr