固定标题问题 - 没有水平滚动

我需要在用户滚动页面时显示标题。我设置标题是固定的位置，它保持滚动，但当我调整浏览器我没有得到水平滚动条，所以我不能看到例如导航中的所有项目。固定标题问题 - 没有水平滚动

<body>  
     <header> 
      <div id="topHeader"> 
       <p>test</p> 
      </div> 
       <nav> 
        ... navigation items ... 
       </nav>    
     </header> 
     <div id="content"> 
      @RenderBody() 
     </div>  
</body>

CSS

#content{margin-top:80px;} 
#topHeader{width: 100%; background: #262626; height: 40px;margin:0;} 
header 
{ 
    width: 100%; 
    position: fixed; 
    top: 0; 
}

来源

2012-03-23 1110

您的宽度设置为100％，这意味着在这种情况下，视口的100％。该元素不会超过该点，这意味着没有水平滚动条。

你真的不应该把东西固定到不适合它的视口。考虑添加某种箭头来平移导航，当它变得太大时。

来源

2012-03-23 21:46:18

使用最小宽度。并给旧的浏览器一个不同的体验，或者你可以写一些js来告诉头部不要变小，然后[数字]。此解决方案应该修复现代浏览器。

header{ 
    min-width:960px; 
    width: 100%; 
    position: fixed; 
    top: 0; 
}

来源

2012-03-23 21:57:31

如果我添加这个，那么只有内容是可滚动的。 – 1110 2012-03-23 22:20:32

您也可以在身上设置最小宽度。 – 2012-03-23 22:25:04

这不起作用。问题是因为我的头部位置固定。但我没有找到另一种方式来制作我想要的东西。 – 1110 2012-03-23 22:31:01

你不能在html/css中做到这一点。去this site并缩小浏览器窗口的方式，页脚是固定的位置，你失去了在右边的内容，但如果你使用水平滚动条它会移动。我用jQuery做了这个。这是我使用的代码。基本上我正在移动与Windows滚动位置有关的固定div内的内容。

if ($(window).width() < 990) { 
    $('#copyright').css({ 'left': (20 - $(window).scrollLeft()) + 'px' }); 
    $('#click-to-call, #erving').css({ 'right': (20 + $(window).scrollLeft()) + 'px'}); 
    } 
$(window).scroll(function() { 
    if ($(window).width() < 990) { 
    $('#copyright').css({ 'left': (20 - $(window).scrollLeft()) + 'px' }); 
    $('#click-to-call, #erving').css({ 'right': (20 + $(window).scrollLeft()) + 'px'}); 
    } 
    else { 
    $('#copyright').css({ 'left': '20px' }); 
    $('#click-to-call, #erving').css({ 'right': '20px' }); 
    } 
});

}）;

来源

2012-03-24 01:22:17 user1289347

不完美，但这对我有效。我编写了这个java函数positionContentBelowHeader来增加内容表的边距，使它直接显示在固定标题下。

将您的固定标题设置为没有最小宽度，当窗口缩小时它会挤得很小。然后，在body resize事件中调用position内容函数。这样，至少没有任何东西被切断，并且内容向下滑动以调整较高，紧凑的固定标题。

在asp.net后面的代码，我也有添加此运行网页上的位置的功能呈现

'Save dynamic employee panel height into property using javascript. 
Page.ClientScript.RegisterStartupScript(Me.GetType(), "positionContentBelowHeader", "positionContentBelowHeader();", True)

我把这个在身体

ID =“objMasterPageBody”在onResize = “positionContentBelowHeader（）”;

  <script type="text/javascript"> 

       function positionContentBelowHeader() 
       { 
        //Set header height 
        var headerHeight = document.getElementById('<%= TableHeader.ClientID %>').clientHeight; 
        document.getElementById('<%= hidHeaderHeight.ClientID %>').value = headerHeight;   //margin: 0px auto 0px auto; height: 100%; 
        document.getElementById('<%= TableContent.ClientID %>').setAttribute("style", "height: 100%; margin-left: auto; margin-right: auto; margin-bottom: 0px; margin-top: " + headerHeight.toString() + "px"); 

       } 

      </script>

来源

2013-01-30 21:35:19 MarkMeikle

这个工作，我得到了Facebook头的行为

<div id="headercontainer" style="position: fixed; width: 100%"> 
    <div id="actualheader" style="position: relative; width: 1000px; margin: 0 auto"> 
    </div> 
</div>

有以下的jQuery：

<SCRIPT> 
    $(window).scroll(function() { 
    $('#actualheader').css('left', -$(this).scrollLeft() + "px"); 
    }); 
</SCRIPT>

没有为测试兼容性

来源

2013-07-13 01:32:21

这工作得很好，似乎是最简单的解决方案。 – 2015-04-07 18:41:27

固定标题问题 - 没有水平滚动

回答

相关问题