固定標題和窗口大小
[英]Fixed header and window resize
問題描述
我在網站上有一個帶有導航菜單的固定標題：
#header_wrapper
{
height: 75px;
background-color: #FD735B;
z-index: 999;
position: fixed;
width: 100%;
}
#header_wrapper .control_wrapper
{
position: absolute;
right: 0px;
}
#header_wrapper .control_wrapper .control
{
float: left;
padding-left: 35px;
padding-top: 25px;
font-weight: bold;
}
.inner_content
{
height: 100%;
margin: 0px auto;
width: 85%;
position: relative;
z-index: 1;
}
這是標題的HTML：
<div id="header_wrapper">
<div class="inner_content">
<div class="control_wrapper">
<div class="control local">
<a class="white_font" id="link_user_experience">USER EXPERIENCE</a>
</div>
<div class="control local">
<a class="white_font" id="link_restocking">RESTOCKING EXPERIENCE</a>
</div>
<div class="control local">
<a class="white_font" id="link_analytics">ANALYTICS</a>
</div>
<div class="control">
<a class="white_font" id="link_team" href="team">TEAM</a>
</div>
</div>
</div>
問題在於，當您調整窗口大小並使其變窄時，導航菜單上的部分會被切斷。 而且，如果您嘗試水平滾動，它仍然會被切斷。
這是截止標題的圖像：
我正在嘗試滾動到右側-內容已滾動，但標題保持不變：
調整大小后如何使標題看起來不錯？
更新：
我試圖在jsfiddle上重新創建我的問題。 我將頁面和頁眉的寬度設置為大，以模仿狹窄的窗口（我的問題僅在用戶調整窗口大小並使之變窄時出現）。
我在標題中放置了3個標題。 加載小提琴時，您只會看到其中兩個。 第三個不在可見區域內。 我認為您應該只水平滾動，固定的標題將與頁面的其余部分一起滾動。 但是固定的標題不會滾動，因此看不到標題＃3。
換句話說，我需要固定的標題才能像其他任何元素一樣水平滾動。
3 個解決方案
解決方案1
1 2013-11-01 15:10:55
看起來您的導航內容是position：absolute; 右：0像素; 即使調整了瀏覽器的大小，這也會導致導航盡可能地向右移動。
如果創建li和float：right，則display：inline-block應該可以為您提供所需的功能。
<nav>
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
nav{width:100%;position:absolute;background-color:red;}
nav li{float:right;display:inline-block; padding-right:10px;}
這是一個JSFiddle：
編輯：清理我的html和小提琴。 標頭是否意外浮動。
解決方案2
0 2013-11-05 13:13:54
也許您可以嘗試我在固定頂部欄中編寫的解決方案，該解決方案與頁面的其余部分一起水平滾動，這似乎也是您想要的。
解決方案3
0 2014-12-12 15:40:13
有一個AJAX控件可以幫助解決此問題。 您可以使用“ AlwaysVisibleControlExtender”。 我已經在我的頁面中使用了它，並且效果很好。
下面是asp代碼。
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.header{width:100%;height:100px;position:fixed;z-index:1000;}
.content{padding-top:160px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" ScriptMode="Release">
</ajaxToolkit:ToolkitScriptManager>
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server" TargetControlID="lnkHome" HorizontalOffset="70" VerticalOffset="60" HorizontalSide="Right" VerticalSide="Top">
</ajaxToolkit:AlwaysVisibleControlExtender>
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender2" runat="server" TargetControlID="lnkLogout" HorizontalOffset="20" VerticalOffset="60" HorizontalSide="Right" VerticalSide="Top">
</ajaxToolkit:AlwaysVisibleControlExtender>
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender3" runat="server" TargetControlID="lblName" HorizontalOffset="110" VerticalOffset="60" HorizontalSide="Right" VerticalSide="Top">
</ajaxToolkit:AlwaysVisibleControlExtender>
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender5" runat="server" TargetControlID="Image1" HorizontalSide="Center" VerticalSide="Top">
</ajaxToolkit:AlwaysVisibleControlExtender>
<asp:Image ID="Image1" runat="server" Height="150px" ImageUrl="~/Image/ABC.jpg" Width="1594px" />
<p style="margin-left: 1240px; width: 187px;">
<asp:Label ID="lblName" runat="server" Font-Size="Small" Font-Names="Arial" ForeColor="White">
</asp:Label>
<asp:LinkButton ID="lnkHome" runat="server" Font-Size="Small" ForeColor="White" Font-Names="Arial">Home</asp:LinkButton>
<asp:LinkButton ID="lnkLogout" runat="server" Font-Size="Small" ForeColor="White" Font-Names="Arial">Logout</asp:LinkButton>
</p>
您需要拖放Alwaysvisible擴展程序控件，並如上所述提供目標控件ID。 希望這可以幫助。
窗口調整大小到固定點
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.