代码之家 › 专栏 › 技术社区 › Kerry Jones

HTML/CSS-内部DIV 100%高度跨多列?

xhtml css html

Kerry Jones · 技术社区 · 16 年前

我看过很多其他的问题,但我觉得我的问题有点不同,如果我错了,我会很高兴看到链接并结束这个问题。

你可以在这里看到我的问题: http://www.phoenixdev.net/test.html

第一小节的右边界并不是一直向下延伸——我需要它,否则它看起来会很奇怪。

我可以在jquery中这样做,但我现在正在寻找一个纯HTML/CSS解决方案。

这有可能吗?如果是这样,怎么办?

编辑

因为需要背景图像,所以人造列无法工作。列数可以更改1-5,因此边框必须反映这一点。很容易在CSS中完成,但不能在背景图像中完成。

4 回复 | 直到 16 年前

matpol 16 年前

这实际上是一个古老的问题,也许不是这样,但在CSS中通常是这样。有几种方法可以做到。一种方法是使用背景图像-这将很难,因为你有一个流动的布局-如果你修正了列宽你有一个问题,这将工作,或者你可以发送图像的位置使用百分比,在这种情况下33%。

第二,你可以将一个DIV环绕在其他列上,这样较短的列就可以占据其他两列的高度——这非常复杂。

三-别担心它的特点。这方面的问题是,如果您突然为一列排序,“客户机”决定他们希望在其他列中的一列中包含较少的内容,那么您也会遇到问题。

kschaper 16 年前

另一个选项是显示:table

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>equal heights</title>
  <style type="text/css">
  #container
  {
    border:1px solid #000;
    display:table;
  }
  #container div
  {
    display:table-cell;
    width:200px;
    border:1px solid red;
  }
  </style>
<body>

<div id="container">
  <div>eins</div>
  <div>zwei<br />zwei<br />zwei<br /></div>
  <div>drei</div>
</div>

</body>
</html>

不幸的是,有些浏览器不支持它,请参见 http://reference.sitepoint.com/css/display 或 http://www.sitepoint.com/books/csswrong1/