Posted in html, css & javascript, teknis

Minimum Height di CSS

Setelah lama berkutat dengan transparansi, slicing design kali ini malah menghindari transparansi, yang berarti image nya harus dalam format standard: jpeg atau gif, dan tanpa css transparency sama sekali.

Saya mencoba pakai png dengan transparansi 50%, tapi tetap saya ada kendala dengan browser dengan berbagai macam standard dalam menangani png. Jadi saya memakai cara lain, yaitu dengan mengeset tinggi minimum untuk satu div supaya background image nya tidak terpotong.

Ternyata hanya dibutuhkan 3 baris css !! Dan.. bekerja di semua browser: Firefox 2, Firefox 3, IE6, IE7, IE8, Safari, Chrome, Opera. Sip !! Ini dia yang saya butuhkan. 😀

Saya menemukan solusinya disini.

First things first. Use the “min-height” in your css like this:

.myDiver{
min-height:100px;
}

NEXT! Set the regular height to “auto” using the “!important” tag.

.myDiver{
min-height:100px;
height:auto !important;
}

LAST! Set the regular height (again) but to the minimum height. 😉

.myDiver{
min-height:100px;
height:auto !important;
height:100px;
}

This will keep the div at 100px; and if the content inside of it extends beyond 100px, it will grow. This is true in ALL BROWSERS! Check out this example below:

sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd

sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd

Hebat yaaaa !! Menyelesaikan masalah saya dalam sekejap! Hanya dengan 3 baris code css !! 😀

4 thoughts on “Minimum Height di CSS

  1. mba herli..ngerti ttg html g?
    kmrn aq mo gnt template..kan aq copy paste..blg nya malah gini..
    “Please correct the error below, and submit your template again.
    The new widget id “Recent-Posts-Widget1″ is invalid for type: Feed”
    trus aq coba ja apus Recent-Posts-Widget1 dr dpn ampe blakang..te2p g bs..knp y?
    aq pake blogger.

  2. eh..nyantai ja..hehehhehe! kmrn aq otak atik sana sini..finally bs jg..hiks2! ternyata hrs di ganti type nya mslhe g di mengerti ma mbah blogger..hehehehe!
    aq malah bingung klo pake wp..susah nyerep ilmu baru. ^_^

Leave a Reply

Your email address will not be published. Required fields are marked *