Question

我想知道如何确定将使下面的HTML中的第一个div（class="left-col"）的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的样式属性）。我知道这些替代解决方案，并且不需要帮助。}

Answer 1

由于您基本上是在尝试创建两列布局，因此我个人会尝试依赖display: table-cell。如果你不熟悉这种显示类型，它几乎就是<td>标签的CSS等价物，但如果你不想要的话，你真的不需要将它包装成一个完整的display: table版面。至。这种显示类型的好处是它既可以强制自己与兄弟姐妹保持同一条线，也可以跨越其父母的整个高度。

这是一个基本的例子（不考虑边缘e.t.c）它的外观：JSFiddle

CSS使div跨度全高？

1 个答案: