Jump to content

Неприжатый футер наезжает на контекст, при этом padding-bottom не подходит по условиям задачи


lizaveta
 Share

Recommended Posts

В макете, созданном блочной версткой, две колонки (левая с меню, правая с текстом), хедер и футер. 

Условия задания:

Левая колонка фиксированной ширины, правая резиновая.

Футер нельзя прижимать к низу экрана. При широком окне браузера колонка с меню должна быть больше по высоте чем правая колонка. 

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

Проблема: Футер наезжает на колонку с меню при широком экране.

1.thumb.jpg.5bd67c8a2928ad79adf48174180680d5.jpg

Пробовала воспользоваться padding-bottom для блока с колонками, но тогда не выполняется последнее условие: при более узком экране между подвалом и текстом остается расстояние.

 2.thumb.jpg.d371d150e6511de87060d7dfabe6c201.jpg

 

Подскажите, пожалуйста, как решить проблему

Link to comment
Share on other sites

57 минут назад, klierik сказал:

Здравствуйте.

Выложите пример на https://jsfiddle.net/ что бы понять с чем именно у Вас проблема

Вот
https://jsfiddle.net/3zLymwur/
Также в условиях задания нельзя использовать теги таблиц и стилевых свойств типа "display: table-*", flex, grid layout.

Link to comment
Share on other sites

9 минут назад, klierik сказал:

Мне кажется для выполнения этой задачи Вы пошли ошибочным путём. Посмотрите на пример с этими изменениями — https://jsfiddle.net/0ek7gxo8/

Я указывала, что display: table пользоваться нельзя
А еще может быть важным, что одно из условий, чтобы фон меню всегда доходил до подвала

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy