Membuat Auto Height 100% dengan CSS

Update Terakhir pada

viewport-height

Baik teman-teman WebHozz, kali ini kita akan coba membuat layout pada web dengan memberikan efek height otomatis mengikuti isi dari banyaknya isiian konten. Nah ayo kita coba ikuti di tutorial Blog WebHozz ini ya,..

Yang pertama kita coba buat tag HTML seperti dibawah ini

<body>
    <div class="header">
        <h1 align="center">Header</h1>
    </div><!--end of header-->
    <div class="content">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div><!--end of content-->
    <div class="footer">
        <p align="center">Copyright &copy; 2015</p>
    </div><!--end of footer-->
</body>

Untuk listing CSS auto height, bisa diisikan seperti dibawah ini teman-teman :

*{
    padding: 0px;
    margin: 0px;
 }

html, body{
    height: 100%;
}

.header{
    height: 20%;
    background-color: #009900;
}

.content{
    height: 70%;
    background-color: #ff0002;
    overflow-y: scroll;
}

.footer{
    height: 10%;
    background-color: aqua;
}

Disana bisa kita lihat untuk HTML atau BODY kita berikan nilai Height :100%, baru setelah itu kita tentukan tag-tag HTML lainnya seperti saya disini memberikan nilai untuk div class Header :20%, Content: 70%, dan Footer: 10%. Kuncinya jangan lupa teman-teman, tentukan nilai Height untuk HTML atau BODY.
Dan biasanya hal ini berguna ketika kita ingin menyesuaikan tinggi di website kita dengan ukuran monitor.

autoheight

Berikut saya sertakan source codenya, selamat mencoba teman-teman.

DEMO