Исправлено изменение положения центрирования моих заголовков, если я не установил ширину заголовка на 100%, почему? - PullRequest
2 голосов
/ 23 марта 2012

Допустим, у меня есть заголовок:

header {
     background-color: $main-background-color;
     height: 86px;

            #headerContent {
               background-color: $main-background-color;
               height:86px;
               margin:0px auto 0px auto;
               width: $site-width;
            }
}

Когда пользователь входит в систему, настройки заголовка изменяются на:

header {
    background-color: $main-background-color;
    position:fixed; 
    width:100%;
    height: 40px;

        #headerContent {
            position:relative;
            background-color: $main-background-color;
            width: $site-width;
            margin:0px auto 0px auto;
            height:40px;
                img {
                    margin-top:12px;
                }
        }

}

Что я хочу знать, так это почему все моицентрирование испортится, если ширина заголовка установлена ​​на auto?Я могу использовать только%.Использует ли это браузер, чтобы определить, что такое 100%?Когда я использую авто, кажется, что заголовок исчезает, и я вижу только мой div заголовка содержимого, который затем перемещается влево на страницу.

У меня это работает сейчас, но я просто хотел бы понять, что происходит.

С уважением

Ответы [ 2 ]

2 голосов
/ 23 марта 2012

Положение fixed & absolute по умолчанию принимает содержимое width & height. поэтому, когда вы определяете auto, он принимает его содержимое width. Для этого лучше определить left & right вместо width:100%. Как это:

header{
 right:0;
 left:0;
 position:fixed;
}
1 голос
/ 23 марта 2012

Я считаю, что проблема связана с position:fixed в вашем заголовке. Когда вы исправляете элементы, они выходят из нормального потока страниц, и контейнер сворачивается до размера его содержимого. Для проверки, если вы удалите объявление position:fixed, вы должны увидеть, что вам не нужно устанавливать ширину на 100%.

...