如何使填充高度[英]How to make fill height 本文翻译自  CodeMonkey  查看原文  2010-08-22  83128    css/ html/

This question's answer needs an update, since browsers have changed

这个问题的答案需要更新，因为浏览器已经改变了。

---

Original question

最初的问题

I've looked through several posts on *, but haven't been able to find an answer to this rather simple question.

我查阅了一些关于*的帖子，但是还没有找到这个相当简单的问题的答案。

I have an HTML construct like this:

我有一个像这样的HTML结构:

<table>
  <tr>
    <td class="thatSetsABackground">
      <div class="thatSetsABackgroundWithAnIcon">
        <dl>
          <dt>yada
          </dt>
          <dd>yada
          </dd>
        </dl>
      <div>
    </td>
    <td class="thatSetsABackground">
      <div class="thatSetsABackgroundWithAnIcon">
        <dl>
          <dt>yada
          </dt>
          <dd>yada
          </dd>
        </dl>
      <div>
    </td>
  </tr>
</table>

What I need is for the div to fill the height of the td, so I can be able to position the div's background (the icon) at the bottom-right corner of the td.

我需要的是div填充td的高度，这样我就可以在td的右下角定位div的背景(图标)。

How do you suggest I go about that?

你认为我该怎么做?

7 个解决方案

#1

If you give your TD a height of 1px, then the child div would have a heighted parent to calculate it's % from. Because your contents would be larger then 1px, the td would automatically grow, as would the div. Kinda a garbage hack, but I bet it would work.

如果您给您的TD的高度为1px，那么子div将有一个加高的父div，以计算它的% from。因为你的内容会更大，然后1px, td就会自动增长，就像这个div一样。有点像垃圾黑客，但我打赌它会起作用。

#2

CSS height: 100% only works if the element's parent has an explicitly defined height. For example, this would work as expected:

CSS高度:只有在元素的父元素具有显式定义的高度时，才100%有效。例如，这将如预期的那样工作:

td {
    height: 200px;
}

td div {
    /* div will now take up full 200px of parent's height */
    height: 100%;
}

Since it seems like your <td> is going to be variable height, what if you added the bottom right icon with an absolutely positioned image like so:

因为你的看起来是可变高度的，如果你在右下角添加了一个绝对定位的图像，比如:

.thatSetsABackgroundWithAnIcon {
    /* Makes the <div> a coordinate map for the icon */
    position: relative;

    /* Takes the full height of its parent <td>.  For this to work, the <td>
       must have an explicit height set. */
    height: 100%;
}

.thatSetsABackgroundWithAnIcon .theIcon {        
    position: absolute;
    bottom: 0;
    right: 0;
}

With the table cell markup like so:

表单元格标记如下:

<td class="thatSetsABackground">  
  <div class="thatSetsABackgroundWithAnIcon">    
    <dl>
      <dt>yada
      </dt>
      <dd>yada
      </dd>
    </dl>
    <img class="theIcon" src="foo-icon.png" alt="foo!"/>
  </div>
</td>

Edit: using jQuery to set div's height

编辑:使用jQuery设置div的高度。

If you keep the <div> as a child of the <td>, this snippet of jQuery will properly set its height:

如果您将

保留为的子元素，那么jQuery的这段代码将正确设置其高度:

// Loop through all the div.thatSetsABackgroundWithAnIcon on your page
$('div.thatSetsABackgroundWithAnIcon').each(function(){
    var $div = $(this);

    // Set the div's height to its parent td's height
    $div.height($div.closest('td').height());
});

#3

You could try making your div float:

你可以试着让你的div浮动:

.thatSetsABackgroundWithAnIcon{

    float:left;
}

Alternativelly, use inline-block:

使用inline-block Alternativelly:

.thatSetsABackgroundWithAnIcon{

    display:inline-block;
}

Working example of the inline-block method:

内块方法的工作示例:

table,
th,
td {
  border: 1px solid black;
}

<table>
  <tr>
    <td>
      <div style="border:1px solid red; height:100%; display:inline-block;">
        I want cell to be the full height
      </div>
    </td>
    <td>
      This cell
      <br/>is higher
      <br/>than the
      <br/>first one
    </td>
  </tr>
</table>

#4

This questions is already answered here. Just put height: 100% in both the div and the container td.

这里已经回答了这个问题。在div和container td中都写上高度:100%。

#5

Really have to do this with JS. Here's a solution. I didn't use your class names, but I called the div within the td class name of "full-height" :-) Used jQuery, obviously. Note this was called from jQuery(document).ready(function(){ setFullHeights();}); Also note if you have images, you are going to have to iterate through them first with something like:

这和JS有关。这里有一个解决方案。我没有使用您的类名，但是我在td类名“full-height”中调用了div:-)显然使用了jQuery。注意，这是从jQuery(document).ready(function(){setFullHeights();})调用的;还要注意的是，如果你有图像，你要先用一些东西来迭代它们:

function loadedFullHeights(){
var imgCount = jQuery(".full-height").find("img").length;
if(imgCount===0){
    return setFullHeights();
}
var loaded = 0;
jQuery(".full-height").find("img").load(function(){
    loaded++;
    if(loaded ===imgCount){
        setFullHeights()
    }
});

}

}

And you would want to call the loadedFullHeights() from docReady instead. This is actually what I ended up using just in case. Got to think ahead you know!

您可能想要调用docReady的loadedFullHeights()。这是我最后用的例子。你要提前考虑!

function setFullHeights(){
var par;
var height;
var $ = jQuery;
var heights=[];
var i = 0;
$(".full-height").each(function(){
    par =$(this).parent();
    height = $(par).height();
    var tPad = Number($(par).css('padding-top').replace('px',''));
    var bPad = Number($(par).css('padding-bottom').replace('px',''));
    height -= tPad+bPad;
    heights[i]=height;
    i++;
});
for(ii in heights){
    $(".full-height").eq(ii).css('height', heights[ii]+'px');
}

}

}

#6

my answer may not be what you want but i think it's what you need you should use this structure :

我的回答可能不是你想要的，但我认为这是你需要的你应该使用这个结构:

<table>
    <tr>
        <td class="table-class thatSetsABackground">
            <table border="0" cellpadding="0" cellspacing="0" class="table-class">
            <tr>
                <td class="act-like-your-first-div">
                    //any thing you want
                </td>
                <td class="act-like-your-another-div">
                    //any thing you want
                </td>
            </tr>
            <table>
        </td>  
    </tr>
</table>

and style like

和风格

.table-class {
    width: 100%; 
    height: 100%;
    text-align: center;    
}

so you can use this solution in any problem like this!!!

所以你可以在任何像这样的问题中使用这个解决方案!!

#7

Modify the background image of the <td> itself.

修改本身的背景图像。

Or apply some css to the div:

或者应用一些css到div:

.thatSetsABackgroundWithAnIcon{
    height:100%;
}