div不采取父div的高度（w / bootstrap） [英] Div not taking height of parent div (w/ bootstrap)

问题描述

我首先说明我知道这个问题已经被问了很多，但我看到的答案都没有对我有用。

基本上，我有一个更大的div里面的div。他们会有动态文本，所以我不知道每行将有多少行。问题是，我似乎不能得到的divs自己的父亲的身高。我想让列div占据整个行的div（基本上，我想要蓝色的部分填充所有的栏之间的空间）。

HTML：

 < div class =container> 
< div class =row divOne> 
< div class =col-xs-3 divTwo>一些文本< / div> 
< div class =col-xs-3> 
一些可以换行到多行的文本
< / div> 
< / div> 
< div class =row divOne> 
< div class =col-xs-3 divTwo>不同的文字< / div> 
< div class =col-xs-3 divThree> 
有一些更多的文字
< / div> 
< / div> 
< / div> 
  

CSS：

  .divOne 
 {
 border-top：10px solid black; 
} 
 
 .divTwo 
 {
 background-color：＃32649b; 
 height：100％; 
 color：white; 
} 
  

jsfiddle：

现在，我从这个问题的其他版本中学到的

• float：left可能正在旋转


• height：100％如果父级的高度已定义


• position：relative可能对父级有帮助

float的问题是，我使用的是bootstrap，这是float是从哪里来的，所以我真的不想弄乱。

我不能真正定义父高度，因为它将是基于孩子的动态。

我也试过搞砸在位置：父母和绝对的孩子，但这似乎变得真的困难。我也猜到这不会工作，因为我使用bootstrap。可能我只是失去了一些东西，虽然。我承认不是最好的 CSS 。

因为我正在使用引导程序，或者因为我现在只是一个白痴。

其他似乎被扔的东西一个扳手到事情：​​这些列将在不同的布局在较小的屏幕与较大的。我实际上想要的是col-xs-12 col-md-3的代码。

解决方案

你不能真正实现这一点在引导框架的约束。有很多文章解释为什么 div 元素不能伸展到其容器的高度，以及如何解决这个问题。我最喜欢的解决方案之一是 虚假专栏 。 p>

但是，让我们多一点点创意。

我想出了一些可能适用于您的场景，但需要对您的标记进行一些更改的东西。这里有一个解决方案，用 display：table

c：。

http://jsfiddle.net/Wexcode/13Lfqmjo/

HTML：

 < div class =table-container> 
< div class =table-row divOne> 
< div class =col-xs-3 divTwo>一些文本< / div> 
< div class =col-xs-3> 
一些可以换行到多行的文本
< / div> 
< div class =col-xs-6>< / div> 
< / div> 
< / div> 
  

CSS：

  .table-container {
 margin：0 -15px; 
} 
 
 .table-row {
 display：table; 
 width：100％; 
} 
 
 .table-row [class ^ =col] {
 display：table-cell; 
 padding：0 15px; 
 float：none; 
} 
  

请注意，要使此解决方案正常工作，必须包含足够的 col 元素来拉伸所有12列（见我添加了一个空的 .col-xs-6 div）。

I'll start off by stating that I know this question has been asked a lot, but none of the answers I saw seemed to work for me.

Basically, I have some divs inside of a larger div. They'll have dynamic text, so I don't know how many lines each will be. The problem is that I can't seem to get the divs to size themselves to the parent's height. I want the column divs to take up the entire height of the row div (basically, I want that blue part to fill all the space between the bars).

HTML:

<div class="container">
    <div class="row divOne">
        <div class="col-xs-3 divTwo">Some Text</div>
        <div class="col-xs-3">
            Some text that could wrap to multiple lines
        </div>
    </div>
    <div class="row divOne">
        <div class="col-xs-3 divTwo">Different Text</div>
        <div class="col-xs-3 divThree">
            With some more text
        </div>
    </div>
</div>

CSS:

.divOne
{
    border-top:10px solid black;
}

.divTwo
{
    background-color: #32649b;
    height:100%;
    color:white;
}

jsfiddle:

Now, what I've learned from other versions of this question are that

• float:left might be screwing it up
• height:100% doesn't work if the parent's height is defined
• position:relative might help on the parent

The problem with the float is that I'm using bootstrap, and that's where the float is coming from, so I don't really want to mess with that.

I can't really define parent height, because it'll be dynamic based on the children.

I also tried messing around with position:relative on the parent and absolute on the child, but that seemed to get really screwy. I'm also guessing this won't work because I'm using bootstrap. It's possible that I'm just missing something, though. I'll admit to not being the greatest with CSS.

I don't know if I'm having these issues because I'm using bootstrap, or because I'm just being an idiot right now.

Something else that seems to be throwing a wrench into things: These columns will be laid out differently on smaller screens vs. larger ones. I actually want something along the lines of col-xs-12 col-md-3 for these.

解决方案

The short answer is that you can't really achieve this within the constraints of the bootstrap framework. There are plenty of articles that explain why div elements can't stretch to the height of their container, and how to get around this problem. One of the solutions I'm most fond of is Faux Columns.

But, let's get a little more creative then that.

I came up with something that might work for your scenario, but requires a bit of change to your markup. Here's a solution that wraps the bootstrap grid with display: table.

http://jsfiddle.net/Wexcode/13Lfqmjo/

HTML:

<div class="table-container">
    <div class="table-row divOne">
        <div class="col-xs-3 divTwo">Some Text</div>
        <div class="col-xs-3">
            Some text that could wrap to multiple lines
        </div>
        <div class="col-xs-6"></div>
    </div>
</div>

CSS:

.table-container {
    margin: 0 -15px;
}

.table-row {
    display: table;
    width: 100%;
}

.table-row [class^="col"] {
    display: table-cell;
    padding: 0 15px;
    float: none;
}

Note that for this solution to work, you must include enough col elements to stretch it all 12 columns (see that I added an empty .col-xs-6 div).

这篇关于div不采取父div的高度（w / bootstrap）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！