Как посчитать ширину блока с помощью функции calc() в css?
Допустим есть div у которого в css прописано ширина 25% и он в пикселях будет 350px (ширина динамическая и значение примерное). Можно ли на css сделать другому елементу margin-left: calc(ширина первого блока/2); то есть разделить значение на 2.
- Вопрос задан более трёх лет назад
- 4670 просмотров
1 комментарий
Оценить 1 комментарий
Ankhena @Ankhena Куратор тега CSS
Не все понятно, как соотносятся эти блоки, а код Вы не выкладываете.
Если у блоков разные родители, то JS.
Если родитель один, то зачем для этого calc?
Есть родитель.
У одного блока ширина 25% от родителя.
У второго блока должен быть отступ в половину ширины первого, т.е. 25% пополам, т.е. 12.5%.
Как получить ширину элемента в пикселях?
Есть элемент div , в CSS файле у него прописано свойство width: 90% . Kак в JS получить ширину этого элемента в пикселях?
Отслеживать
51.6k 201 201 золотой знак 65 65 серебряных знаков 246 246 бронзовых знаков
задан 7 мая 2018 в 20:11
Don2Quixote Don2Quixote
1,705 3 3 золотых знака 12 12 серебряных знаков 26 26 бронзовых знаков
Если есть jquery $(‘div’).innerWidth();
7 мая 2018 в 20:20
@AndrewB Мне на чистом нужно было, но спасибо 🙂
8 мая 2018 в 20:42
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
В зависимости, какую ширину вы хотите получить, можно использовать различные свойства:
- offsetWidth — это ширина блока, включая все padding, border, но без margin.
- clientWidth — это ширина блока, включая padding, но без border, margin и без scroll. Если блоки инлайновые, то ширина блока будет равна 0.
- getBoundingClientRect().width — это ширина блока высчитывается по принципу clientWidth , но даёт дробное число.
Так что, в данном случае можно ответить тремя ответами:
document.querySelector('.myDiv').offsetWidth document.querySelector('.myDiv').clientWidth document.querySelector('.myDiv').getBoundingClientRect().width Размеры блока
Размеры блока — это комплексная величина и складывается из значений разных свойств. Ниже рассмотрим особенности формирования ширины и высоты блока.
Ширина блока
Ширина блока представляет собой сумму значений следующих свойств:
- width — ширина содержимого;
- padding-left и padding-right — поле слева и справа от содержимого;
- border-left и border-right — толщина границы слева и справа;
- margin-left и margin-right — отступ слева и справа.
На рис. 1 схематично изображены свойства, влияющие на ширину блока. При этом какие-то свойства могут отсутствовать и на размер влияние не оказывают.
Рис. 1. Ширина блока
Обратите внимание, что свойство width задаёт ширину содержимого, а не всего блока целиком. Если значение width не задано, то оно по умолчанию устанавливается как auto . В этом случае ширина блока будет занимать всю доступную ширину при сохранении значений padding , border и margin . Под доступной шириной в данном случае подразумевается ширина содержимого родительского блока, а если родителя нет, то ширина окна браузера.
В примере 1 показано создание блока, занимающего всю доступную ширину. При изменении ширины окна браузера ширина блока будет соответствующим образом подстраиваться.
Пример 1. Ширина блока
Результат данного примера показан на рис. 2.
Рис. 2. Блок, занимающий всю ширину
Если свойство width задано, то его значение добавляется к общей ширине блока. В качестве примера рассмотрим следующий стиль.
Ширина блока в данном случае будет равна 442 пикселя; эта величина получается складыванием значения ширины содержимого плюс поле слева, граница слева и отступ слева, плюс поле справа, граница справа и отступ справа. Суммируем все числа.
Ширина = 400 + 10 + 10 + 4 + 4 + 7 + 7 = 442
Ширину содержимого можно задавать в процентах, но в этом случае общая ширина блока может превысить ширину веб-страницы, что приведёт к появлению горизонтальной полосы прокрутки.
Высота блока
Высота блока формируется по тем же правилам, что и ширина. А именно, высота складывается из значений следующих свойств:
- height — высота содержимого;
- padding-top и padding-bottom — поле сверху и снизу от содержимого;
- border-top и border-bottom — толщина границы сверху и снизу;
- margin-top и margin-bottom — отступ сверху и снизу.
Если свойство height не указано, то оно считается как auto , в этом случае высота содержимого вычисляется автоматически. На рис. 3 показаны свойства, влияющие на высоту блока.
Рис. 3. Высота блока
Несмотря на схожесть принципов построения ширины и высоты, у них есть некоторые различия.
1. Если содержимое превышает размер блока при заданном height , то содержимое отображается поверх блока (рис. 4).
Рис. 4. Превышение размеров блока
Чтобы избежать подобного поведения, свойство height лучше не задавать, тогда высота блока будет вычисляться автоматически. Впрочем, бывают случаи, когда высота должна быть чётко указана, тогда рекомендуется добавить свойство overflow — значение auto устанавливает полосы прокрутки при необходимости (пример 2), а значение hidden скрывает всё, что не помещается в заданные размеры.
Пример 2. Использование overflow
Результат данного примера показан на рис. 5. Высота блока задана явно и если содержимое не помещается в блок по высоте, то появляется вертикальная полоса прокрутки.
Рис. 5. Полосы прокрутки в блоке
2. Установка значения высоты в процентах обычно не приводит к каким-либо заметным результатам, поскольку высота родителя браузером не вычисляется. Чтобы проценты начали работать, высота родителя должна быть задана явно. В примере 3 показано, как задать высоту блока в процентах.
Пример 3. Высота блока
Результат данного примера показан на рис. 6. Здесь для родителем выступает элемент , поэтому для него устанавливаем значение height равным 100%. В то же время на действуют те же правила, что и на , поэтому для родителя , которым является , также требуется поставить значение height равным 100%. Только в этом случае высота блока в процентах будет зависеть от высоты веб-страницы.
Рис. 6. Высота блока в процентах
Алгоритм блочной модели
Ширина блока формируется из значений width , padding , border и margin . Считать итоговую ширину не всегда удобно, особенно когда в качестве значений встречается комбинация пикселей и процентов. Для изменения алгоритма подсчёта ширины и высоты блока применяется свойство box-sizing со значением border-box . После добавления этого свойства к блоку значение width включает в себя padding и border (но не margin ). Таким образом, свойство width будет задавать ширину всего блока, а не содержимого как раньше. В примере 4 показано изменение вида поля для поиска, чтобы оно занимало всю доступную ширину веб-страницы.
Пример 4. Использование box-sizing
Результат данного примера показан на рис. 7.
Рис. 7. Ширина поля для поиска в процентах
Как получить ширину элемента?
Как задать ширину элемента в процентах?
Как задать ширину элемента в процентах? Layout_weight не подходит,тк родительский элемент -.
Как узнать ширину элемента управления
Как узнать ширину элемента управления или задать ее программным методом. У меня выдает ошибку.
Как получить ширину и высоту ListViewItem?
Загрузилось приложение, заполнился ListView. Как получить ширину и высоту ListViewItem? Насколько.
2435 / 1114 / 312
Регистрация: 23.06.2011
Сообщений: 3,525
Сообщение от tporo 
вот такая конструкция
засунь свой див в контейнер с таблицей, контейнер уже готовый есть
или скриптом
Регистрация: 08.01.2014
Сообщений: 7
Сообщение от newJS
засунь свой див в контейнер с таблицей, контейнер уже готовый есть
или скриптом
дело в том что последний div это как кнопка «далее», при нажатии увеличивается высота у первого дива.
Поэтому если засунуть этот див в контейнер общий, то этого дива не будет видно. Какие есть еще варианты?
Регистрация: 02.08.2013
Сообщений: 39
Если данные в таблице постоянные а не динамические то сделай одинаковую ширину у обоих дивов например 50px. А почему увеличивается высота у первого дива при нажатии на второй?
Регистрация: 08.01.2014
Сообщений: 7
Сообщение от andrey31
Если данные в таблице постоянные а не динамические то сделай одинаковую ширину у обоих дивов например 50px. А почему увеличивается высота у первого дива при нажатии на второй?
данные в таблице динамические, поэтому ширина auto. была б статика я бы не заморачивался )
привет
привет
привет
.
ДАЛЕЕ
При нажатии на далее увеличивается высота первого дива где слова «привет» и таким образом отображается полный список всех элементов.
Регистрация: 02.08.2013
Сообщений: 39
помести таблицу и «див далее» в еще один див ему задай display: inline-block Таблице и диву далее задай width 100%
Регистрация: 08.01.2014
Сообщений: 7
Сообщение от andrey31
помести таблицу и «див далее» в еще один див ему задай display: inline-block Таблице и диву далее задай width 100%
спасибо огромное дружище!! Я уже замучался просто )
Регистрация: 02.08.2013
Сообщений: 39
носи на здоровье
Регистрация: 08.01.2014
Сообщений: 7
только width я не на 100% поставил а auto, по идее нормально должно быть везде?
Добавлено через 5 минут
Сообщение от andrey31
носи на здоровье
)) спасибо еще раз!)
Регистрация: 02.08.2013
Сообщений: 39
вообще то auto это сколько засунул на столько и растянется, а 100% в любом случае будет растягиваться на всю ширину дива «обертки». Свойство display: inline-block будет регулирует ширину «обертки» так сказать в обтяжку, то есть по самому широкому диву внутри.
Например у тебя таблица после динамического помещения данных стала 58px а кнопка ДАЛЕЕ из за размера шрифта всего 30px. Тогда див ОБЕРТКА тоже растянется на 58px, а кнопка ДАЛЕЕ так как у нее ширина 100%(т.е. 100% ширины родительского дива ОБЕРТКА) автоматически растянется на всю ширину дива ОБЕРТКА и тоже станет 58px, так как это ширина таблицы как то так в общем