Question

我想用div来模拟表的行为。

我的布局结构分为三列：

div#wrapper {
  width:800px;
  float:left;
  height:100%;
  margin-top:7px;
  text-align:center;
}
div#left {
  width:167px;
  float:left;
  padding-bottom:50px;
  margin-right:3px;
}
div#main {
  width:454px;
  float:left;
}
div#right {
  width:167px;
  float:left;
  margin-left:3px;
}

wrapper是左边三列的容器，main，right

div“main”具有可变内容，因此在某些情况下更长，在其他情况下非常短。当内容变化时，div包装器会被调整，没关系，但左右列不适应包装。

P.S没有doctype没有问题，事实上我将left，main和right的高度设置为100％但是当我插入transional.dtd时，不考虑div的高度。

如何解决这个问题？

抱歉我的英文!!

Answer 1

我同意@Neurofluxation所以让我们看看我能在Google上找到什么：

100% Height Layout Using CSS 和 CSS Faux Columns

Answer 2

您可以尝试插入：

min-height: 100%;

同样，要掩盖自己：）

Answer 3

我尝试使用

min-height:100%;

但我可以解决问题。

我在不同的论坛中阅读了xhtml固定高度不可能：100％使用div，并且解决此问题的唯一方法是使用JQuery？

Answer 4

你应该使用jQuery

<script type="text/javascript">
$(this).load(function() {
   alert(document.documentElement.clientHeight + '+' + $(window).height());
   if ($(window).height() - 250 > 300)
      $('#content').css('min-height', '224px');
   else
      $('#content').css('min-height', $(window).height() - 250);
    }
);
$(this).resize(function() {
    if ($(window).height() - 250 > 300)
       $('#content').css('min-height', '224px');
    else
       $('#content').css('min-height', $(window).height() - 250);
    }
);
</script>

<div id="content" style="min-height:350px;">

</div>

只需更改高度的数字。

高度：不考虑100％

4 个答案: