为什么固定元素不接受最大宽度？

Question

首先，我无法在此处发布任何代码，因为我的 blog 存在问题。 请打开这个。现在，实际上有两个问题。

主要问题：

如果您发现顶部的内容（实际上是包含我博客标题的标题）有固定位置。与它下面的div相同，那就是我的导航面板（带有 tabs-outer 类的div）。这两个元素都有最大宽度：1090px，但是它没有工作。有没有办法让这些元素固定并接受最大宽度？

问题2：

第二件事是，当你减少浏览器的屏幕宽度时，具有主要内容的div（即，类 content-outer 的div）收缩，因为我设置了max-width属性为了它。但问题是，当您在任何智能手机中打开此博客时，它不会遵循它。该博客的宽度为1090像素。为什么会这样？有什么我想念的吗？

Answer 1

主要问题：您的代码似乎没有意外。也许你误解了max-width的使用。你究竟想要的结果是什么？如果你想要以下效果：

然后，只需更改：

header max-width: 1090px至width:100%;max-width:1090px

AND

.tabs-outer max-width: 1090px至width:100%;max-width:1090px;

问题2：

假设上述内容无法让您获得移动设备上的效果，请使用CSS Media Queries根据屏幕大小指定CSS。这是一个例子：

@media (max-width: 767px){ 

.tabs .widget li, .tabs .widget li{ 
    width: 100%; 
    height: 34px; 
    text-align: center; 
    border: 1px solid #fff; 
    border-left: none; 
    border-right: none; 
    background-color: #19697b; 
} 

.tabs .widget li, .tabs .widget li:selected{ 
    background-color: #19697b; 
} 

.tabs .widget li, .tabs .widget li a{ 
    z-index: 0; 
    width: 100%; 
} 

}

（这个例子是更好地利用空间用于较小屏幕的一步，结果如下：

Answer 2

当我检查您的页面时，我会看到：home.html：162

   html body .region-inner {
        min-width: 0;
        max-width: 100%;
        width: auto;
    }

如果你删除它，导航面板的宽度就可以了。