0

コードは次のとおりです。

 <div id="content" class="row shadow" >

    <div id="test2" class="col-lg-4">
      <p>dsfdsfasdfdasfdsafdsfasdf</p>
    </div>

    <div id="test3" class="col-lg-4" style="">
      <p>breerwwerewrqerewrqewqrwqer</p>
   </div>

    <div id="test4" class="col-lg-4">
      <h2>Directlinks</h2>
      <p>BRRRRRRRRRRRRRRRRRRRRRRRRRRRR</p>
    </div>

 </div>

..そして私は設定したい：

border-right:1px solid #ddd;

ID #test2 および #test3 へ

問題は、コンテンツに固定されている親 div から、div が height:100% の高さを取得したくないことです。

1 つのテスト* に絶対位置を指定すると、親 div の最大高さが使用されますが、サイズ変更のために画面への自動修正を破棄せずに、すべての子 div を絶対に設定することはできません。

4

3 に答える 3

2

あなたの例に次のコードを追加しました：

@media (min-width: 1200px) {
    #content { overflow: hidden; }
    #test2, #test3, #test4 {
        margin-bottom: -1000px;
        padding-bottom: 1000px;
    }
}

はpadding-bottom: 1000px、各列の下部に 1000px のパディングを追加します。

基本的に、margin-bottom: -1000px;各列の高さを 1000px 減らすことで、このパディングを再び削除します。各列の高さは少なくとも 1000px (パディング + コンテンツ) になりました。

を#content overflow:hidden指定すると、各列の下部に追加の 1000px が表示されなくなり、列の高さがすべて同じに見えます ( を削除してみoverflow:hiddenてください)。

メディア クエリ ( @media (min-width: 1200px)) は、列を並べて表示する必要がある場合にのみ、これらの追加ルールを適用するようにします。

作業例: http://jsfiddle.net/R8gH9/3/

于 2013-10-29T14:53:16.970 に答える
0

「position:relative;」に設定するよりも または「位置: 絶対; 表示: ブロック;」

于 2013-10-29T13:49:04.873 に答える