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 回答