Çalıştırılabilir CSS Dokümanları: Width ve height

Q: width: 100% ile width: auto arasındaki fark nedir?

Bir blok element için auto, padding ve kenarlığı dahil kapsayıcıyı doldurur. width: 100% ise içerik genişliğini kapsayıcının genişliğine eşitler, bu yüzden varsayılan box-sizing: content-box altında her padding ya da kenarlık elementin taşmasına neden olur.

Q: width ile max-width arasındaki fark nedir?

width tam bir boyut ayarlar. max-width ise bir üst sınır koyar: element örneğin bir telefonda daha dar olabilir ama asla daha geniş olamaz. width: 100%; max-width: 600px; küçük ekranları doldurur, büyüklerde 600px'te durur.

Q: Bir element tam ekran yüksekliğinde nasıl yapılır?

min-height: 100vh kullan (ya da mobil tarayıcı araç çubukları hesaba katılsın diye 100dvh). height yerine min-height, içerik ekrandan uzunsa bölümün büyümesine izin verir.

Genişlik ve yükseklik ayarlamak

width ve height bir elementin içerik kutusunun boyutunu ayarlar. Varsayılan olarak padding ve kenarlık bu boyutun dışına eklenir.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Width and height</title>
  <style>
    .box {
      width: 240px;
      height: 80px;
      background: #2563eb;
      color: white;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="box" id="box"></div>
  <script>
    const box = document.getElementById('box');
    box.textContent = 'width 240px + padding = ' + box.offsetWidth + ' x ' + box.offsetHeight + 'px';
  </script>
</body>
</html>

Kutu 260'a 100 piksel: 240'a 80 içerik artı her kenarda 10px padding. box-sizing: border-box ile tam olarak 240'a 80 olurdu; ikisini de kutu modeli sayfası açıklıyor.

Değerler

Değer	Örnek	Anlamı
`auto`	`width: auto`	Varsayılan. Bloklar kapsayıcılarının genişliğini doldurur; yükseklik içeriğe uyar
Uzunluk	`300px`, `20rem`	Sabit bir boyut
Yüzde	`50%`	Kapsayıcı bloğun genişliğinin (`width` için) ya da yüksekliğinin (`height` için)
Viewport birimleri	`100vh`, `50vw`, `100dvh`	Tarayıcı penceresinin
`min-content`	`width: min-content`	Olabildiğince dar, en uzun kelime belirler
`max-content`	`width: max-content`	İçeriğin tek satırdaki genişliği kadar
`fit-content`	`width: fit-content`	`max-content` gibi, ama kapsayıcıdan asla geniş değil

height: 100% neden hiçbir şey yapmaz

Yüzdelik bir height, yüzdesi alınacak belirli yükseklikte bir ebeveyne ihtiyaç duyar. Ebeveynin yüksekliği auto olduğunda, ki normal durum budur, çocuğun height: 100% değeri de auto gibi davranır.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>height 100%</title>
  <style>
    .parent { background: #e5e7eb; padding: 6px; margin-bottom: 12px; display: flow-root; }
    .fixed { height: 120px; }
    .child { height: 100%; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">Parent height auto: 100% is ignored</div>
  </div>
  <div class="parent fixed">
    <div class="child">Parent height 120px: 100% works</div>
  </div>
</body>
</html>

İlk çocuk yalnızca metni kadar uzun. İkincisi ebeveynini dolduruyor, çünkü ebeveynin bir yüksekliği var. Bütün bir sayfa zincirini yüzdelerle çalıştırmak için html ve body'ye kadar her atanın bir yüksekliği olması gerekir; çoğu düzenin bunun yerine flexbox ya da grid kullanmasının nedeni budur: çocukları hiç yüzde olmadan doldurmak için esner.

min-height ve max-width: esneyen boyutlar

Sabit boyutlar kolay bozulur: sabit bir yükseklik metin beklenenden uzun olduğunda taşar, sabit bir genişlik ise bir telefon için fazla geniştir. min- ve max- özellikleri tam boyutlar yerine sınırlar koyar.

Özellik	Anlamı
`min-width`	Bundan asla dar değil
`max-width`	Bundan asla geniş değil
`min-height`	Bundan asla kısa değil, ama büyüyebilir
`max-height`	Bundan asla uzun değil (fazla içerik taşar)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>min and max</title>
  <style>
    .card {
      max-width: 360px;   /* narrower on small screens, never wider */
      min-height: 50px;   /* at least 50px, grows with content */
      border: 2px solid #2563eb;
      padding: 10px;
      margin-bottom: 12px;
    }
    .fixed {
      max-width: 360px;
      height: 50px;       /* fixed: long text spills out */
      border: 2px solid #f59e0b;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="card">Short card: the 50px minimum.</div>
  <div class="card">A card with much more text. It keeps its 360px limit but grows taller, because min-height sets a floor, not a fixed size. The border stays around all of the text, however many lines there are. Add another sentence here and the card simply gets taller again.</div>
  <div class="fixed">A fixed height of 50px with long text. The text no longer fits, so it spills past the amber border and over whatever comes next on the page. A fixed height cannot know how long the text will be, or how large the reader has set the font.</div>
</body>
</html>

Telefon gibi 360px'ten dar bir ekranda kartlar ekranla birlikte küçülür, çünkü max-width yalnızca bir tavandır.

Hem bir boyut hem bir sınır uygulandığında sınırlar kazanır: max-width, width'ü yener, min-width de max-width'ü yener.

width: auto ve width: 100%

Bir blok element için width'ü auto'da bırakmak neredeyse her zaman istediğin şeydir. auto, padding ve kenarlık dahil bütün kutuyu kapsayıcıya sığdırır. 100% ise içeriği kapsayıcı kadar geniş yapar ve padding ile kenarlığı üstüne ekler:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>auto vs 100%</title>
  <style>
    .container { width: 300px; background: #e5e7eb; padding: 8px 0; }
    .item { padding: 10px; border: 3px solid #2563eb; margin: 6px 0; }
    .auto { width: auto; }
    .full { width: 100%; }
  </style>
</head>
<body>
  <div class="container">
    <div class="item auto">width: auto, fits</div>
    <div class="item full">width: 100%, overflows</div>
  </div>
  <p id="out"></p>
  <script>
    const w = (s) => document.querySelector(s).offsetWidth;
    document.getElementById('out').textContent =
      'container 300px, auto ' + w('.auto') + 'px, 100% ' + w('.full') + 'px';
  </script>
</body>
</html>

width: 100%, varsayılan olarak blok olmayan elementlerde (bir <input>, bir <img>, bir inline-block) hâlâ kullanışlıdır, tercihen box-sizing: border-box ile birlikte.

İçeriğe göre boyutlandırma: fit-content

Bir bloğu inline-block'a çevirmeden yalnızca metni kadar geniş yapmak için fit-content kullan:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fit-content</title>
  <style>
    div { background: #16a34a; color: white; padding: 6px 10px; margin-bottom: 8px; }
    .fit { width: fit-content; }
    .min { width: min-content; }
  </style>
</head>
<body>
  <div>auto: full width</div>
  <div class="fit">fit-content: as wide as the text</div>
  <div class="min">min-content: one word per line</div>
</body>
</html>

margin-inline: auto ile birlikte fit-content, tam olarak metni kadar geniş kalan bir etiketi ya da buton benzeri bir bloğu ortalar.

Tam yükseklikte bölümler ve viewport birimleri

vh viewport yüksekliğinin %1'i, vw ise genişliğinin %1'idir. Telefonlarda tarayıcının adres çubuğu kaydırdıkça büyüyüp küçülür, bu yüzden 100vh gördüğünden daha uzun olabilir. Dinamik birim dvh görünür alanı takip eder, svh ise en küçük görünür yüksekliği kullanır:

.hero {
  min-height: 100vh;  /* fallback */
  min-height: 100dvh; /* follows mobile toolbars */
}

Tam ekran bölümler için height değil min-height kullan; böylece çok metni olan küçük bir ekran da büyüyebilen bir bölüm alır. İçeriği sığmayan sabit bir yükseklik taşar; bununla CSS overflow sayfası ilgileniyor.

Sık yapılan hatalar

Yüksekliği olmayan bir ebeveynin içinde height: 100%. auto gibi davranır. Ebeveyne bir yükseklik ver ya da flex veya grid kullan.
width: 100% artı padding. Element kapsayıcısından taşar. Blok genişliklerini auto'da bırak ya da box-sizing: border-box kullan.
Metin kapsayıcılarında sabit yükseklik. Daha uzun metin ya da daha büyük bir yazı tipi taşmasın diye min-height kullan.
Satır içi bir elementte width. <span> ve <a>, width ve height değerlerini yok sayar; onları inline-block ya da block yap.
Sayfa sarmalayıcısında width: 1200px. Her telefonda yana kayar. Bunun yerine max-width: 1200px kullan.

Sıkça Sorulan Sorular

height: 100% neden çalışmıyor?

Yüzdelik bir yükseklik ebeveynin yüksekliğinin yüzdesidir ve yalnızca o yükseklik belirli olduğunda çalışır. Ebeveynin yüksekliği auto ise (içeriğine göre boyutlanıyorsa) yüzde auto olarak işlenir. Ebeveyne bir yükseklik ver ya da çocukları yüzde olmadan esneten flexbox veya grid kullan.

width: 100% ile width: auto arasındaki fark nedir?

Bir blok element için auto, padding ve kenarlığı dahil kapsayıcıyı doldurur. width: 100% ise içerik genişliğini kapsayıcının genişliğine eşitler, bu yüzden varsayılan box-sizing: content-box altında her padding ya da kenarlık elementin taşmasına neden olur.

CSS'te min-height ne işe yarar?

Bir elementin sahip olabileceği en küçük yüksekliği ayarlar ve yine de içeriğiyle büyümesine izin verir. min-height: 200px boş bir karta 200px verir, daha fazla metni olan bir kart ise taşmak yerine uzar; sabit bir height buna izin vermezdi.

width ile max-width arasındaki fark nedir?

width tam bir boyut ayarlar. max-width ise bir üst sınır koyar: element örneğin bir telefonda daha dar olabilir ama asla daha geniş olamaz. width: 100%; max-width: 600px; küçük ekranları doldurur, büyüklerde 600px'te durur.

Bir element tam ekran yüksekliğinde nasıl yapılır?

min-height: 100vh kullan (ya da mobil tarayıcı araç çubukları hesaba katılsın diye 100dvh). height yerine min-height, içerik ekrandan uzunsa bölümün büyümesine izin verir.

İlgili kavramlar