Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.79/19: Рейтинг темы: голосов - 19, средняя оценка - 4.79
0 / 0 / 0
Регистрация: 10.02.2014
Сообщений: 3
1

Вложенный div с высотой родителя и отступами

10.02.2014, 19:22. Показов 3466. Ответов 6
Метки нет (Все метки)

Только начал изучать html и CSS. Никак не могу понять как сделать простую вещь:
2 div-а. Один вложен в другой. Вложенный должен заполнять всё пространство своего родителя учитывая его padding и собственный margin.

Пытаюсь сделать так:
HTML5
1
2
3
4
<DIV style="background:red">
    <DIV style="height:calc(100% - 20px); margin:10px; background:blue">
    </DIV>
</DIV>
Но результат при этом не радует:
Вложенный div с высотой родителя и отступами


 Комментарий модератора 
Прикрепляйте файлы и изображения к сообщениям.
https://www.cyberforum.ru/abou... post594251
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
10.02.2014, 19:22
Ответы с готовыми решениями:

Вложенный div высотой 100%
Шалом! Не получается сделать вложенный див высотой 100%. Может кто покажет решение задачи? ...

вложенный DIV двигает родителя
на рисунке всё показал &lt;div id=&quot;orangebg&quot;&gt; &lt;div id=&quot;orangeheader&quot;&gt; &lt;div...

div с отступами!
Привет! Ширина родителя 1170px. Ширина каждого из 3-х блоков 370px. расстояние между блоками...

Растянуть боковые div на 100% c отступами
Нужно сверстать страницу имеются 4 дива: 1 сверху 1 снизу и 2 по бокам. Нужно что бы 2 боковых...

6
0 / 0 / 0
Регистрация: 10.02.2014
Сообщений: 14
10.02.2014, 19:36 2
HTML5
1
2
3
4
<DIV style="background:red">
    <DIV style="height:100%; width:100%;  background:blue">
    </DIV>
</DIV>
0
0 / 0 / 0
Регистрация: 10.02.2014
Сообщений: 3
10.02.2014, 19:40  [ТС] 3
Спасибо за ответ, но очень нужно, чтобы внутренний div имел margin. В этом, то и вся загвоздка.
0
12 / 12 / 2
Регистрация: 08.02.2014
Сообщений: 64
11.02.2014, 00:25 4
Vetalion, ну так укажи ему margin на сколько тебе нужно .В чем проблема , не понятно
0
0 / 0 / 0
Регистрация: 10.02.2014
Сообщений: 14
11.02.2014, 01:45 5
Ну, маргин сам по себе будет отодвигать блок, не взирая на его размеры.
что вообще требуется? возможно, есть способы по-практичнее.
0
0 / 0 / 0
Регистрация: 10.02.2014
Сообщений: 3
11.02.2014, 11:15  [ТС] 6
Конкретной задачи, которую можно было бы решить другим способом, в общем-то, нет. Пытаюсь создать некий генератор html-кода. Понадобилась универсальная возможность в любом месте создавать div с отступами с любым видом расположения. С центрированием и выравниванием сверху и снизу уже разобрался, а вот растянуть по высоте (с присутствием отступов) не получается.
0
283 / 282 / 73
Регистрация: 06.05.2013
Сообщений: 1,613
11.02.2014, 12:22 7
Можно использовать box-sizing:border-box, но он учитывает только padding, т.е. он в height:100% включит padding этого элемента. С маргинами вряд ли есть универсальное что то
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
11.02.2014, 12:22

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Прикрепить вложенный div к верху, родительского элемента div
Здравствуйте! Делаю все так, как показано в видеоуроке......

в блоке колонке таблице есть два div с картинкой но с отступами
Hi, в таблице два div (блока) и в них по одной картинке но снизу у них отступы ,от блоков при чём...

В div-блок черного цвета вставить картинку по центру, с равными отступами по краям
Стоит задача в div-блок черного цвета вставить картинку по центру, с равными отступами по краям....

Проблемы с высотой div
Здравствуйте, объясните пожалуйста мне почему нижеприведенный код отображается не так как в нем...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.