Içerdiği divs yüksekliği ile bir Container div ölçekleme

4 Cevap php

Ben kabın içindeki div uzun aldığında konteyner divs yüksekliğini ölçekli bir konteyner div bulunan bir div almaya çalışıyorum. Kabın içindeki div yüksekliği, kabın kendisinden daha uzun zaman alır, kabın alt kısmı taşır. Ben konteyner içerdiği div ile ölçeklendirme istiyorum. Ben bu CSS nasıl yapabilirim?

4 Cevap

Graham. Ne tanımlayan bir DIV, ya da bu konuda herhangi bir blok elemanın varsayılan davranıştır. örneğin Aşağıdaki HTML için:

<style type="text/css">
    dl { margin: 0; padding: 0;}

    #container {
        background-color: blue;
        padding: 5px 5px 5px 5px;
    }   

    #inner {
        background-color: red;
    }   
</style>
<div id="container">
    <div id="inner">
        <dl>
            <dt>Stuff</dt>
            <dd>Blah blah blah</dd>
            <dt>Foobar</dt>
            <dd>Bazquux</dd>
        </dl>
    </div>
</div>

Aşağıdaki render HTML alırsınız:

Basic Div

Eğer floated iç div varken kapsayıcı div iç div içeren genişletmek değil zaman tarif durum oluşur. Yüzer, tanımı gereği, bu elementi içeren oluyor kısıtlamaları dışında bir blok elemanı kırar. "Float: left;" uygulanması sizin # iç eleman için aşağıdaki verir:

alt text

Çözelti yüzen eleman temizler içeren div altındaki bir blok düzeyi öğesi eklemektir. Bu içeren div bu yeni blok seviyesi elemanı etrafında sarmak neden olur ve böylece süzülüyor elemanlarının yanı.

örneğin

<style type="text/css">
    dl { margin: 0; padding: 0;}

    #container {
        background-color: blue;
        padding: 5px 5px 5px 5px;
    }   

    #inner {
        background-color: red;
        float: left;
    }   
</style>
<div id="container">
    <div id="inner">
        <dl>
            <dt>Stuff</dt>
            <dd>Blah blah blah</dd>
            <dt>Foobar</dt>
            <dd>Bazquux</dd>
        </dl>
    </div>
    <div style="clear: both;"></div>
</div>

Bu ilk görüntü aynı çıktı verecektir.

Açıkçası, bu yüzen bir sürü yaparsanız konteyner divs altına eklemek için sıkıcı bir şey olabilir.

CSS2 kullanarak basit bir sınıf tanımı (ve tabii IE için bir hack) ile yapabilirsiniz:

<style type="text/css">
    dl { margin: 0; padding: 0;}

    #container {
        background-color: blue;
        padding: 5px 5px 5px 5px;
    }

    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    * html .clearfix {height: 1%;}

    #inner {
        background-color: red;
        float: left;
    }
</style>
<div id="container" class="clearfix">
    <div id="inner">
        <dl>
            <dt>Stuff</dt>
            <dd>Blah blah blah</dd>
            <dt>Foobar</dt>
            <dd>Bazquux</dd>
        </dl>
    </div>
</div>

Basitçe süzülüyor unsurları içeren kapsayıcı divlere herhangi clearfix sınıf ekleyin. "* Html" IE tarafından gerekli kesmek olduğunu unutmayın.

Sadece gibi yüzde height özelliğini vermek gerekir:

percent { display:block:height:100%; } as your div stands in html:

<div class="percent"></div>

Basitçe eklemek

overflow: auto;

dış div.

Eğer sadece basit genişletilmesi gibi "ölçek" demek, belki ben 500px, diyelim ki, bir yüksekliğe sahip konteyner div olarak açıklamasını okumak ve onlar da büyük büyümek durumunda bulunan divs daha bu dışarı itecektir. Bu durumda, belki de yerine min-height kullanabilir?

min-height: 500px;

Eğer konteyner div olarak "ölçek" demek durumunda 500x500px olduğunu, içerdiği (büyütme / yakınlaştırma akin) 1000x1000px için kapsayıcı div iter daha fazla içerik ile 400px genişler 200px bir başlangıç ​​yüksekliğini alır, o olabilir daha karmaşık.

etiketler