Question

我有一个3列布局，列下方有一些细节。

enter image description here

您会注意到其中一个列的高度大于其他列的高度。我希望其他两个div自动填充剩余的空间（直到蓝色div）。文本将动态加载，因此我需要使用它来处理任何更大的列（并且任意数量）。

这可以用HTML / CSS完成，还是必须使用一些JavaScript？

HTML代码（相关部分）：

<div id="content">

    <div id="iconsHolder">

        <div id="info">
            <div id="info_content">
                <p><?php echo img('images/man.png'); ?></p>
                <h2>Some guy over here</h2>
                <p class="light justify">It doesn't matter what is being said at the moment. Nothing is said here.</p>
            </div>
        </div>

        <div id="comp">
            <div id="comp_content">
                <p><?php echo img('images/computer.png'); ?></p>
                <h2>Computer Development</h2>
                <p class="light justify">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
            </div>
        </div>

        <div id="story">
            <div id="story_content">
                <p><?php echo img('images/library.png'); ?></p>
                <h2>Story telling</h2>
                <p class="light justify">This is another short story.</p>
            </div>
        </div>
    </div>
    <div id="details">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>

</div>

CSS代码（相关部分）：

#content {
    width: 60em;
    margin: 0px auto;
}

#info,#comp,#story {
    width: 18em;
    float: left;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 2em;
    background-color: #DDD;
    height: 100%;
}

#info_content,#comp_content,#story_content {
    text-align: center;
}

#details {
    clear: both;
    background-color: #EEF;
    padding: 1em;
}

Answer 1

CSS解决方案是使用背景颜色为外部容器设置样式，这称为伪造（虚假）bakcground。

像这样：

#iconsHolder {
    background-color: #DDD;
}

此方法（至少在这种情况下）保证背景对所有人都相同。

Answer 2

你可以绝对将它们放在div#iconsHolder（你将使position:relative进行放置，而不是浮动div。你无论如何都要设置宽度，只需将每个div的左边设置为适当的偏移量并给出每个top:0和bottom:0 CSS规则。

Answer 3

您所采用的方法非常混乱，并且会使用CSS控制变得更加困难。如果将其转换为表格，则会有更好的结果。

<table id="content" cellspacing="0">
<tr id="row">
<div id="iconsHolder">

    <td id="info">
        <div id="info_content">
            <p><?php echo img('images/man.png'); ?></p>
            <h2>Some guy over here</h2>
            <p class="light justify">It doesn't matter what is being said at the moment. Nothing is said here.</p>
        </div>
    </td>

    <td id="comp">
        <div id="comp_content">
            <p><?php echo img('images/computer.png'); ?></p>
            <h2>Computer Development</h2>
            <p class="light justify">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
        </div>
    </td>

    <td id="story">
        <div id="story_content">
            <p><?php echo img('images/library.png'); ?></p>
            <h2>Story telling</h2>
            <p class="light justify">This is another short story.</p>
        </div>
    </td>
</div>
</tr>
    <tr id="bottom">
<td id="details" colspan="3">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</td>
    </tr>
</table>

然后，您需要从CSS的第8行删除float:left;并在底部插入此代码。

tr#row td {
    width: 30%;
    background-color: #DDD;
    vertical-align: top;
}

Answer 4

一个相当简单的解决方案是将容器div iconholder作为背景：

#iconsHolder { background-color: #DDD; float:left;}

将它添加到您的CSS中，它应该适用于所有浏览器。

Answer 5

除了将背景颜色添加到容器之外，您还需要使容器占用子容器的空间。

您可以将float:left添加到容器中，例如Richard's answer或如果你不想让容器浮动，你可以在之后添加一个空的“clear”div。它在语义上更不正确，但如果你不能或不想让容器浮动，那么它就是另一种选择。

的jsfiddle： http://jsfiddle.net/gvJrJ/4/

Answer 6

目前，您的列已跨越文本范围。如果我正确地得到您的问题，您希望列背景颜色/图像扩展到可用数据之外。如果这是您想要的，那么您必须创建假列（Faux Columns），因为这些列中的数据不会跨越整个高度。

我认为最简单的方法是将重复的背景图像应用于跨越整个高度的元素。这可能是某种封装您的列的包装器。在您的情况下，您可以应用一个薄图像，该图像分为三个色带（每个色带18em，每个色带映射以覆盖特定列），用于info，comp和story div。该图像的宽度为60em，并在y轴上重复，例如：

#content 
{
background: #ccc url(fake-columns.gif) repeat-y left top;
}

