Почему мои блоки требуют танцы с бубном для того, чтобы они занимали ровно 100% высоты, а не еще вдобавок пару десятков пикселей?

Question

[Аминнулла Гаджиев]

Уже два часа ломаю голову над одной проблемой, указываю родительскому блоку высоту 100%, после детям (3 блока) даю также высоту 100%. Каким то образом они становятся в полную величину экрана, но снизу остается проблема, 1 панель занимает полностью высоту родителя, соседние 2 блока начинают вылазить на пару пикселей, один вылез на 80 пикселей, другой на 100 пикселей, меня мучает вопрос почему они решили выйти за пределы? Искал проблему в отступах и полях, но это никак не влияет на это, наоборот они еще дальше выходят. В общем веселый прикол, и хоть его можно решить костылями, но мне бы хотелось узнать есть ли способ без этого устранить проблему?

Comments

[Никита Михайлов]

Сделайте пример вёрстки где-нибудь. Например на CodePen

[Аминнулла Гаджиев]

Никита Михайлов, https://codepen.io/Kaptar/pen/YzWaKEN не знаю правильно ли передал, но вроде вот так. Кстати это попытки создать макет хабра, делал пару недель назад, а недавно увидел и решил доработать с новыми знаниями, но смотрю чего то блоки сами по себе движ устраивают

Answer 1

[Юрий]

У вас высота div.body равна 100% от тела документа. При этом рядом с div.body лежит header с высотой 48px. Само собой, div.body в итоге вылезает из родителя. У вложенных в него сайдбаров и контента тоже высота 100% от div.body, который 100% от документа и так далее.

У div.content мало того что высота 100%, так он ещё и с отступом от верха в 65px. Плюс ещё паддинги сверху (10) и снизу (15), которые прибавляются к указанным 100%, потому что вы не сбросили box-sizing.

В общем, это не проблема, это самые-самые основы вёрстки.

Comments

[Аминнулла Гаджиев]

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

[Аминнулла Гаджиев]

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