2

サイトにナビゲーション メニュー付きの固定ヘッダーがあります。

#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タイトル入れました。フィドルをロードすると、そのうちの 2 つだけが表示されます。3枚目は視界外。水平にスクロールするだけで、固定ヘッダーがページの残りの部分と一緒にスクロールするはずだと思いました。ただし、固定ヘッダーはスクロールされず、タイトル #3 は表示されません。

つまり、他の要素と同様に水平方向にスクロールするには、固定ヘッダーが必要です。

4

3 に答える 3

1

あなたのナビゲーション コンテンツは position:absolute; のようです。右:0px; これにより、ブラウザのサイズが変更された場合でも、ナビゲーションが可能な限り右に移動します。

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 は次のとおりです。

http://jsfiddle.net/gBYZ4/3/

編集：HTMLとフィドルをクリーンアップしました。たまたまヘッダーが浮いていました。

于 2013-11-01T15:10:55.553 に答える
0

この問題を解決するのに役立つ 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 を指定する必要があります。お役に立てれば。

于 2014-12-12T15:40:13.757 に答える
0

たぶん、ページの残りの部分と一緒に水平にスクロールする固定トップバーに書いた解決策を試すことができます。

于 2013-11-05T13:13:54.790 に答える