如何使流体宽度网页具有固定（固定）标题？答案

【问题标题】：How to make a fluid width webpage have a fixed (pinned) header?如何使流体宽度网页具有固定（固定）标题？
【发布时间】：2014-06-13 16:15:10
【问题描述】：

我正在尝试将此网站上的标题/菜单栏设为静态（固定），以便它始终出现在屏幕顶部，并且一个特别长的网站会在它“后面”滚动。我以前在固定宽度的网站上完成过这个，但是这个网站是可变宽度的，我还不能在不破坏标题的情况下完成这个。

有人能告诉我我需要在 CSS 中编辑的位置/内容吗？我相信我需要添加一个位置：固定；某处的元素，也许在本节中，但它似乎并没有像在固定宽度的网站上那样实现我的目标。

.art-header
{
   margin:0 auto;
   background-repeat: no-repeat;
   height: 170px;
   position:relative;
   background-image: url('images/header.jpg');
   background-position: center top;
}

.custom-responsive .art-header
{
   background-image: url('images/header.jpg');
   background-position: center top;
}

.default-responsive .art-header,
.default-responsive #art-header-bg
{
   background-image: url('images/header.jpg');
   background-position: center center;
   background-size: cover;
}

.art-header-inner{
   position: relative;
   min-width: 840px;
   max-width: 1920px;
   width: 50%;
   z-index: auto !important;
   margin: 0 auto;
}

【问题讨论】：

请将您的代码放在小提琴上，这将有助于理解您的查询
如果没有 CSS 的标记，就无法回答这个问题。
所以您尝试了position: fixed;，但没有成功？你能把它放在jsfiddle吗？
这是一个小提琴 - jsfiddle.net/8uZE5/2 - 希望它至少能很好地解决这个问题。如果还有什么我可以提供的，请告诉我。

标签： html css responsive-design fixed fluid-layout

【解决方案1】：

试试这个，将你的 .art-header 和 .art-nav 合并到一个 div 中，然后像这样将 fixed 归类

<div class="fixed">
    //div .art-header & nav .art-nav here
</div>

然后添加css进行修复

.fixed {
    position: fixed;
    z-index: 100;
}

为.art-sheet留点余地

margin-top: 241px; /*the height of the fixed div*/

这是JSFIDDLE

【讨论】：