Css размер дочернего элемента

Есть ли способ сделать ширину дочернего DIV шире родительского DIV с помощью CSS?

Есть ли способ иметь дочерний DIV в родительском контейнере DIV, который шире, чем его родительский. Дочерний DIV должен иметь такую ​​же ширину, что и область просмотра браузера. См. Пример ниже: Ребенок DIV должен оставаться дочерним элементом родительского div. Я знаю, что могу установить произвольные отрицательные поля для дочернего div, чтобы сделать его шире, но я не могу понять, как по существу сделать его 100% ширины браузера. Я знаю, что могу это сделать:

Обновление ПО

Спасибо за ваши ответы, кажется, что ближайший ответ на данный момент — сделать дочерний элемент DIV position: absolute и установить для свойств left и right значение 0. Следующая проблема, с которой я столкнулся, заключается в том, что у родителя есть position: relative, что означает, что свойства left и right по-прежнему относятся к родительскому div, а не к браузеру, см. Пример здесь: jsfiddle.net/v2Tja/2 Я не могу удалить относительную позицию от родителя, не испортив все остальное.

Ваши требования действительно не имеют смысла. «Дочерний div» должен оставаться дочерним по отношению к родительскому div, но все же родительский div имеет position: relative ? Что вам нужно position: relative для? Думаю, я спрашиваю: что вы пытаетесь сделать? — thirtydot

@Camsoft Вы видели мой комментарий к моему ответу? Это работает для меня, также проверьте мой сайт edocuments.co.uk который делает то, что вы пытаетесь сделать, по-другому — Blowsie

@Camsoft, кроме того, в вашем решении действительно не должно быть необходимости в каких-либо jquery / js — Blowsie

15 ответы

Хорошо, следующий вопрос, что, если родитель или другой предок имеет макет, то есть position: relative, см.: jsfiddle.net/v2Tja/2 — Камсофт

как насчет того, чтобы другой родительский div был position: static, а другой div внутри с position: relative? jsfiddle.net/blowsie/v2Tja/3 — Блоузи

есть ли способ сделать это с автоматической высотой .child-div и все еще иметь правильное размещение ниже? — Филипп Гилберт

Вот общее решение, которое сохраняет дочерний элемент в потоке документов:

Мы устанавливаем width дочернего элемента, чтобы заполнить всю ширину области просмотра, затем мы доводим его до края экрана, перемещая его в left на расстояние, равное половине области просмотра, минус 50% ширины родительского элемента. Demo:

Поддержка браузера для vw и для calc () обычно обозначается как IE9 и новее. Примечание: Предполагается, что для блочной модели установлено значение border-box , Без border-box , вам также придется вычесть отступы и границы, что сделает это решение беспорядочным. Примечание: Рекомендуется скрыть горизонтальное переполнение вашего прокручиваемого контейнера, поскольку некоторые браузеры могут выбрать отображение горизонтальной полосы прокрутки, несмотря на отсутствие переполнения.

Это было именно то, что я искал, большое спасибо. ИМО, это лучший ответ, чем принятый, поскольку он не нарушает документооборота — Реми

vw никуда не годится. Если у вас есть вертикальная полоса прокрутки, то 100vw предоставит вам горизонтальную полосу прокрутки. — Солнечно

Кажется, что это работает только на один уровень ниже. Есть ли способ, чтобы он работал независимо от того, сколько родительских элементов имеет дочерний элемент? — мифофехелон

Это правильный ответ, чтобы обернуть более широкий дочерний элемент в position: relative родитель! — Ханфэй Сунь

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

Идея здесь такова: переместите контейнер точно в середину окна браузера с помощью left: 50%;, затем потяните его обратно к левому краю с отрицательным полем -50vw.

Я обнаружил, что если я хочу, чтобы он составлял, скажем, 90% ширины области просмотра, я могу использовать указанное выше, но установить ширину на 90vw . Кроме того, похоже, что margin-right ни в коем случае не действует. — Джейсон Дюфэр

пришлось изменить значения margin-left и right, потому что моя оболочка составляет 80% ширины области просмотра. Так что в моем случае это должно было быть margin-left: -10vw и margin-right: -10vw, и тогда это отлично сработало! Благодарность! — Тимофей0106

Основываясь на вашем первоначальном предложении (установка отрицательных полей), я попытался придумать аналогичный метод с использованием процентных единиц для динамической ширины браузера: HTML

 
 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore neque repellat ipsum natus magni soluta explicabo architecto, molestias laboriosam rerum. Tempore eos labore temporibus alias necessitatibus illum enim, est harum perspiciatis, sit, totam earum corrupti placeat architecto aut minus dignissimos mollitia asperiores sint ea. Libero hic laudantium, ipsam nostrum earum distinctio. Cum expedita, ratione, accusamus dicta similique distinctio est dolore assumenda soluta dolorem quisquam ex possimus aliquid provident quo? Enim tempora quo cupiditate eveniet aperiam.
 
 
 
 

.child-div < margin: 0 -100%; padding: 0 -100%; >.parent < width: 60%; background-color: red; margin: 0 auto; padding: 50px; position:relative; >.grandparent

• Требуется дополнительная разметка (т.е. элемент дедушки и бабушки (точно так же, как старый добрый метод вертикального выравнивания таблицы, не так ли . )
• Левая и правая границы дочернего DIV никогда не будут отображаться просто потому, что они находятся за пределами области просмотра браузера.

Пожалуйста, дайте мне знать, если у вас возникнут какие-либо проблемы с этим методом;). Надеюсь, поможет.

