DIV相对于窗口垂直居中。可水平滚动。固定div旁边

Question

这是我需要的插图。

左边是一个固定的div，右边是一个水平滚动的div，类似于12000px。当重新调整大小时，我需要正确的div在窗口中垂直居中。我无法获得我使用的常用标签（position：relative和margin：auto）来处理这个问题。我认为这是因为div在屏幕两侧溢出了？

Answer 1

此界面应该完成您的模型显示的内容。感谢。

http://jsfiddle.net/9tV4y/2/

Answer 2

我不擅长布局页面，但是这个CSS就是你想要的左边水平滚动，div，

.horizontal_scroll{
    float:left;
    overflow:auto;
    white-space: nowrap;
    width : 500px;
    height : 500px;
}

并应用于div，

 <div class="horizontal_scroll"> ... </div>

Answer 3

宽度和高度都是基于百分比的（尽管您可以更改为您想要的任何其他类型的长度）。如果您更改左列的width，请务必将右列的left更改为相同。垂直定位使用top:0;bottom:0;margin:auto 0;height:70%;完成。必须设置定位，上/下边距和高度才能使其正常工作。

这是jsFiddle Demo。

HTML

<div id="lc"></div>
<div id="rc">Here's some text that does not wrap. This would be replaced with images, of course.</div>

CSS

<style>
html, body {height:100%;}
#lc {position:fixed; top:0px; left:0px; width:20%; height:100%; background:lime;}
#rc {background:red; height:75%; position:fixed; left:20%;right:0;top:0; bottom:0;margin:auto 0;overflow-x:auto;overflow-y:hidden;white-space:nowrap;}
</style>

注意：请务必设置height到html / #lc个父节点的所有元素的#rc到100%。