0

Foundation 4 を使用して、サイトのナビゲーション バーを固定することにしました。私が見つけたいくつかの例に従って、セクションを a でラップし、「fixed」および「contain-to-grid」クラスを指定しました。固定タグを使用すると、ナビゲーション バーにマージンと同じ量の下部パディングが追加されます。クロムまたはFirefoxインスペクターを使用すると、これを行うCSSを見つけることができません。最大の高さを設定するために css に新しい行を追加しました。これを行うと、本文のコンテンツをオフセットするために使用されたマージンが削除されます。この新しい css ルールを追加する必要はないように感じます。誰かがこれを経験したことがありますか?どのように修正しましたか?

<div class="contain-to-grid fixed">
    <nav class="top-bar">
        <ul class="title-area">
            <!-- Title Area -->
            <li class="name">
                <h1><a href="/" style="background-image: url(/Content/logos/logo_color_105x35.png); text-indent: -119988px; width: 105px; background-repeat: no-repeat; background-position: 50% 50%;">company</a></h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
        </ul>

        <section class="top-bar-section">
            <!-- Left Nav Section -->

            <!-- Right Nav Section -->
            <ul class="right">
                <li class="divider hide-for-small"></li>
                <li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "RegisterLink" })</li>
                <li class="divider hide-for-small"></li>
                <li>@Html.ActionLink("Sign in", "SignIn", "Account", routeValues: null, htmlAttributes: new { id = "SignInLink" })</li>
            </ul>
        </section>
    </nav>
</div>

新しい CSS ルールを追加しました
。contain-to-grid.fixed{
max-height:45px;
}

フィドル http://jsfiddle.net/Emh8P/6/

4

1 に答える 1