身高：100%不考虑

发布于 2024-08-25 20:04:54 字数 590 浏览 6 评论 0原文

我想用 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;
}

包装器是三列的容器，左、主、右

div“主”具有可变内容，因此在某些情况下较长，在其他情况下非常短。当内容变化时，div包装器适应了，但左右列不适应包装器。

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

如何解决这个问题呢？

对不起我的英语！！

原文

I would want to simulate the behavior of a table with div.

I have a struct of my layout divide into three columns:

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 is the container of three columns left,main,right

div "main" have a variable content so in some case is more long and in other case is very short. When the content vary,div wrapper is adapted and it's ok but left and right columns don't adapt to wrapper.

P.S Without doctype there is no problem, infact I set the height of left, main and right to 100% but when I insert transional.dtd , the height of div is not considered.

How can resolve this problem?

Sorry for my english!!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏有森光若流苏 2024-09-01 20:04:54

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

100% 高度布局使用CSS
和
CSS 假列

回复收藏 0 原文

恍梦境° 2024-09-01 20:04:54

可以尝试插入：以掩盖自己:)

min-height: 100%;

您也

You could try to insert:

min-height: 100%;

as well, to cover yourself :)

回复收藏 0 原文

喜你已久 2024-09-01 20:04:54

我尝试使用

min-height:100%;

但可以解决问题。

我在不同的论坛上读到， xhtml 固定高度：100% 与 div 是不可能的，解决这个问题的唯一方法是使用 JQuery？

I try to use

min-height:100%;

but I can solve the problem.

I read in different forum that is not possibile with xhtml fixed height:100% with a div, and that the only one method to solve this problem is to use JQuery?

回复收藏 0 原文

亢潮 2024-09-01 20:04:54

你应该使用 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>

只是改变高度的数字。

you should use 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>

just change numeric digits of hights.

回复收藏 0 原文

~没有更多了~