0

基本的に、サイドコラムとメインコラムがあります。サイド カラムにはいくつかのナビゲーション アイコンがあり、メインには iframe があります。

ほぼ 90% の場合、iframe コンテンツの高さは約 2000 ピクセルになります。問題は、サイドバーを絶対に横に配置するとmin-height: 100%;、ページをロードするときにビューポートの高さだけが考慮されることです。

ページを下にスクロールしてすべてのメイン コンテンツを表示すると、サイドバーの最後に到達すると途切れてしまいます。これは恐ろしく見えます。私が得ている問題に対する純粋なCSSソリューションがあるかどうか知りたいですか? 濃い灰色のバーと を持つ背景画像を作成することもできrepeat-yましたが、他に解決策があるかどうかを確認したかっただけです。

使用したくない理由position: fixed;は、サイドバー メニューの高さが変わることがあるためです。つまり、ユーザーがページ スクロールを使用して他のオプションを表示できるようにする必要がある場合があります。

ここで見つけることができる私の要点を示すのに役立つjsfiddleを作成しました：http://jsfiddle.net/kKjBY/1/

私のHTML

<div class="wrapper">

    <div id="main_content" class="large">
            <p>Main content</p>
        </div>

        <div id="sidebar">
            <ul class="sidebar_nav">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>0</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
</div>

私のCSS

#sidebar {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  min-height: 100%;
  background: #323232;
  color: #fff;
}
#main_content{
    padding-left: 80px;    
    height: 3000px; /* stricly to demonstrate */
}
#sidebar ul{ 
    margin: 0;
    padding: 0;
}
#sidebar li {
  list-style: none;
  width: 60px;
  height: 60px;
  text-align: center;
}
4

2 に答える 2

0

divはする必要があります

top: 0;
left: 0;
position: fixed;
width: 100%;
height: 100%;

その後、ビューポートの寸法内にとどまり、スクロールバーで「移動」します。

ここにコードを入力すると、スタイルが

マージン: 0; パディング: 0;

于 2013-08-19T09:29:35.983 に答える