0

私の人生では、サイドナビゲーションをページの下部に展開することはできません。私はこれをグーグルで検索し、これに関連する他の多くのスタックオーバーフローの質問を見ましたが、何も役に立ちません.

height: 100%; 以来、人々は親divに高さを設定することを提案しています。100%が何かはわかりません。しかし、両親の身長はどのようにして 100% を知るのでしょうか?

また、「固定」または「絶対」ポジショニングは使用できません。これは、Twitter Bootstrap の応答性を完全に損なうように思われるためです。

これが私のコードです：

    <div id="secondary">
    <div class="span10" style="background-color: #860038; min-height: 100%; overflow: hidden;">
      <ul class="side-nav">

        <?php if (!empty($secondary_menu)): ?>

            <?php foreach ($secondary_menu as $key => $menu): ?>

                <?php $active = ($this->uri->segment(2,'index') == $key)? 'side-box-active': 'side-box'; ?>

                <li class="<?= $active ?>"><a href="<?= base_url().$primary_menu.'/'.$menu['link']?>"><?= $menu['label']?></a></li>
            <?php endforeach ?>
        <?php endif ?>
      </ul>
    </div>
</div>

したがって、上記のコードは、アプリケーション全体でサイド ナビゲーションを動的に作成します。私は Twitter Bootstrap を使用しており、div class="span10" にサイド ナビゲーションの背景色と最小高さ: 100% を設定しています。(また、overflow:hidden)。

これが現在行っていることは、コンテナーを作成することですが、ページの下部に展開するのではなく、ナビゲーションが停止するとすぐに途切れます。

ご覧のとおり、必要な場合に備えて、ID="secondary" で親 div をセットアップします。

スクリーンショットは、サイド ナビゲーションを示しています。画面の下部まで拡大するには、あずき色の赤い色が必要です。写真を投稿してから説明し、写真を投稿できないことを伝えることができることをスクラッチします:)申し訳ありませんが、画像はありません。

事前に助けてくれてありがとう。

4

2 に答える 2

5

html100% の高さを機能させるには、とを含む親要素も 100% の高さが必要bodyです。

于 2012-12-20T16:23:09.943 に答える
0

問題を解決したかどうかはわかりませんが、誰かが解決していない場合: ページのずっと下まで繰り返したい背景画像または色があるが、そのページ内に異なる長さの列がある場合、これを実現する方法は、背景の画像または色をコンテナーに入れ、異なる長さの列を保持することです。上記の列は、その中に入れたコンテンツの量に応じて下に展開されます。コンテナー内の最長の div は、背景画像を繰り返し y (下) または色にします。

したがって、構造は次のようになります。

<div id="container"> <!--which is the #1 element in your body--> 
<div id="leftcolumn"> Your side-nav would go here</div>    
<div id="rightcolumn">Your main content which is usually longer 
than the menu will go here</div>
</div><!-- end container-->

明らかにこの状況では、ヘッダーとフッターの div はコンテナー div の外側に配置され、すべてを中央に保つために別のラッパー div 内に移動する必要がある場合があります。

たとえば、次の CSS を使用すると、問題なく動作します。

<style> 
html,
body {
  height:100%;
   background-color : #103C52; /* or whatever you like*/
}
#container {
  height:100%;
  background-color: green; /* or whatever you like*/
}
#leftcolumn {
  height:100%;
  width: 16.67%; /* or whatever you like*/
  background-color: red; /* or whatever you like*/
  float: left;
}
#rightcolumn {
  height:100%;
  width: 80%; /* or whatever you like*/
  overflow-x: hidden; /* or whatever you like*/
  overflow-y: scroll; /* or whatever you like*/
  background-color: blue; /* or whatever you like*/
  float: left;
}

</style>

これが明確でない場合は、これまでの内容を投稿してください。私はそれを見ていきます... ;)

于 2013-03-21T07:21:07.883 に答える