Источник

Ширина дочернего div

У меня возникла такая проблема. Есть div с жёстко заданной шириной. Внутри него другой div с границами. Так вот этот div как по умолчанию, так и если поставить значение ширины auto, принимает ширину родительского div. А мне нужно, чтобы он принимал ширину по своему содержимому. Использование display: inline; не помогает, так как текст внутри дива может быть длинным, и, при переходе текста на новую строку, границы дива начинают вести себя странно. Существует ли какой-либо способ решения данной проблемы?

Родительский div выходит за рамки дочернего DIV
Доброго времени суток. Есть три объекта DIV (назовём #a, #b, #c), они расположены внутри.

Ширина дочернего элемента больше родительского
Реализовывал "прогрессбар" путём увеличивающего ширину прямоугольника одного цвета на фоне другого.

Прозрачность дочернего div
У меня есть какойто заголовок, например Привет!, есть текстбокс и кнопка. Если ето запихнуть в одну.

div class="parent"> div class="child">img src="http://img0.liveinternet.ru/images/attach/b/1/4368/4368764_981005_1453351.jpg">/div> /div>

.parent{ height:400px; width:600px; border:1px solid red; } .child{ display:table-cell; border:1px solid blue; }

.child{ display: inline-block; border:1px solid blue; }

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

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

Добавлено через 7 минут
подключил нормалайз css, чтобы убрало отступы, что именно тут не так ?

div class="parent"> div class="child"> img src="http://img0.liveinternet.ru/images/attach/b/1/4368/4368764_981005_1453351.jpg"> p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid veniam quisquam sit recusandae nostrum eaque, eligendi nemo cum delectus pariatur voluptatem suscipit asperiores, qui doloribus placeat, minima fugiat repellendus, mollitia nihil. Animi ratione debitis nemo fugiat similique voluptate earum, atque corrupti corporis id vel perspiciatis iure dolor sunt voluptatum labore veritatis cum hic vero? Temporibus cum corporis tempore numquam nam, illo odit. Dolores eveniet eos quisquam explicabo tempore quis quia, consequuntur, laudantium at amet, aspernatur non praesentium architecto voluptate sapiente eaque velit dolorum et! Nesciunt officiis facilis inventore ex vitae quos, magnam quae nostrum praesentium repellendus beatae. Omnis, vitae, minima./p> /div> /div>

1 2 3 4 5 6 7 8 9 10 11 12 13

.parent{ height:400px; width:600px; border:1px solid red; } .child{ display: inline-block; border:1px solid blue; } img { display: block; }

Источник

Как изменить ширину элемента. Свойство width

CSS-свойство width определяет ширину элемента на странице. Оно позволяет управлять размером элемента и адаптировать его под разные размеры экрана.

Свойство width записывается так:

Ширина может быть автоматической — если её не указать, то она будет иметь значение auto . В этом случае браузер сам решит, какую ширину установить элементу на основе размеров родительского элемента и содержимого.

Если вы хотите управлять шириной, укажите значение — определённую вами ширину элемента. Тогда она будет постоянной или будет меняться в зависимости от всего вокруг на странице. Можно использовать единицы измерения — например, px , % , em , rem .

Вот так — в пикселях, тогда ширина будет постоянной. В этом случае — 200 пикселей.

А так — в процентах, тогда ширина будет меняться при изменении размеров окна. В этом случае — 50% от ширины родительского элемента.

В любом варианте к ширине нужно относиться внимательно, чтобы всё сошлось с макетом.

Если пока не понимаете, зачем здесь фигурные скобки — прочитайте о селекторах.

Для чего использовать свойство width

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

Вот так мы стилизуем элемент с шириной 50%, который находится по центру экрана.

Относительные единицы измерения помогают создавать адаптивные страницы. Попробуйте сами — контейнер будет тянуться вместе с окном браузера.

Другой вариант использования — создать сетку на основе флексбоксов с фиксированными размерами колонок.

Это очень простой пример сеток, но если интересно, прочитайте наше пошаговое рукововодство по созданию адаптивных сеток.

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

Элемент на странице шире, чем вы задумали

Виновато свойство box-sizing , которое по умолчанию имеет значение content-box .

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

Например, у нас есть такой элемент с классом box :

И мы применяем следующие стили — ширина 100 пикселей, отступы по 10 пикселей со всех сторон и вдобавок пятипиксельную границу.

Тогда вспоминаем математику и считаем — общая ширина элемента с заданной шириной 100px будет на самом деле равна 130px .

100px + 2 × 10px (отступы) + 2 × 5px (границы) = 130px 

Как починить. Нужно включить отступы и границы в заданную ширину элемента. Для этого используйте свойство box-sizing со значением border-box :

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

Ширина элемента больше ширины родителя

Если ширина нашего элемента случайно оказалась больше, чем у родительского, то он не вместится. И будет как-то так:

Создаём два вложенных элемента с классами parent и child .

И стилизуем их. У parent ширина 100 пикселей, а у child — 200.

Выше вы уже видели, что произойдёт в этом случае — элемент child с синим фоном будет выходить за пределы родительского элемента с рамкой.

Конечно, иногда так поступают специально — например, чтобы иллюстрации в блоге выходили за пределы колонки с текстом и были покрупнее.

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

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

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

👉 Все браузеры поддерживают свойство width , так что смело пользуйтесь.

Материалы по теме

• Не шириной единой — свойство height ещё запутаннее, но тоже важное
• Чем отличаются margin и padding (и как их больше никогда не перепутать)
• Как создавать адаптивные сетки

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник