CSS - Mengatur Tinggi dan Lebar Dengan CSS Overflow, Height dan Width

Salah satu yang kadang mengacaukan tampilan laman anda adalah karena kacaunya tinggi dan lebar suatu elemen. Yup, kadang tampilan tidak nampak rapi atau mengganggu peletakkan elemen HTML lainnya, seperti ketika laman web sudah terload dan boom ternyata kotak anda sendiri yang tidak lagi cukup besar untuk menampung semua teks yang ingin Anda tunjukkan. Jadi, apa yang bisa Anda lakukan ketika konten tidak lagi muat di dalam kotak yang Anda buat dengan tinggi dan lebar yang keliru. Nah, Anda bisa menggunakan property CSS overflow yang berguna dalam menyembunyikan, menampakkan, atau membuat scroll dalam objek teks ataupun gambar, sehingga orang-orang yang membuka laman anda akan dapat mengakses konten itu, atau bahkan jika mereka akan dapat mengaksesnya sama sekali.

Dalam CSS value untuk overflow bisa digunakan sebagai:

  • visible untuk menampilkan konten yang melebihi ukuran parentnya, ini adalah default content anda dalam box
  • hidden untuk menyembunyikan konten yang melebihi ukuran parentnnya
  • scroll untuk memberikan scrollbar pada konten yang melebihi ukuran parentnya baik secara vertical ataupun horizontal dan
  • auto yang memberikan scrollbar pada konten yang melebihi ukuran parentnya, scroll yang ada secara vertical saja

Jadi meskipun ada banyak sekali teks di dalamnya, teks sebenarnya ke luar kotak atau menyebabkan kontennya terlihat bahkan jika itu di luar garis.

Lebih jelasnya, penggunaanya seperti ini. Ketika anda membuat sebuah objek box, dengan menggunakan tag

, anda telah membuat aturan kode ukuran objek tersebut, ternyata isi didalam objek melebihi dari yang telah dideklarasikan maka cara mengatasinya dengan menggunakan overflow tadi, bisa dengan menghilangkan bagian yang lebih tersebut, atau juga dapat menggunakan Scroll Bar.

Seperti ketika menggunakan value hidden, anda memiliki elemen dalam kotak ini dan itu terlalu besar, gunakkan value hidden. Anda tidak bisa melihatnya, tapi value ini sebenarnya masih bukan ide bagus, karena akan menimbulkan masalah jika pengguna meningkatkan font ukuran di browser mereka.

<html>
<head>
	<title></title>
<style type="text/css">

	#hidden{
    width: 350px;
    height: 100px;
    background-color: yellow;
    overflow: hidden;
	}

	</style>
</head>
<body>
<div id="hidden">paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	paragraf ini dibuat dengan value hidden	ini adalah

</div>
</body>
</html>

Hasilnya:

tinggi1

Jadi, jika Anda sudah membuat semacam 350 x 100 piksel kotak, dan Anda berpikir, oh ini akan bagus, tidak masalah. Siapa pun akan dapat membaca ini. Apa yang akan terjadi jika seseorang masuk dan meningkatkan ukuran font? Kotak Anda tidak menjadi lebih besar, tetapi teksnya tidak, sehingga mereka mungkin tidak dapat melihat konten. Jadi opsi yang lain bisa anda gunakan value overflow scroll.

<html>
<head>
	<title></title>
<style type="text/css">

	#scroll{
    width: 350px;
    height: 100px;
    background-color: yellow;
    overflow: scroll;
	}

	</style>
</head>
<body>
	<div id="scroll">paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	paragraf ini dibuat dengan value scroll	ini adalah

</div>
</body>
</html>
Hasilnya:

tinggi2

Dan hasil dari overfolow scroll memberikan anda scrollbar horizontal dan vertikal ke elemen. Bahkan jika itu hanya sebuah paragraf, semuanya tiba-tiba paragraf Anda memiliki scrollbar sehingga orang dapat melihat semua yang ada di dalamnya. Value terakhir bisa anda gunakan adalah auto. Dan apa yang akan terjadi pada laman anda, oh, saya hanya akan menambahkan scrollbar jika iperlukan. Tergantung bagaimana orangnya melihat situs sekarang. Overflow auto berfungsi saat text yang melebihi parentnya tetap ditampilkan dengan menggunakan menggunakan scrollbar secara vertikal.

<html>
<head>
	<title></title>
<style type="text/css">

	#auto{
    width: 350px;
    height: 100px;
    background-color: yellow;
    overflow: auto;
	}

	</style>
</head>
<body>
	<div id="auto">paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	paragraf ini dibuat dengan value auto	ini adalah

</div>
</body>
</html>

Hasilnya:

tinggi3