这假设图像与css文件位于同一文件夹中（不推荐，images / fake-columns.gif更好，以便从图像文件夹中引用图像）。 Repeat-y将向下重复覆盖内容div覆盖的整个高度的微小图像。左上角确保图像从左上角开始平铺，这是您通常想要做的事情！内容之前的英镑符号似乎从我上面的示例css中消失了。

Answer 7

这可以用HTML / CSS完成，还是我必须使用一些JavaScript吗？

..可以使用display: table-cell使用纯CSS完成..但是没有iE7及以下支持：（

这是一个使用包含两种方法（jQuery *和CSS）的解决方案，jQuery当然会为其他浏览器做同样的事情，但这个解决方案意味着大多数用户将获得只有IE7及以下需要的纯CSS解决方案用于“增强”的jQuery

如果你想为所有浏览器使用jQuery解决方案，那么你不需要table-cell或table-row显示属性，你需要从float属性中删除!ie7 hack - 浮动内容也需要跨浏览器包含，因此您可以将overflow: hidden添加到#iconsHolder div - 如果您需要在IE6中工作，只需保留zoom: 1;;）

<强> CSS：

#content {
    width: 60em;
    margin: 0px auto;
}

#iconsHolder { 
    display: table-row; /* good browsers - IE7 and below ignore this */
    zoom: 1; /* for IE to contain the floats so the jQuery can get a height from it */
    /* overflow: hidden; would be needed here if jQuery solution is preferrred */
}

#info,#comp,#story {
    width: 18em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 2em;
    background-color: #DDD;
    display: table-cell;
    float: left !ie7; /* IE7 and below hacked value - remove the !ie7 part to expose this to all browsers */ 
}

#info_content,#comp_content,#story_content {
    text-align: center;
}

#details {
    clear: both;
    background-color: #EEF;
    padding: 1em;
}

<强> HTML：

<div id="content">
 <div id="iconsHolder">
  <div id="info">
    <div id="info_content">
     <p><img src="http://placekitten.com/100/100/" alt=""></p>
     <h2>Some guy over here</h2>
     <p class="light justify">It doesn't matter what is being said at the moment. Nothing is said here.</p>
    </div>
   </div>
   <div id="comp">
    <div id="comp_content">
     <p><img src="http://placekitten.com/100/100/" alt=""></p>
     <h2>Computer Development</h2>
     <p class="light justify">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
    </div>
   </div>
   <div id="story">
    <div id="story_content">
     <p><img src="http://placekitten.com/100/100/" alt=""></p>
     <h2>Story telling</h2>
     <p class="light justify">This is another short story.</p>
    </div>
  </div>
 </div>

  <div id="details">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>

jQuery：（在条件评论中，所以只有IE7及以下才能看到它）

<!--[if lte IE 7]>
<script type="text/javascript">
$(document).ready(function() {

    var divHeight = $("#iconsHolder").outerHeight();          
    $("#iconsHolder > div").css("height", divHeight);

});
</script>
<![endif]-->

已添加：JSfiddle

注意：小提琴没有添加jQuery，因为我不知道如何把它放在小提琴的条件评论中）

^{我很抱歉，如果你更喜欢纯粹的javascript解决方案，我不能这样做 - 但我确定这是否是你想要的人可以将纯JS添加到我的答案中！}

Answer 8

正如您所说，在#iconHolder中使用虚假背景的问题是在鼠标悬停时突出显示每列。

所以这就是我的建议：

1）使单独的人造柱绝对位于与原始列相同的位置

您将使用z-index属性确保内容位于顶部

HTML

<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>

<div id="faux1"></div>
<div id="faux2"></div>
<div id="faux3"></div>

CSS

#iconHolder {
    position: relative;
}

#col1, #col2, #col3 {
    position: relative
    z-index: 100;
}

#faux1, #faux2, #faux3 {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: #DDD /* don't add a background to your real columns, just your faux */
    z-index: 50;
}

#faux2 {
    left: 20em;
}

#faux3 {
    left: 40em;
}

2）将您的onmouseover / onclick事件附加到虚拟列和普通列

function highlight() {
     faux.style.backgroundColor = "yellow"
}

function whatever() {
    //your code here
}

column.onmousover = highlight
faux.onmouseover = highlight
column.onclick = whatever
faux.onclick = whatever

如果您需要有关javascript的更多详细信息，请问，我对jQuery等价物不会有任何想法。

是的，我意识到这有点像hackish，但它可以完成工作而无需计算高度或任何东西。希望这有帮助！

如何使div高度填充可用空间

8 个答案:

已添加：JSfiddle