Занять 100% высоты экрана, известными методами реализовать не удалось.

[Vicos]

Здравствуйте! Помогите решить проблему, их несколько, но основная это:

1) Растянуть на всю высоту экрана и не появлялась полоса прокрутки, используя лишь средства CSS. Поддержка старых версий браузеров не важна, главное что бы на основных браузерах работало.

http://jsfiddle.net/Vicos/KH2gC/

Картинки не отображаються, не понял куда их пристроить чтобы в сервисе jsfiddle работали.

Так же готов выслушать критику по вёрстке.

Спасибо всем кто уделит время.

[Светлана Г.]

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

http://jsfiddle.net/SvetaGr/YwTmW/9/

 

Скрипт берет высоту у футера, а затем это значение подставляет в качестве padding-bottom блоку с основным контентом.

[Vicos]

Скрипт берет высоту у футера, а затем это значение подставляет в качестве padding-bottom блоку с основным контентом.

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

Хотя не упускаю вариант что упустил какой то момент и просто криво сделал. Посмотрю точнее как там реализованно.

Edited December 15, 2013 by Vicos

[Светлана Г.]

Эта тема (прижатие футера к низу) рассматривается здесь:

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

 

JS нужен в том случае, если высота футера неизвестна.

 

Вот пример с фиксированной высотой футера, без js:

http://jsfiddle.net/SvetaGr/YwTmW/3/

[Vicos]

Эта тема (прижатие футера к низу) рассматривается здесь:

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

 

JS нужен в том случае, если высота футера неизвестна.

 

Вот пример с фиксированной высотой футера, без js:

http://jsfiddle.net/SvetaGr/YwTmW/3/

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

1) Блок обёртка (в моём случае так же #wrapper) -

#wrapper{min-height: 100%;position; relative;}

2) Блок с контентом (#head_body) -

#content{  padding-bottom: 100px;}

3) Подвалу (#footer) -

#footer{    bottom: 0;    height: 300px;    overflow: hidden;    position: absolute;}

4) Класс clearboth не понятно зачем.

[Светлана Г.]

Значение padding-bottom должно быть не меньше, чем высота футера.Это важно!

 

Класс clearboth не понятно зачем

 

 

Это служебный класс.

 

.clearfix:after{

    content:"";

    display:block;

    clear:both;

}

 

Вот структура кода:

 

<div id="wrapper">

        <section id="content"></section><!-- /#content -->

<section id="footer"></section><!-- /#footer -->

</div><!-- #wrapper -->

 

Перед #footer можно разместить и другие блоки, при необходимости. Смысл в том, что #footer имеет абсолютное позиционирование, соответственно, блок, стоящий непосредственно перед ним, должен ему освободить место, чтобы тот не налез на него. Вот этот padding-bottom и нужен для этого.

[Vicos]

Чертовщина какая то, чего намудрил не ясно ни в какую не хочет исправляться. Занимает высоту больше экрана и что не чуди ни в какую обратно не лезет. Как бы всё с начала не пришлось делать. Ну да ладно, получил ценный опыт того что обязательно сперва сверстай каркас и лишь потом принимайтся за все остальные "плюшики".

Светлана, не смею больше тратить ваше время, но всё же вам удалось FireBug'e сделать как надо? Ошибки кроються в структуре html макета или всё же css можно поправить.

[Светлана Г.]

Сейчас посмотрела Ваш код более внимательно. Ранее предложенный вариант здесь не подойдет. Здесь нужно другое решение.

[Switch74]

цели особо не ясно...

 

1) Растянуть на всю высоту экрана ..., используя лишь средства CSS.

html,body{height;100%;}

wrapper{min-height;100%;}

 

1) ... и не появлялась полоса прокрутки, используя лишь средства CSS.

html,body{overflow:hidden;}

 

но тогда, если у вас будет много контента, нижней части не увидят

 

если вам нужно, чтобы футтер был всегда в нижней части экрана, то смотрите в сторону position:fixed;

 

исходя из вашей верстки, предположил, что вам нужно что-то вроде:

http://jsfiddle.net/M94Wk/

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