Ada begitu banyak ide ketika anda menghadapi problem seperti ini, namun kita akan pelajari secara perlahan yap, Karena apa yang ingin saya share dengan Anda adalah ide ini dari nilai tampilan lainnya. Ingat bahwa teknologi browser juga selalu berubah. HTML5 dan versi masa depan selalu berubah dan mereka mencoba menambahkan dukungan baru. Masalahnya adalah ketika Anda melihat tools baru ini mereka tidak selalu bekerja di setiap browser. Jadi CSS sebelumnya seperti inline, inline-block, block dan none akan berfungsi di mana-mana. Namun ada juga fungsi table, grid, dan flexbox yang harus anda ketahui.

Seperti halnya mengatur tinggi dan lebar sebuah elemen, dapat diatur untuk auto yang secara default, browser akan menghitung tinggi dan lebar, atau akan ditentukan dalam nilai-nilai panjang, seperti px, cm , dll, atau dalam persen (%) dari blok yang mengandung div. Jadi saya punya beberapa kode di sini yang pada dasarnya hanya div, beberapa div dengan beberapa paragraf di dalamnya. Dan yang ingin saya lakukan adalah yang saya inginkan untuk memastikan bahwa mereka tidak memiliki semua konten yang sama persis. Seperti yang Anda lihat, masing-masing div sekarang bersebelahan satu sama lain karena kami sudah memberi tahu kami tidak menginginkannya di bawah satu sama lain.

<html>
<head>
	<title></title>
<style type="text/css">

	#div1{
   width: 260px;
    height: 260px;
    border: 3px solid #73AD21;
	}

	</style>a
</head>
<body>
	<div id="div1"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQez9qTMxQpskwWAgF6WMQMB-QTbyH_BGeIr4CbQFlOPrtKhEu_5g">
	Gambar percobaan yang bisa anda tiru
</div>

</div></body>

Hasilnya:

tinggi4

Tapi ketika ini sebenarnya bukan hasil yang anda harapkan, maka anda bisa menggunakan float, save, refresh, apakah terlihat sedikit lebih baik. Harus anda ingat bahwa Properti height dan width tidak mengandung padding, border, atau margin tapi hanya mengatur value “high” dan “width” area di dalam padding, border, dan margin pada suatu elemen.

Anda juga bisa menggunakan Properti max-height untuk mengatur panjang maksimum dari suatu elemen. Sedangkan properti min-height digunakan untuk mengatur panjang minimum dari suatu elemen.

<html>
<head>
	<title></title>
<style type="text/css">

div {
    max-height: 600px;
    min-height: 400px;
    background-color: yellow;
}

	</style>
</head>
<body>

<p>Ubah ukuran jendela browser untuk melihat efeknya</p>

<div>Silahkan buka diberbagai browser...Silahkan buka diberbagai browser...Silahkan buka diberbagai browser...Silahkan buka diberbagai browser...Silahkan buka diberbagai browser...Silahkan buka diberbagai browser...Silahkan buka diberbagai browser...Silahkan buka diberbagai browser...Silahkan buka diberbagai browser</div>


</div></body>
</html>
Hasilnya:

tinggi5

Begitupun dengan Properti max-width digunakan untuk mengatur lebar maksimum dari suatu elemen dan min-width digunakan untuk mengatur lebar minimum dari suatu elemen.


<html>
<head>
	<title></title>
<style type="text/css">

div {
    max-width: 300px;
    min-width: 200px;
    background-color: yellow;
}

	</style>
</head>
<body>

<p>Ubah ukuran jendela browser untuk melihat efeknya</p>

<div>Silahkan buka diberbagai browser...Silahkan buka diberbagai browser...Silahkan buka diberbagai browser...Silahkan buka diberbagai browser...Silahkan buka diberbagai browser...Silahkan buka diberbagai browser...Silahkan buka diberbagai browser...Silahkan buka diberbagai browser...Silahkan buka diberbagai browser</div>


</div></body>
</html>
Hasilnya:

tinggi6

Penggunaan min dan max juga biasanya digunakan untuk mengatur halaman responsive yang telah mendukung berbagai jenis dan ukuran perangkat yang digunakan. Jadi bagi yang mendesain lamannya untuk mobile device bisa menggunakan property ini.

Jadi akhirnya, mari kita lanjutkan dan tinjau. Tampilan hanyalah salah satu alat yang akan kami gunakan untuk memposisikan elemen di halaman Anda. Desain awal, memutuskan bagaimana visi anda untuk halaman agar terlihat seperti sebelum Anda memulai coding, akan membuat semuanya lebih mudah. Jangan mengira saya ingin menggunakan float desain yang tepat, dan kemudian memutuskan oh, saya akan menggunakan float di sini. Maksudnya silahkan manfaatkan semua tools yang berbeda yang kami miliki, seperti memeriksa elemen, untuk melihat opsi berbeda Anda. Dan itu akan membuat kehidupan coding Anda begitu jauh lebih mudah. Gunakan alat-alat itu dan Anda akan menemukan bahwa Anda benar-benar berhasil pada keputusan dalam desain dan kode Anda.