2013-12-12 99 views
0

我想知道如何找出CSS,使下面的HTML中的第一个div(与class="left-col"一个)跨越页面的整个垂直高度。 (注意:即使需要滚动以查看页面底部,也应该保持div的这个“全部垂直范围”属性,并且也不应该受到窗口大小调整的影响,可能会回流其余部分)CSS使div跨度全高?

我对导致所需CSS的推理/理性/思考过程比CSS代码本身更感兴趣。 IOW,我不是在寻找一次性的咒语,而是我正在寻找一个如何解决这些问题的例子。

(顺便说一句,我发现了一些SO线程也询问作出div跨度页面的高度,但在这些线程给出的解决方案并不适用于上述一般情况下(例如,它们如果页面的整个高度大于视口的高度,则失败,因此需要垂直滚动以查看全部)更重要的是,我没有找到解决方案解释为什么他们应该工作,所以他们不提供我主要是以后的理解。)


(这里是下面给出的代码jsFiddle)。

*{ 
    margin:0; 
    padding:0; 
    border:0; 
    outline:0; 
} 
.right-col{ 
    min-width:160px; 
    max-width:320px; 
    margin-left:auto; 
    font-family:consolas,monaco,courier,monospace; 
    font-size:22px; 
    line-height:43px; 
} 
.left-col{ 
    width:80px; 
    background-color:orange; 
} 


<body> 
    <div class="left-col"></div> 
    <div class="right-col">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id nisi placerat, commodo elit sed, lacinia elit. Curabitur at malesuada nunc. Curabitur fermentum, neque at molestie lobortis, ligula mauris placerat felis, in hendrerit libero orci tempor sapien. Donec vel ultricies enim. Fusce tempus ante vitae purus laoreet laoreet. Maecenas urna felis, feugiat at lorem vitae, iaculis elementum nisi. Mauris venenatis lacinia nunc, sit amet bibendum tortor faucibus ac. Quisque lobortis condimentum diam, eget luctus odio iaculis in. Praesent malesuada velit at scelerisque porta. Nam dui arcu, mollis imperdiet semper vel, malesuada in nulla. Integer volutpat varius tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer iaculis odio et semper venenatis. Mauris quis convallis odio, nec ornare mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse pharetra mollis tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ac tortor a volutpat. Sed ac bibendum tortor. Morbi vitae augue in dui ultrices convallis vel eu massa. In congue gravida leo, et vehicula lacus posuere fermentum. Suspendisse molestie ipsum sit amet accumsan luctus. Pellentesque nec blandit ipsum. Aliquam magna risus, iaculis eget sapien quis, tristique sagittis diam. Etiam consectetur dapibus augue quis egestas. Phasellus pellentesque scelerisque ligula eget consequat. Maecenas bibendum nibh vel aliquet rutrum. Nullam faucibus diam diam, vitae hendrerit erat rhoncus non. In semper tortor eu leo hendrerit venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div> 
</body> 

特别是,我在达到了 “相似的外观的” 解决方案不感兴趣通过完全不同的装置(例如通过使用背景图像或使用JavaScript的样式属性的运行时设置)。我知道这样的替代解决方案,并且不需要帮助。

回答

2

由于您基本上正在尝试创建双列布局,因此我会亲自尝试依靠display: table-cell。如果您对此显示类型不熟悉,那么它几乎与<td>标记的CSS等效,但如果您不想要,则不需要将其包装在完整的display: table布局中。这种显示类型的好处是,它将强制自己保持与兄弟姐妹在同一行,并跨越其父母的整个高度。

以下是它的外观的一个基本示例(不考虑边距e.t.c):JSFiddle