Jump to content
  • 0

Текст выходит за пределы div, footer залезает на текст (2 колонный макет)


Chaffee
 Share

Question

В макете 2 колонки, вставленные в общий контейнер и у каждой float:left. Если поставить свойство height:auto в #content, то обе колонки будут растягиваться под текст при изменении масштаба, однако при среднем масштабе они не будут тянуться до конца контейнера (красный), это можно сделать height:100%, но после этого при увеличении масштаба текст будет вылазить за пределы серой и зеленой колонок. При этом вне зависимости от того, что я делаю с footer, он залезает на текст( 

 

 

https://jsfiddle.net/he2zzh6z/#&togetherjs=5OgHxfnAH5

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

Я прошу прощения, но не похожая ли тема была совсем недавно:

 

http://htmlforum.ru/index.php?showtopic=54877

Вроде там немного про другое - про то, как sidebar сделать справа и внизу. И вроде ни в одном из примеров background sidebar не был на всю страницу... 

Удалось заставить footer не залезать на content и sidebar путем убирания height из свойств container1 (внутренний контейнер, содержит content и sidebar). Но при увеличении страницы текст футера все равно выезжает за его рамку, как на скрине.

  И еще непонятно, если background внешнего контейнера orange, и его высота 100% от родительского (body, yellow), то почему желтый цвет body все равно виден, по идее container-outer должен его перекрывать оранжевым? И несмотря на то, что в свойствах content и sidebar задана height:100%, они все равно не занимают всю площадь container1 - красный просвечивает.

 

Текст перестал вылазить за границы divov после добавления <!DOCTYPE html> в начало файла. Почему это так?

 

PS https://dropmefiles.com/hotlUтут скрин, не знаю, как вставить на форуме

Edited by Chaffee
Link to comment
Share on other sites

  • 0

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

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

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
Answer this question...

×   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