0

別の div が画面よりも大きい場合、サイド バーを画面の 100% ではなくページ全体の 100% にするにはどうすればよいですか?

スクロールが必要な大量の情報を含める必要があるため、サイドバーで固定位置を使用することは避けたいと思います。

body {
    height:100%;
    background:red;
}
#container {
    width:50%;
    margin:0 auto;
    height:1200px;
    background:white;
}
#left {
    position:absolute;
    float:left;
    height:100%;
    width:100px;
    background:black;
}

<body>
    <div id="left"></div>
    <div id="container"></div>
</body>

http://jsfiddle.net/jBMBR/2/

4

2 に答える 2

1

これはあなたが望むものを達成しますか？http://jsfiddle.net/David_Knowles/qfTd5/

body{ height:100%; background:red; position:relative;}
#container{ width:50%; margin:0 auto; height:1200px; background:white;}
#left{ position:absolute; top:0; bottom:0; right:0; width:100px; background:black; overflow:scroll;}
于 2013-05-13T07:06:09.953 に答える
0

これを行うにはいくつかの方法がありますが、私が見つけた最も簡単な方法は次のとおりです。

CSS:

<style>
    html, body { height: 100%;}
    #left, .main, #wrapper { height: 100%;}
    .wrapper { display: table;position: relative;  }    
    #left { position: relative;background: yellow;width: 100px;display: table-cell;} 
    .main { position: relative;background: yellowgreen;width: 500px;display: table-cell;}
</style>

HTML:

<div class="wrapper">
    <div id="left">
        <p>left nav</p>
    </div>
    <div class="main">
        <p>asdfasdf</p>
        <p>asdfasdf</p>
        <p>asdfasdf</p>
        <p>asdfasdf</p>
        <p>asdfasdf</p>
        <p>asdfasdf</p>
        <p>asdfasdf</p>
        <p>asdfasdf</p>
        <p>asdfasdf</p>
        <p>asdfasdf</p>
        <p>asdfasdf</p>
    </div>
</div>

http://jsfiddle.net/jBMBR/6/

于 2013-05-13T08:51:48.063 に答える