2

リキッド ページを作成しており、水平メニューバー (ul) を絶対下部 (スティッキー フッター) に配置しています。

期待される動作

これで問題はありませんが、ブラウザーのサイズを変更すると、明らかにメニューの内部要素が互いに上に積み重なって、メニューが高すぎてメイン コンテンツと重なってしまいます。

オーバーラップの問題

（次のいずれか）への方法はありますか

  • 絶対配置メニューを「下向き」に成長させますか?
  • または、特定の高さで底に揃えるエッジを設定しますか (その点から底まで成長させるため)?
  • または、上記の要素をプッシュするようにメニューにレイアウトを与えます（私は遊んでみましoverflowたが、うまくいきません）？

それはhtmlです：

<div class="container">
    <div class="izda">
        Foo
    </div>
    <div class="dcha">
        <p>Lorem ipsum dolor</p>
        <p>Lorem ipsum dolor</p>
        <p>Lorem ipsum dolor</p>

        <p>Lorem ipsum dolor LAST</p>
        <ul>
            <li>Item</li>
            <li>Another</li>
            <li>More</li>
            <li>Item</li>
        </ul>
    </div>
</div>

そしてCSS：

.container {position:relative}
.izda {background:red;
       height:20em; 
       display:inline-block; 
       width:20%; 
       vertical-align:top;
}
.dcha {background:gold; 
       display:inline-block; 
       width:78%; 
       margin-bottom:3em;
}
ul {position:absolute;
    bottom:0;
    background:pink;
    margin:0;
    padding:0;
    max-width:100%;
}
ul li {float:left; 
       list-style:none;
       border:1px solid black;
       margin:0 1em;
       padding:1em;
}

ここでの実例: http://jsfiddle.net/KQhLs/2/

さらに段落を書くと、父の余白の下のおかげで、メニューは適切に下がります。

スティッキー フッターを適切に押し下げる

ただし、フレームのサイズを変更すると、オーバーラップ効果が見られます。

前もって感謝します。Web は最新のブラウザーでのみ動作し、可能であれば純粋な css (JS なし) で動作することになっています。

編集:風がこれらの方法で吹いていると思います: 固定要素がページのコンテンツにホバリングするのを避けるには? 最後に: レスポンシブ サイトのスティッキー フッター

しかし、有用な答えはありません...

実際、私はこの動作をmediaqueriesで防ぐことができます。それは簡単です。しかし、「すべての人に1つの」ソリューションがあるかどうかを知りたい.

EDIT2:私はちょうどA list away - Exploring footersを読んだところです。JS ソリューションは別として、私はすべて試しましたが、問題はここにあります。フローティング要素をフッター内に配置すると、メイン コンテンツと重なってしまいます。

また、 CSS Sticky Footerを読みましたが、同じ問題があるようです。

純粋なcssでこれを達成するのは不可能だとは思いません...あきらめるべきですか？

4

2 に答える 2

-1

ラッパー/コンテナが相対的であることを確認してください。その下にフッターを相対的に配置し、top:100% を追加します

于 2013-04-17T14:31:30.500 に答える