Sabtu, 25 Juni 2016

Cara Membuat Tampilan CSS DIV Full Screen Pada HTML


Cara Membuat Tampilan CSS DIV Full Screen Pada HTML - halo sahabat yaquul dot com hehe pada kesempatan postingan pertama di bulan ramadan kali ini admin akan bahas tentang bagaimama sih cara buat tampilan div dari css biar jadi full screen, nah biasanya ketika kita sedang mendesain web khususnya menggunakan aplikasi notepad biasanya akan muncul celah yang berukuran beberapa pixel yang membatasi antara ujung layar kita dengan div mungkin yah bisa dikatakan sebagai margin, nah dan awalnya admin mengira hal tersebut mungkin hal yang default atau biasa namun anehnya ketika admin liat di web atau blog yang ada di internet koq egak ada jaraknya hmmm..?.

full screen div css
berikut ini merupakan spoiler dari halaman html admin yang konon bisa dikatakan aneh tsb.



nah gimana apa sobat mengalami hal yang sama?. jika iya maka tenang aja disini admin akan membagikan caranya jadi jangan khawatir jika tampilan div sobat tidak fullscreen okee..!. setelah admin selidiki dan menyelam di mbah google ternyata penyebabnya adalah margin dari tag body yang belum disetting ke 0 nah berikut merupakan sriptnya bisa sobat coba dan edit sesuai keinginan sobat.


<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
     html, body {
      height: 100%;
      margin: 0;
     }

     #wrapper {
      height: 100px; 
   background: blue;
     }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
     #container {
      height: 100%;
     }
    </style>
    <![endif]-->
</head>

<body>
    <div id="wrapper">content</div>
</body>
<html>
Dan setelah admin coba terapkan kode diatas alhamdulillah marginnya langsung ilang hehehe tokcerr jugaa yee.. nah jika sobat telah menerapkan kode diatas ke html sobat dan juga masalahnya telah teratasi maka dengan ini asmin eh admin ucapkan selamat yahh dan jangan lupa teruslah berkarya dalam webdesignnya.

sekian yaquul.com

Artikel Terkait

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email