Div 100％高度，带显示内联 [英] Div 100% height with display inline

问题描述

我需要有两列 div 。

右栏会有随机内容可以具有1行或100行。

左栏我想跟随右栏的高度，而不使用javascript。

：

 < div> 
< div style =display：inline-block; width：30％; vertical-align：top; height：100％; background：＃FF0000;> 
< / div> 
< div style =display：inline-block; width：30％; vertical-align：top;> 
< div> CONTENT< / div> 
< div> CONTENT< / div> 
< div> CONTENT< / div> 
< div> CONTENT< / div> 
< div> CONTENT< / div> 
< div> CONTENT< / div> 
< div> CONTENT< / div> 
< div> CONTENT< / div> 
< div> CONTENT< / div> 
< div> CONTENT< / div> 
< div> CONTENT< / div> 
< div> CONTENT< / div> 
< div> CONTENT< / div> 
< div> CONTENT< / div> 
< div> CONTENT< / div> 
< div> CONTENT< / div> 
< div> CONTENT< / div> 
< div> CONTENT< / div> 
< div> CONTENT< / div> 
< div> CONTENT< / div> 
< div> CONTENT< / div> 
< div> CONTENT< / div> 
< / div> 
< / div> 
  

问题是左列总是高度为0px，应该显示红色列

编辑

>

Rick Hitchcock的回答真的很棒，但是不能用于Firefox。任何其他建议？

解决方案

使用 display：table p>

  .wrapper {display：table; width：60％;}。left {display：table-cell;宽度：30％; vertical-align：top; background：＃F00;}。right {display：table-cell;宽度：30％; vertical-align：top; background：＃0F0;}  

 < div class = wrapper> < div class =left> LEFT< / div> < div class =right> < div> CONTENT< / div> < div> CONTENT< / div> < div> CONTENT< / div> < div> CONTENT< / div> < div> CONTENT< / div> < div> CONTENT< / div> < div> CONTENT< / div> < div> CONTENT< / div> < div> CONTENT< / div> < / div>< / div>  

p>

如果你真的需要inline-blocks，这里我把它们添加到table-cell中，你可以按照你想要的样式。

  .wrapper {display：table; width：60％;}。left {display：table-cell;宽度：30％; vertical-align：top; background：＃F00;}。right {display：table-cell;宽度：30％; vertical-align：top; background：＃0F0;}。inner {display：inline-block; width：100％;高度：100％; background-color：＃0ff} .right .inner {background：＃FF0;}  

 < div class =wrapper> < div class =left> < div class =inner> LEFT< / div> < / div> < div class =right> < div class =inner> < div> CONTENT< / div> < div> CONTENT< / div> < div> CONTENT< / div> < div> CONTENT< / div> < div> CONTENT< / div> < div> CONTENT< / div> < div> CONTENT< / div> < div> CONTENT< / div> < div> CONTENT< / div> < / div> < / div>< / div>  

I need to have 2 columns of divs.

The right column will have a random content which may have 1 line or 100 lines.

The left column I want to follow the height of the right column without javascript.

I am trying this:

<div>
   <div style="display:inline-block; width:30%; vertical-align:top; height:100%; background:#FF0000;">
   </div>
   <div style="display:inline-block; width:30%; vertical-align:top;">
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
   </div>
</div>

The problem is that the left column is always with height 0px, it should show a red column with the same size as the right column.

So how do I do that using div?

EDIT

Rick Hitchcock's answer is really great but does not work with Firefox. Any other suggestion?

解决方案

Use display: table instead.

.wrapper {
  display: table;
  width: 60%;
}
.left {
  display: table-cell;
  width:30%;
  vertical-align:top;
  background:#F00;
}
.right {
  display: table-cell;
  width:30%;
  vertical-align:top;
  background:#0F0;
}

<div class="wrapper">
    <div class="left">
      LEFT
    </div>
    <div class="right">
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
    </div>
</div>

Update

And if your really need inline-blocks, here I added them inside the table-cell and you can style how you want.

.wrapper {
  display: table;
  width: 60%;
}
.left {
  display: table-cell;
  width:30%;
  vertical-align:top;
  background:#F00;
}
.right {
  display: table-cell;
  width:30%;
  vertical-align:top;
  background:#0F0;
}
.inner {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: #0ff
}
.right .inner {
  background:#FF0;
}

<div class="wrapper">
    <div class="left">
      <div class="inner">
        LEFT
      </div>
    </div>
    <div class="right">
      <div class="inner">
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
      </div>
    </div>
</div>

这篇关于Div 100％高度，带显示内联的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！