Подвал

[bobb]

Народ привет, помогите пожалуйста выйти из иступления. Ни как не получаетца прижать футер к низу страницы. Читал разные способы, но у меня немного другая проблема. Футер вообще не прижимаетца (не увеличиваетца в height) и висит на уровне контента прямоугольником. Если вас не затруднит, гляньте код пожалуйста. (у меня header вне wrappera, так как header на всю ширину браузера).

<div id="header">Header image</div><div id="wrapper"><div id="content"><h1>Заголовок</h1><div id="page-content"><div class="page-text"><?php p_content(); ?><p class="page-meta">Published on ;<span></span></p></div></div></div><div id="footer"></div></div></body></html>

И вот css:

#header {    position: relative;    width: 100%;    height:920px;    background: #333;    }#header image {height: 100%;width: 1920px;}#wrapper {width: 50%;height: 920px;margin-right: auto;margin-left: auto;}#content #page-content {float:left;width:700px;}#footer {height: 150px;background-color: darkblue

}

Edited October 21, 2015 by bobb

[psywalker]

Здесь бывали?

[bobb]

спасибо! а какие вы можете советы с ходу дать?

[psywalker]

спасибо! а какие вы можете советы с ходу дать?

Примерно вот такие.

[bobb]

пока большое спасибо! я изучу, а потом если можно напишу тут если что то не вкурю.

[bobb]

Я ознакомился с флексбоксом и у меня получилось так. Родителю блока футера - wrapperu я дал следующие значения

#wrapper {display: -webkit-flex;display: flex;-webkit-flex-direction: column;flex-direction: column;width: 50%;position:relative;height: 920px;margin-right: auto;margin-left: auto;}

Может ли такое иметь правду на жизнь?

 

После этого футер смог увеличиватца в размерах. Но проблема в том, что когда мало контента футер залезает на верх, а когда много контента он сидит внизу прижатый. Подскажите пожалуйста как решить данную проблему, чтобы он постоянно внизу сидел! Исходя из того кода что я выдал ранее.

Edited October 22, 2015 by bobb

[psywalker]

Вот пример. И в .main уже засовывайте шапку, и колонки.

[bobb]

спасибо вам большое! дело в том, что у меня хедер имеет ширину 100 % как же я враппер такой огромный сделаю?

[psywalker]

спасибо вам большое! дело в том, что у меня хедер имеет ширину 100 % как же я враппер такой огромный сделаю?

Извините, я не понимаю о чём вы( Не могли бы вы сделать рисунок с подробным описанием того, что вам нужно

[bobb]

Вот посмотрите пожалуйста:

 

[psywalker]

ок, а если так? Вот тут min-height: calc(100% - 102px); - ставите внутри 100% - "высота шапки + сумма границ". В моём случае 102 (100px - это высота шапки, а 2px - сумма границ по вертикали)

[bobb]

Спасиибо большое!! Использовал последний пример - работает. И кстати футер сидит внизу и не лезет куда не надо, Если можно последний вопрос в этой теме! Я хочу сделать рамку, у меня png картинка вертикаль, но почему то отображаетца не рисунок а тонкая линия где то 1 px. Куда картинка подевалась? Я делаю так:

 

.wrap {  display: flex;  background: red;  min-height: calc(100% - 102px);  flex-direction: column;  justify-content: space-between; border-left: 0px;border-image: url(images/vert.png)    margin: 0 25%;

[psywalker]

Прочитайте вот эту статейку.

[wwt]

calc(100% - 102px);

 

Мимо кассы: а оно уже настолько поддерживаемо браузерами что пора его начать использовать?

и ЗЫ я и flex'ами то ещё пользоваться не начал =)))

[psywalker]

 

calc(100% - 102px);

 

Мимо кассы: а оно уже настолько поддерживаемо браузерами что пора его начать использовать?

Вообще, вроде все последние браузеры поддерживают, но, конечно же, есть ограничения:

 

1. • IE10 crashes when a div with a property using calc() has a child with same property with inherit.
   • IE 9 - 11 don't render box-shadow when calc() is used for any of the values
   • IE10 and IE11 don't support using calc() inside a transform. Bug report
   • Safari & iOS Safari (both 6 and 7) does not support viewport units (vw, vh, etc) in calc().
   • IE Edge is reported to not support calc inside a 'flex'. (Not tested on older versions)

     This example does not work: flex: 1 1 calc(50% - 20px);

   • Firefox does not support calc() inside the line-height, stroke-width, stroke-dashoffset, and stroke-dasharray properties. Bug report
   • IE11 is reported to have trouble with calc() with nested expressions, e.g. width: calc((100% - 10px) / 3); (i.e. it rounds differently)
   • IE11 is reported to not support calc() correctly in generated content

    

[wwt]

но, конечно же, есть ограничения:

 

тогда я по старинке лучше в уме посчитаю )))

[bobb]

Psywalker, спасибо вроде разобрался! Но есть кое что - имеет ли право на жизнь вот тако:

border-left: 30px solid;-moz-border-image: url(img/b1.png) 10 20 10 100 stretch stretch;border-width: 30px;

и объсните пожалуйста, что значат цифровые значение (их четыре после скобок). Я играюсь с ними но пока не вкурил. Последнее значение 100 вроде с ужает.

Edited October 27, 2015 by bobb

[psywalker]

Psywalker, спасибо вроде разобрался! Но есть кое что - имеет ли право на жизнь вот тако:

border-left: 30px solid;-moz-border-image: url(img/b1.png) 10 20 10 100 stretch stretch;border-width: 30px;

и объсните пожалуйста, что значат цифровые значение (их четыре после скобок). Я играюсь с ними но пока не вкурил. Последнее значение 100 вроде с ужает.

Видимо это левое смещение по рисунку. Вот здесь можно поиграться с параметрами и посмотреть все эффекты.

[bobb]

Спасиб очень полезно!

Только вот у меня одна вертикальная полоса (рисунок) а там закачиваю и получаетца сразу 10 в ряд. Почему так?

[psywalker]

Спасиб очень полезно!

Только вот у меня одна вертикальная полоса (рисунок) а там закачиваю и получаетца сразу 10 в ряд. Почему так?

Ой, так вот сразу не отвечу, надо смотреть живой пример.