让div占据整个单元格的高度

编程入门行业动态更新时间:2024-10-11 03:20:52

本文介绍了让div占据整个单元格的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

如何让表格单元格内的div占据单元格的完整高度？

设置div height = 100％不会工作，除非表格单元格具有固定高度，但我不能这样做，因为单元格必须有一个液体

我想让每一行的所有div都是同一行的完整高度。

代码如下，参见的实例： www.songtricks/CellDivBug.html

<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENwww.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> < html xmlns =www.w3/1999/xhtml> < head> < style type =text / css> td { padding：0px; vertical-align：top; height：auto; } .box { margin：0px; border：solid 2px red; height：100％; } < / style> < / head> < body> < table border =1width =50％> < tr> < td width =50％> < div class =box> 这个框有很多文本。这个框有很多文字。这个框有很多文本。这个框有很多文本。这个框有很多文本。这个框有很多文本。这个框有很多文本。这个框有很多文本。这个框有很多文本。这个框有很多文本。 < / div> < / td>< td width =50％> < div class =box> 此框有一些文本。 < / div> < / td> < / tr> < / table> < / body> < / html>

经过一些更多的研究和实验后，什么可能是使用CSS的唯一解决方案。

它基本上由以下组成：

放置位置：相对于表格单元格

放置位置：absolute; top：0; left：0; right：0; bottom：0;

将内容直接放置在单元格内，与div一起，而不在div内，以强制单元格占用内容的高度

查看的演示 jsfiddle/ehLVM/

解决方案

你能用吗？

function equalHeight（group）{ var tallest = 0; group.each（function（）{ var thisHeight = $（this）.height（）; if（thisHeight> tallest）{ tallest = thisHeight; } }）; group.height（tallest）; }

资料来源： www.cssnewbie/equal-height-columns-with-jquery/

How do I get divs within table cells to occupy the full height of the cell?

Setting div height=100% won't work unless the table cell has a fixed height on it, but I can't do this because the cells must have a liquid height depending on variable content.

I am trying to get all divs in each row to be the same full height of the row.

The code is below, see live example at www.songtricks/CellDivBug.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="www.w3/1999/xhtml"> <head> <style type="text/css"> td { padding:0px; vertical-align:top; height:auto; } .box { margin:0px; border:solid 2px red; height:100%; } </style> </head> <body> <table border="1" width="50%"> <tr> <td width="50%"> <div class="box"> This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. </div> </td><td width="50%"> <div class="box"> This box has a little text. </div> </td> </tr> </table> </body> </html>

After some more research and experimentation I came up with what may be the only solution using CSS. I'm too new to answer my own question, so I'm posting it here.

It basically consists of:

Put position:relative on table cells

Put position:absolute; top:0; left:0; right:0; bottom:0; on contained divs

Put content directly within cell, alongside div, not within it, to force cells to take height of content

See demo at jsfiddle/ehLVM/

解决方案

Could you use this? It makes all of the divs with this attached to it the same height.

function equalHeight(group) { var tallest = 0; group.each(function() { var thisHeight = $(this).height(); if(thisHeight > tallest) { tallest = thisHeight; } }); group.height(tallest); }

Source: www.cssnewbie/equal-height-columns-with-jquery/

更多推荐

让div占据整个单元格的高度

本文发布于:2023-11-23 01:07:25，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1619559.html