Как правильно указать высоту div?
Как правильно задать высоту родительскому block-1 так, чтобы он был минимум 100px , но мог растягиваться при наличии большего в нем контента? При этом, дочерний block-2 должен всегда иметь максимальную высоту. В настоящем исполнении, либо дочерний не растягивается в высоту на 100px , либо родителю указываем height: 100px; — дочерний растягивается, но теперь родитель у нас лишь на 100px в высоту, и рано или поздно контент вылезает за рамки.
.block-1 < background: blanchedalmond; padding: 50px 0; min-height: 100px; >.block-1 .block-2
test Отслеживать
задан 18 фев 2018 в 13:29
1,552 4 4 золотых знака 16 16 серебряных знаков 32 32 бронзовых знака
Почему у вас родитель то 100рх то 200 рх минимум? Добавьте ему overflow-y:auto
18 фев 2018 в 13:41
@user202854 Опечатка, поправил. overflow-y:auto не сработал.
18 фев 2018 в 13:46
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Вариант 1 — position: absolute
.block-1 < background: blanchedalmond; padding: 50px 0; min-height: 100px; position: relative; >.block-2
test Вариант 2 — display: flex
.block-1 < background: blanchedalmond; padding: 50px 0; min-height: 100px; display: flex; flex-direction: column; >.block-2
test Вариант 3 — display: table
.block-1 < background: blanchedalmond; padding: 50px 0; min-height: 100px; display: table; width: 100%; >.block-2
test CSS: Высота и ширина блока
При создании страниц часто возникает желание управлять высотой и шириной блоков. Это удобно в длинных статьях, когда требуется сделать поясняющий текст в небольшом блоке. Так он будет отделяться от основной части текста, и его сразу можно увидеть.
Для управления высотой и шириной блочных элементов используются правила width и height , принимающие значения ширины и высоты соответственно (например, в пикселях или других доступных единицах измерения).
Создадим блок высотой 100 пикселей и шириной 100 пикселей. Чтобы визуально отделить его от теории в уроке, установим чёрный цвет фона:
.squareЗадание
Добавьте в редактор с классом rectangle . Установите свойства:
- Ширина: 300px
- Высота 100px
- Цвет фона: #000
Стили запишите в теге
Упражнение не проходит проверку — что делать? ��Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Как подогнать изображение внутри блока по высоте?
Вывожу изображения динамически в карусель. Как сделать чтоб изображение любой высоты подгонялось под размер блока по высоте, как сделано на скриншоте ниже?
Отслеживать задан 19 июн 2017 в 14:06 143 4 4 серебряных знака 13 13 бронзовых знаков покажите свой код. 19 июн 2017 в 14:072 ответа 2
Сортировка: Сброс на вариант по умолчаниюДаете картинке какой то класс к примеру
.slider-image
При этом картинка растянется на высоту блока родителя, проследите что бы высота блока родителя была тоже 100% (не была фиксированной)
Если дать класс картинке не можете то дайте его блоку родителю
.slider-image img
Должно сработать если у вас не перебивается никакими другими стилями, по этому лучше было бы выложить ваш код.
вариант с бекграундом
дал ширину и высоту равную размеру экрана, а свойство контейн - заполняет картинкой.
Отслеживать
user236980
ответ дан 19 июн 2017 в 14:12
362 3 3 серебряных знака 13 13 бронзовых знаков
19 июн 2017 в 14:26
Но, изображение не масштабируется, если изменять ширину браузера
19 июн 2017 в 14:27
вас не смущает
19 июн 2017 в 14:44
что сделать чтобы картинка по ширине вписывалась в края браузера? а та, что высокая - вписывалась по высоте? простите за грамматику
19 июн 2017 в 14:54
растягивалась или не вылазила за края?
19 июн 2017 в 14:54
Я бы предложил другой вариант, т.к. пропорции могут быть разные и чтобы с этим не замарачиваться создаем div и привязываем background
Отслеживать
ответ дан 19 июн 2017 в 14:39
Ruslan Semenov Ruslan Semenov
3,651 1 1 золотой знак 9 9 серебряных знаков 23 23 бронзовых знака
не лучший вариант. ковер не всегда хорошо отрабатывает. во-первых может обрезать картинку, во-вторых потянуть.
19 июн 2017 в 14:46
Согласен, но тут задача заполнить указанный блок картинкой, иначе будут искажения.
19 июн 2017 в 15:00
Вообще правильное решение. и высоту и ширину задать авто с заданием максимальной ширины и высоты 100% что бы не вылазили больше.. и будет выводиться картинка оригинального размера но не больше границ экрана. а если картинка маленькая то для этого есть бекэнд который и должен те самые картинки при заливке резать ан разные размеры.
19 июн 2017 в 15:01
🙂 Думаю если человек спрашивает о том как правильно картинку отобразить, то нагружать его бекэнд обработкой это уже будет лишнее. А вот cover отрабатывает для меня на 100.
19 июн 2017 в 15:10
Довольно корректно отображается, за исключением того, что у высоких изображений показывается только середина. Что подскажете?
Параметры для блоков в CSS
Здравствуйте, сегодня мы рассмотрим такой важный элемента сайта как блок и данная статья неразрывно связана с статьей про блочный дизайн в которой мы рассмотрели как можно создавать на сайте как блочные контейнеры так и встроенные элементы для нашего сайта. После изучения данной статьи я уверен что нам станет намного понятнее как работать с блоками и это будет очень существенной ступенькой к созданию собственного сайта.
Высота и ширина блока в CSS.
Давайте теперь мы рассмотрим основные функции которые помогут нам управлять внешним видом и положением блоков сайта а после этого нам нужно будет применить все эти знания на практике и мы создадим простенький каркас для сайта.
Высота блока в CSS задается при помощи команды height: auto||inherit и как вы уже поняли мы можем задать высоту блока при помощи команды auto мы даем команду браузеру что он сам может определить размер блока и таким образом блок будет такого размера чтобы поместить все элементы и не больше.
Команда inherit позволит вам заимствовать параметры у родительского элемента и эти значения будут видны только если заданы параметры для родительского элемента. Но чаще всего нужно задавать размер блока конкретно, просто указать размер в одной из принятых величин(чаще всего это пиксели).
Также мы можем задать размер относительно родительского элемента и для этого нам нужно использовать проценты. Давайте посмотрим как это выглядит на практике.
Эта команда дает понять браузеру что для конкретного элемента на странице нужно задать размер в десять процентов от размера родительского блока.
Ширина блока в CSS задается при помощи параметра width: auto||inherit все параметры аналогичны как для высоты так и для ширины блока и я думаю что снова повторяться не стоит. Хочу только сказать что не обязательно задавать конкретно как высоту так и ширину блока, можно задать например ширину а высота будет увеличиваться в зависимости от содержимого и что очень удобно если вы не знаете какой контент будет на конкретной странице.
Минимальная и максимальная ширина блока.
Также для каждого блока мы можем задать не конкретные параметры а минимальный и максимальный параметр для любого блока на сайте. Благодаря этому можно наполнять блоки без страха того что они выйдут за приделы окна браузера.
Задать это очень просто нам нужно прописать для задания минимальной ширины и высоты следующие параметры:
А для максимальной нужны два параметра:
Теперь мы можем задать как максимальный и минимальный размер для блока или же полностью для всего сайта и это важно для сайта с резиновым дизайном, при фиксированном этот параметр не будет работать.
Параметры размещения float в css.
В всех предыдущих примерах где мы создавали контейнеры и элементы размещаются друг за другом по порядку но нам для создания дизайна этого не достаточно, нам нужна возможность для того чтобы размещать элементы на свое усмотрение и в этом нам поможет свойство float в css и сейчас мы разберем применение данного свойства на практике.
Параметр float может принимать несколько значений и сейчас мы разберемся какие это параметры:
Теперь давайте разберемся с каждым примером отдельно.
Команда float: left означает то, что блок должен выравниваться по левому краю а все остальные элементы будут его обтекать по правому краю.
float:right это полная противоположность предыдущей команде и соответственно блок будет выравниваться по правому краю а все элементы будут обтекать его слева.
float:none стандартное поведение для каждого блока, размещение блоков одно за другим. Использование этого параметра сейчас не актуально и его применяют очень редко и скорее просто по неграмотности.
Параметр clear в css.
Очень часто при создании дизайна на блоках при помощи команды float нужно некоторым блокам дать команду для того чтобы они не обтекали блок а вели себя как обычно, размещаясь ниже всех остальных. Такая проблема раньше решалась при помощи команды float:none к нужному блоку но отображение в каждом браузере может быть разным и поэтому в таких случаях намного рациональнее применять команду clear и сейчас мы посмотрим как это можно сделать.
Команда имеет четыре параметра и сейчас конкретно с каждым мы разберемся что за функции он выполняет.
clear: left команда означает что элемент размещается ниже все элементов с параметром float: left.
clear:right команда размещает блок ниже всех элементов с параметром float: right.
clear:both параметр размещает элемент ниже всех блоков с параметром как float: left так и float: right.
clear:none обычное поведение для блока. Задавать параметр не следует если до этого были размещены плавающие контейнеры.
Применяем все знания на практике.
Вот мы и подошли к заключению статьи в которой нам нужно посмотреть как все это мы можем применить на практике и первым делом что мы сделаем это создадим простенький каркас для сайта. Вот как будет выглядеть наш каркас.
Как мы видим для каркаса нам понадобится создать четыре блока DIV и к ним нам нужно будет применить как параметры размера так и параметры размещения.
Мы создали четыре блока и теперь нам нужно наполнить их информацией и задать фон для каждого блока чтобы нам было видно какой блок и где размещен. Узнать про задание фона вы можете здесь. И вот что за код у нас должен быть.
После этого нам нужно зайти в файл стилей и прописать все необходимые для нас команды. Команды все одинаковы для всех блоков только у каждого свои параметры.
.header height:100px; высота блока
background-color:#33CCFF;> цвет блока
.content height:400px; высота блока
background-color: #33FF33; цвет блока
float: left;> позиция блока
.sidebar height:400px; высота блока
background-color: #CCCCCC; цвет блока
float:left;> позиция блока
.footer height:100px; высота блока
background-color: #0000FF; цвет блока
clear:both;> стандартная позиция блока
И после того как мы пропишем все эти команды то мы получим вот такой каркас для сайта.