Question

假设我有一个标题：

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;
                }
        }

}

我想知道的是，如果标题宽度设置为自动，为什么我的所有居中都会陷入困境？我只能使用％。这是使用浏览器来确定100％是什么？当我使用auto时，标题似乎消失了，我只能看到我的headercontent div，然后转移到页面左侧。

我现在正在使用它，但我想了解发生了什么。

亲切的问候

Answer 1

位置fixed＆amp; absolute是默认的内容width＆amp; height。这就是为什么当你定义auto时，它的内容是width。最好定义left＆amp; right代替width:100%。像这样：

header{
 right:0;
 left:0;
 position:fixed;
}

Answer 2

我认为问题来自您标头上的position:fixed。当您修复元素时，它们会突破正常的页面流，容器将折叠到其内容的大小。要进行测试，如果删除position:fixed声明，则应该看到您不需要将宽度设置为100％。

固定位置抛出我的标题居中，除非我将标题的宽度设置为100％为什么？

2 个答案: