web-dev-qa-db-ja.com

絶対/固定子を持つ親コンテナの自動高さ

私は、2つの子要素を含むdivに自動高さを設定しようとしています。これらの要素は固定され、絶対に再配置されます。

親コンテナに自動高さを持たせたいのですが、子要素がページ構造からその位置とともに取り出されるため、これは難しいことを知っています。

動作する親divに高さを設定しようとしましたが、レイアウトがレスポンシブであるため、モバイルに縮小すると高さが同じになり、コンテンツがスタックされるため、子とともに高さを増やす必要があります。

これが理にかなっているかどうかはわかりませんが、私は実際のコードをATMに持っていませんが、説明しようとしてフィドルを作りました...

http://jsfiddle.net/dPCky/

htmlcssmobilecss3responsive-design
31
Liam

親divは、その子が絶対/固定に配置されている場合、height:autoを使用できません。

これを実現するにはJavaScriptを使用する必要があります。

JQueryの例：

var biggestHeight = 0;
// Loop through elements children to find & set the biggest height
$(".container *").each(function(){
 // If this elements height is bigger than the biggestHeight
 if ($(this).height() > biggestHeight ) {
   // Set the biggestHeight to this Height
   biggestHeight = $(this).height();
 }
});

// Set the container height
$(".container").height(biggestHeight);

作業例 http://jsfiddle.net/blowsie/dPCky/1/

35
Blowsie

http://jsfiddle.net/dPCky/32/ -float:left;を使用した同様の効果

http://jsfiddle.net/dPCky/40/ -希望する効果にさらに近い結果。

Htmlを変更する場合は、上記の操作を実行できます。

Html/cssでポジショニングのプロになりたい人に強くお勧めする以下のチュートリアルからポジショニングを学びました。

http://www.barelyfitz.com/screencast/html-training/css/positioning/

Htmlを調整したい場合、cssまたはhtmlレベルの修正を潜在的に持つ可能性のある何かをするとき、可能な限りjavascriptを使用することは一般的に避けます。

7
Anicho

JavaScriptを使用したくない場合は、この回答を参照できます https://stackoverflow.com/a/33788333/1272106 。

簡単な説明：1つの要素を複製し、非表示に設定して親を展開します。

2
Ricky Jiao

パーティーに少し遅れましたが、これは私が最近JSを使わずに問題を解決した方法ですので、これは誰かを助けるかもしれません-子供がモバイルデバイスのために縮小するときにアスペクト比を維持する場合私の例は、コンテキストに応じてjQuery.cycleスライドショーをレスポンシブにすることに関するものです。これが上記で達成しようとしているものかどうかはわかりませんが、モバイルではページ幅が100％で、大きな画面では明示的なサイズのコンテナ内に絶対的に配置された子が含まれます。

ビューポートの幅の単位（vw）を使用するように親の高さを設定できるため、高さはデバイスの幅に合わせて調整されます。最近のサポートは十分に広く、ほとんどのモバイルデバイスがこれらのユニットを正しく使用するため、バグや部分的なサポートはvw（IEのvminおよびvmax）とは関係ありません。 Opera Miniは暗闇の中です。

この例のレスポンシブポイント間で子供が何をしているのかを知らずに（jsfiddleには明示的な高さが設定されています）、子供の高さがデバイスの幅に対して予測どおりに縮小すると仮定します。これにより、アスペクトに基づいて高さをかなり正確に推定できます比率。

.container{ height: 75vw; }

http://caniuse.com/#feat=viewport-units

幅の尺度として100vwを使用する場合は、caniuseの既知の問題＃7に注意してください。ただし、ここでは高さで遊んでいます！

2
Shale

これをお楽しみください自動高さ任意のデバイスとビューポートのサイズ変更または回転に適応するコンテナ用。

float、inline-block、absolute、margins、およびpaddingを子に設定してテストされています。

<div class="autoheight" style="background: blue">
    <div style="position: absolute; width: 33.3%; background: red">
    Only
        <div style="background: green">
        First level elements are measured as expected
        </div>
    </div>
    <div style="float:left; width: 33.3%; background: red">
    One Two Three Four Five Six Seven Eight Night Ten
    </div>
    <div style="float:left; width: 33.3%; background: red">
    One Two Three Four Five Six
    </div>
</div>

<script>
function processAutoheight()
{
    var maxHeight = 0;

    // This will check first level children ONLY as intended.
    $(".autoheight > *").each(function(){

        height = $(this).outerHeight(true); // outerHeight will add padding and margin to height total
        if (height > maxHeight ) {
            maxHeight = height;
        }
    });

    $(".autoheight").height(maxHeight);
}

// Recalculate under any condition that the viewport dimension has changed
$(document).ready(function() {

    $(window).resize(function() { processAutoheight(); });

    // BOTH were required to work on any device "document" and "window".
    // I don't know if newer jQuery versions fixed this issue for any device.
    $(document).resize(function() { processAutoheight(); });

    // First processing when document is ready
    processAutoheight();
});
</script>
1
Heroselohim

正しい方法...シンプル。 Javascriptはありません。

<div class="container">
    <div class="faq-cards">    
      <div class="faq-cards__card">Im A Card</div>
      <div class="faq-cards__card">Im A Card</div> 
      <div class="faq-cards__card">Im A Card</div> 
      <div class="faq-cards__card">Im A Card</div> 
      <div class="faq-cards__card">Im A Card</div> 
      <div class="faq-cards__card">Im A Card</div> 
      <div class="faq-cards__card">Im A Card</div>
    </div>
</div>

.container { 
 height:auto;
 width: 1280px;
 margin:auto;
 background: #CCC;
}
.faq-cards { 
 display:flex;
 flex-wrap:wrap;
 justify-content: center;
 position:relative;
 bottom:40px;
 height:auto;
}
.faq-cards__card {
  margin:10px;
  position:relative;
  width:225px;
  background: beige;
  height: 100px;
  padding:10px;
  text-align: center;
}

https://codepen.io/GerdSuhr/pen/jgqOJp

1
Foobar

@Blowsieの回答に関連：

/**
 * Sets the height of a container to its maximum height of its children. This
 * method is required in case
 * 
 * @param selector jQuery selector
 */
function setHeightByChildrenHeight(selector)
{
    $(selector).each(function()
    {
        var height = 0;

        $(this).children("*").each(function()
        {
            height = Math.max(height, $(this).height());
        });

        $(this).height(height);
    });
};
0
djmj