CSS: фиксированный заголовок в резиновом блоке во всю его ширину

Question

[ChemAli]

Чтобы не тратить байты на объяснения, вот заготовка в песочнице: jsfiddle.net/RYCnH/

Если убрать position:fixed; заголовок штатно занимает всю ширину, но при прокрутке уходит вверх. Нужно чтобы блок заголовка .header занимал всю ширину блока .container и при прокрутке оставался видимым.

Answer 1

[Fastto]

заголовку — position: absolute;
left: 0;

Comments

[Fastto]

right:0;
top: 0;

[Fastto]

II) разнести по фреймам

III) вынести все содержимое за заголовком в один контейнер, назовем его .body, этому контейнеру задать высоту и прокрутку при переполнении

[Fastto]

Поспешил с position: absolute;. Первый вариант для position: fixed;

[Fastto]

.header {
position: fixed;
left: 0;
right: 0;
top: 0;
background: #ccc;
}

Только в этом случае хидер перекрывает собой первый элемент, поэтому нужно первому элементу или margin-top задать равный высоте хидера или вставить пустышку с такой же высотой.

[ChemAli]

header должен находиться внутри container, а не перекрывать его поверх и растягиваться на всю страницу. С вашим кодом, увы, растягивается на всю страницу.

[Fastto]


Header
Some text
.................
Some text




[Fastto]

Copy Source | Copy HTML

1. <style>
2.   .container
3.   {
4.     width: 75%;
5.     background: #eee;
6.   }
7.  
8.   .header
9.   {
10.     background: #ccc;
11.   }
12.  
13.   .body
14.   {
15.     overflow: auto;
16.     height: 600px;
17.   }
18. </style>
19. <div class='container'>
20.   <div class='header'>Header</div>
21.   <div class='body'>
22.     <p>Some text</p>
23.     ...
24.     <p>Some text</p>
25.   </div>
26. </div>

[ChemAli]

В принципе да, но откуда-то всплыл новый элемент, а в условии его не было :)

[Fastto]

хм, предоставленный код вполне удовлетворяет условию «Нужно чтобы блок заголовка .header занимал всю ширину блока .container и при прокрутке оставался видимым.». Надеюсь я Вам помог :)

А чтобы без дополнительного элемента:

Copy Source | Copy HTML

1. <style>
2.   .container
3.   {
4.     width: 75%;
5.     background: #eee;
6.     overflow: auto;
7.     height: 600px;
8.   }
9.  
10.   .header
11.   {
12.     background: #ccc;
13.     width: inherit;
14.     position: absolute;
15.   }
16.  
17. </style>
18. <div class='container'>
19.   <div class='header'>Header</div>
20.     <br />
21.     <p>Some text</p>
22.     ...
23.     <p>Some text</p>
24. </div>

[Fastto]

обратите внимание на width: inherit; — это и дает нужный эффект, только по моему в IE должно стоять 100% вместо inherit, это решается простым хаком.

Answer 2

[ertaquo]

Небольшой яваскрипт с jQuery:
$(document).ready(function(){
$(window).scroll(function(){
var header = $('.header').detach();
var scrollTop = $(window).scrollTop();
$('.container p').each(function(){
if ($(this).offset().top > scrollTop)
{
$(header).insertBefore(this);
header = null;
return false;
}
});
if (header)
{
$('.container').append(header);
}
});
});
Думаю, это примерно то, что нужно :-)

Comments

[ChemAli]

До последнего буду сопротивляться и искать в CSS :)

Answer 3

[nonexistent]

не поверите. width: 100% помогает

Comments

[ChemAli]

Не помогает. Заголовок вписывается в страницу, а не в контейнер.

[Fastto]

Вы если спрашиваете, то все же нормально изложите вопрос, потому что в примере у Вас прокручивается тело документа, а не .container и если вы хотите что бы заголовок тянулся на ширину контейнера, но оставался на одном месте при прокрутке документа, а не содержимого контейнера, то это уже совсем другая задача.