Question

如果另一个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/

Answer 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;}

Answer 2

有几种方法可以做到这一点，但我找到的最简单方法是：

的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/

如何在不使用固定定位的情况下对视口进行100％的div？

2 个答案: