1

I am having a little trouble getting my divs to stretch vertically. I've read many SO questions and answers but I haven't found a solution that seems to work for me.

At the moment I am working with two divs which should be equal width stretching to use the total available width. The height of each div should either fit to content, or stretch to the parent height, whichever is larger. I found that when I start putting content into these blocks, if one has more content than the other, then the block heights no long align.

I've tried playing around with clearfix and height=100% but I could not seem to get this working. 

Currently:
+---------+  +---------+     +---------+  +---------+
|  Text   |  | Text B  | OR  | Text A  |  |   Text  |
|    A    |  +---------+     +---------+  |    B    |
+---------+                               +---------+

Instead of: 
+---------+  +---------+     +---------+  +---------+
|  Text   |  | Text B  | OR  | Text A  |  |   Text  |
|    A    |  |         |     |         |  |    B    |
+---------+  +---------+     +---------+  +---------+

This is my html layout: 

<div class="grid-row">
    <div class="panel-quarter">
        <div class="panel-content bgnd-blue">
            <h2>First Block</h2>
            <p>What if there is just a short amount of text here.</p>
        </div>
    </div>
    <div class="panel-quarter">
        <div class="panel-content bgnd-green">
            <h2>Second Block</h2>
            <p>And what if there is a really long section of text here that could go on for quite a few lines, especially more than the previous blocks text. This would make the heights somewhat mis-aligned it would seem.</p>
        </div>
    </div>
</div>

And here are my styles:

.grid-row {
    display: block;
    height: auto;
    width: 100%;
    margin-bottom: 1em;
}

.panel-quarter {
    float: left;
    width: 50%;
}

.panel-quarter:first-of-type {
    padding-right: 1em;
}

.panel-content {
    padding: 1em;
}

.grid-row:after {
  content: "";
  display: table;
  clear: both;
}

.panel-quarter, 
.panel-quarter:after, 
.panel-quarter:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Here is a JSFiddle: http://jsfiddle.net/zg4NB/

If one of you css gurus could show me where I need to tweak (hopefully) or completely redesign (hopefully not) that would be appreciated. I'm sure someday I'll get my head completely around CSS but hopefully by then all this layout stuff will be simplified =)

4

2 に答える 2

1

あなたはjsの行でそれを達成することができます。

$('.panel-content').css('height', $('.grid-row').outerHeight());

http://jsfiddle.net/TAZhg/

于 2013-03-22T06:58:48.660 に答える
1

flexBoxレイアウトを使用していない理由よりも CSS3 を使用している場合。それはあなたの問題を簡単に解決します。

Mozilla の詳細を確認してください: CSS フレキシブル ボックスの使用

IEの場合、次のことができます：グリッドレイアウト

于 2013-03-22T06:43:45.307 に答える