Маржа на фиксированном div шириной 100%?

Мне нужен фиксированный заголовок, под которым может прокручиваться содержимое (тело). Этот заголовок должен быть на 100% родителем, но у родителя есть право на отступ. Фиксированный заголовок получает 100% ширины окна вместо родителя.

Как это можно исправить?

Пример: http://jsfiddle.net/4u0c85k8/

HTML

<div id="parent">
    <div id="child">
        <div id="header">
            HEADER
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
</div>

CSS

#parent {
    width: 100%;
    border: solid 1px black;
}

#child {
    background-color: lightgray;
    margin: 0 8px;
    width: auto;
}

#header {
    position: fixed;
    height: 28px;
    top: 17px;
    background-color: lightgreen;
    width: 100%;
}

#content {
    margin-top: 36px;
    height: 1000px;
}

css fixed margin
person fusio    schedule 07.11.2014    source источник
comment
Вы хотите заголовок в div?   -  person Stefan    schedule 07.11.2014

Ответы (1)


arrow_upward
0
arrow_downward

Если вы измените ширину: 100% для этого css:

right:0px;
left: 0px;
margin-left:17px;
margin-right:15px;

это работает, но я не думаю, что это лучшее решение.

person Stefan    schedule 07.11.2014
comment
почему не лучшее решение? это работает .. небольшая проблема: что, если я хочу добавить display: table к фиксированному div? jsfiddle.net/4u0c85k8/3 - person fusio; 07.11.2014
comment
Посмотрите здесь display и position не очень хорошо работают вместе :( возможно, вы найдете решение здесь: w3.org/TR/CSS2/visuren.html#dis-pos-flo - person Stefan; 07.11.2014
comment
Я обманул его, добавив еще один фиксированный контейнер с заголовком внутри таблицы. - person fusio; 07.11.2014