Dolgu / kenar boşluğu ile CSS% 100 yükseklik

813

HTML / CSS ile, genişliğinin ve / veya yüksekliğinin üst öğesinin% 100'ü olan ve yine de uygun dolgu veya kenar boşluklarına sahip bir öğeyi nasıl yapabilirim?

"Uygun" ile ifade etmek gerekirse, eğer ana öğem 200pxuzunsa ve height = 100%birlikte belirtirsem , her iki tarafta da güzel bir şekilde ana öğeye ortalanmış yüksek bir eleman padding = 5pxalmamı beklerdim .190pxborder = 5px

Şimdi, standart kutu modelinin nasıl çalışacağını belirtmediğini biliyorum (nedenini tam olarak bilmek istiyorum ...), bu yüzden açık cevap işe yaramıyor:

#myDiv {
    width: 100%
    height: 100%;
    padding: 5px;
}

Ama bana öyle geliyor ki, keyfi büyüklükteki bir ebeveyn için bu etkiyi güvenilir bir şekilde üretmenin BAZI bir yolu olmalı. Herkes bu (görünüşte basit) görevi yerine getirmenin bir yolunu biliyor mu?

Oh, ve kayıt için IE uyumluluğu ile çok ilgilenmiyorum, bu yüzden (umarım) işleri biraz daha kolay hale getirmelidir.

EDIT: Bir örnek istendiğinden, aklıma gelen en basit örnek:

<html style="height: 100%">
    <body style="height: 100%">
        <div style="background-color: black; height: 100%; padding: 25px"></div>
    </body>
</html>

Buradaki zorluk, kara kutunun, sayfa kaydırma çubukları gerektirecek kadar büyüymeden tüm kenarlarında 25 piksel dolgu ile görünmesini sağlamaktır.

css 
— Toji
kaynak
Bu iki çözümü en güvenilir buldum: http://www.xs4all.nl/~peterned/examples/csslayout1.html http://themaninblue.com/experiment/footerStickAlt/ Herhangi bir HTML'niz var mı görebilir ve oynayabilir miyiz?
— Nick Presta
— Ben

Yanıtlar:

755

" PRO HTML ve CSS Tasarım Desenleri " ni okuyarak bu tür şeyleri nasıl yapacağımı öğrendim . İçin display:blockvarsayılan görüntüleme değeridir div, ancak bunu açık yapmak istiyorum. Kap doğru tipte olmalıdır; positionniteliktir fixed, relativeya absolute.

.stretchedToMargin {
  display: block;
  position:absolute;
  height:auto;
  bottom:0;
  top:0;
  left:0;
  right:0;
  margin-top:20px;
  margin-bottom:20px;
  margin-right:80px;
  margin-left:80px;
  background-color: green;
}
<div class="stretchedToMargin">
  Hello, world
</div>
Snippet'i genişlet

Nooshu adlı kullanıcının yorumu: Fiddle

— Frank Schwieterman
kaynak
42
Mükemmel çözüm, bu yer imi olacak. Sadece canlı bir demo isteyen herkes için hızlı bir şekilde jsfiddle.net/Rpdr9'a ekledi . Umursamıyorsun umarım.
— Nooshu
16
@Toji IE uyumluluğunu umursamasa da, maalesef yapmak zorundayım. Bu çözüm başlangıçta IE6 altında çalışmadı. Dean Edwards ' IE9.js'nin sayfaya eklenmesi bu çalışmayı gerçekleştirdi. Şimdi, göreceli / mutlak konumlandırmanın bir alt öğede bir şeyle vidalanmamasını umuyorum ve dua etmeliyim ...
— Christopher Parker
24
-1 (burada bir azınlık gibiyim: P). Bu, kutunun kesinlikle konumlandırılabileceğini varsayar; insanlar zaten pozu aşırı kullanıyor: abs olduğu gibi, bu cephaneye ihtiyaçları yok. Bu örneği ele alalım: içinde "panel" sınıfının birden çok div öğesi olan bir div "panel". "paneller" {taşma: gizli; height: 300px;} ve "panel" değişken içeriklere / içerik yüksekliğine sahiptir, {border: # 000 solid 1px; yüzer: left; kenar sağ: 10px;}. Herhangi bir noktada kenarlıklarını kaybetmeden tüm "panel" i "panel" in yüksekliği yapın. "Panel" div poz olamaz: burada. @ Marco'nun çözümü bu senaryoda işe yarıyor.
— eternicode
8
Oh vay, anladım. top:0, bottom:0Eleman dışarı, esasen "streç". Ben sadece çalışmak için alabilirsiniz position:absoluteolsa
— Matt
7
Hiç top:20px;bottom:20px;left:20px;right:20px;marj kullanmak yerine yapamaz mıydınız?
— chowey
391

CSS3'te kutu modelinin genişliği / yüksekliği hesaplama şeklini değiştirmek için kullanabileceğiniz yeni bir özellik var, buna kutu boyutlandırma deniyor.

Bu özelliği "border-box" değeri ile ayarlamak, dolgu veya kenarlık eklediğinizde hangi öğeyi uygularsanız esnememesini sağlar. 100 piksel genişliğinde ve 10 piksel dolgulu bir şey tanımlarsanız, yine de 100 piksel genişliğinde olur.

box-sizing: border-box;

Tarayıcı desteği için buraya bakın . IE7 ve altı için çalışmaz, ancak Dean Edward'ın IE7.js'nin buna destek verdiğine inanıyorum . Zevk almak :)

— Marco Jardim
kaynak
45
En sonunda! Bu özelliği yaklaşık 10 yıldır bekliyorum. Yazık IE7 desteklemiyor ama her zaman hala IE kullanan insanların güzel bir düzeni hak etmediğini düşünüyorum.
— cronoklee
2
Bu, iPhone / Safari ve Android'in varsayılan tarayıcısında çalıştı, ancak kesinlikle konumlandırılmış çözüm işe yaramadı.
— Spud
18
Bu temelde IE'nin tuhaflık modu kutu modeliyle aynıdır . Herkesin IE'de nasıl nefret ettiğini henüz komik buluyorum border-boxherkesin kahramanı :)
— Matt Greer
14
FYI, kutu boyutlandırma için tarayıcı öneki artık -moz hariç herkes için bırakıldı. Bkz paulirish.com/2012/box-sizing-border-box-ftw ve iyi bir tartışma için yapılan yorumlar
— aponzani
3
Evet! Bu doğru cevap! % 100 yükseklik, artık, dökülmeden, ebeveynlerine göre doğru şekilde ölçekleniyor. Eğer yapabilirsem bir milyon + 1 verirdi.
— Andrew Mao
65

Çözüm, hiç yükseklik ve genişlik KULLANMAMAKTIR! İç kutuyu üst, sol, sağ, alt kullanarak takın ve ardından kenar boşluğu ekleyin.

.box {margin:8px; position:absolute; top:0; left:0; right:0; bottom:0}
<div class="box" style="background:black">
  <div class="box" style="background:green">
    <div class="box" style="background:lightblue">
      This will show three nested boxes. Try resizing browser to see they remain nested properly.
    </div>
  </div>
</div>
Snippet'i genişlet

— amolk
kaynak
6
Teknik olarak doğru olduğunuz için yukarı oy verin, ama aynı zamanda Frank'inkiyle aynı cevap (Bu, daha iyi olan tarayıcılar için biraz daha arkadaş canlısı.)
— Toji
39

En iyi yol calc () özelliğidir. Yani davanız şöyle görünecekti:

#myDiv {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    padding: 5px;
}

Basit, temiz, geçici çözüm yok. Sadece değerler ve operatör arasındaki boşluğu unutmadığınızdan emin olun (örn (100%-5px). Sözdizimini kıracaktır.)

— Brian Aderer
kaynak
6
Güzel çözüm. Tarayıcı desteğini kontrol etmeyi unutmayın: calc () kullanabilir miyim
— Brett Postin
5
Bu, aslında her bir PLUS 5px dolgusuna% 100 genişlik ve yükseklik vermeyecektir, çünkü dolgu, öğeyi sırasıyla 10 piksel daha geniş ve daha büyük hale getirecektir?
Sonunda iyi bir çözüm, ve geri kalanı gibi değil, sadece pozisyon ile çalışacak olan üst, sağ, alt ve sol 0 olacak şekilde saksıyorsunuz: mutlak;
— Gil Epshtain
Doğru olduğunu düşünüyorum: #myDiv {width: calc (% 100 - 10px); yükseklik: kalk (% 100 - 10 piksel); dolgu: 5 piksel; } 5 soldan ve 5 sağdan = 10, 5 üstten ve 5 üstten = 10
— Chris P
21

W3c spesifikasyon yüksekliğine göre, örneğin 1280x1024 piksel çözünürlük monitöründe% 100 yükseklik = 1024 piksel gibi görüntülenebilir alanın yüksekliğine atıfta bulunulur.

min-height, içeriğin 1024px min-height'den daha büyük olduğu bir sayfada içerik de dahil olmak üzere toplam yüksekliği ifade eder:% 100, içeriğin tamamını içerecek şekilde gerilir.

Diğer bir sorun ise, ie6 dışında çoğu modern tarayıcıda yüksekliğe ve genişliğe dolgu ve kenarlık eklenmesi (ie6 aslında oldukça mantıklı ancak spesifikasyona uymuyor). Buna kutu modeli denir. Dolayısıyla,

min-height: 100%;
padding: 5px;

Aslında size yükseklik için% 100 + 5px + 5px verecektir. Bunu aşmak için bir sargı kabına ihtiyacınız var.

<style>
    .FullHeight { 
       height: auto !important; /* ie 6 will ignore this */
       height: 100%;            /* ie 6 will use this instead of min-height */
       min-height: 100%;        /* ie 6 will ignore this */
    }

    .Padded {
       padding: 5px;
    }
</style>

<div class="FullHeight">
   <div class="Padded">
      Hello i am padded.
   </div
</div>
— Alex
kaynak
4
@Alex: Ama iç div'ı (Yastıklı olan) dış div yüksekliğinin% 100'ü yapan şey. Deneyimlerim, daha büyük bir tam boy div içinde biraz kısa div elde etmeniz oldu.
— Lawrence Dol
8

1. ile tam yükseklik padding

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  padding: 50px;
  box-sizing: border-box;
  background: silver;
}
<div class="container">Hello world.</div>
Snippet'i genişlet

2. ile tam boy margin

body {
  margin: 0;
}
.container {
  min-height: calc(100vh - 100px);
  margin: 50px;
  background: silver;
}
<div class="container">Hello world.</div>
Snippet'i genişlet

3. ile tam boy border

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  border: 50px solid pink;
  box-sizing: border-box;
  background: silver;
}
<div class="container">Hello world.</div>
Snippet'i genişlet

— Çıkartma
kaynak
7

Bu CSS'nin açık sözlerinden biridir - Akıl yürütmeyi henüz anlamadım (eğer biri biliyorsa, lütfen açıklayın).

% 100, tüm kenar boşluklarının, kenarlıkların ve dolguların eklendiği kap yüksekliğinin% 100'ü anlamına gelir. Bu nedenle, ebeveynini dolduran ve kenar boşluğu, kenarlık veya dolguya sahip bir kap almak etkili bir şekilde imkansızdır.

Ayrıca, yükseklik ayarının tarayıcılar arasında da tutarsız olduğunu unutmayın.

Bunu gönderdiğimden beri öğrendiğim başka bir şey, yüzdenin kabın uzunluğuna göre , yani genişlik, yüzdeyi yükseklik için daha da değersiz hale getirmesidir.

Günümüzde, vh ve vw viewport birimleri daha kullanışlıdır, ancak yine de üst düzey kaplar dışında herhangi bir şey için özellikle yararlı değildir.

— Lawrence Dol
kaynak
Herhangi bir gerekçe yoktur, sadece tarayıcıların tutarlı davranışa yaklaşmaya başladığı yerde ne oldu. Cevabımda belirtilen kitaba göz atın.
— Frank Schwieterman
Doğru terimi kullanmak için oy verildi. Tex ve gördüğüm herhangi bir düzen yöneticisi doğru anladı, sadece CSS özel olmalı.
— maaartinus
5

Başka bir çözüm, farklı bir kutu modeli davranışı olan display: tablosunu kullanmaktır.

Üst öğeye yükseklik ve genişlik ayarlayabilir ve genişletmeden dolgu ekleyebilirsiniz. Çocuğun yastıkları eksi% 100 yükseklik ve genişliğe sahiptir.

JSBIN

Başka bir seçenek kutu boyutlandırma özelliği kullanmak olacaktır. Her ikisi de sadece IE7 çalışmaz sorun olurdu.

— user1721135
kaynak
4

Başka bir çözüm: Kenar boşlukları ve boyutlar için yüzde birimleri kullanabilirsiniz. Örneğin:

.fullWidthPlusMargin {
    width: 98%;
    margin: 1%;
}

Buradaki ana sorun, kenar boşluklarının üst öğenin boyutuyla biraz artması / azalmasıdır. Muhtemelen tercih ettiğiniz işlevsellik, kenar boşluklarının sabit kalması ve alt öğenin aralıktaki değişiklikleri doldurmak için büyümesi / küçülmesidir. Bu nedenle, ekranınızın ne kadar sıkı olması gerektiğine bağlı olarak, bu sorunlu olabilir. (% 0,3 gibi daha küçük bir marj için de giderdim).

— ktbiz
kaynak
3

Flexbox ile bir çözüm ( IE11 üzerinde çalışıyor): ( veya jsfiddle'da görünüm )

<html>
  <style>
    html, body {
      height: 100%; /* fix for IE11, not needed for chrome/ff */
      margin: 0; /* CSS-reset for chrome */
    }
  </style>
  <body style="display: flex;">
    <div style="background-color: black; flex: 1; margin: 25px;"></div>
  </body>
</html>

( CSS sıfırlaması gerçek sorun için mutlaka önemli değildir.)

Önemli kısım flex: 1( display: flexEbeveyn ile birlikte ). Funnily yeterince, Flex özelliğinin nasıl çalıştığını bildiğim en mantıklı açıklama yerel bir belge, bu yüzden yine de bakın :

(...) flex: Bir bileşene, aynı üst öğeye sahip diğer bileşenler arasında eşit olarak paylaşılan tüm kullanılabilir alanı doldurmasını söyleyen 1

— Putzi San
kaynak
2

Frank'in örneği beni biraz karıştırdı - benim durumumda işe yaramadı çünkü henüz konumlandırmayı yeterince anlamadım. Ana kap öğesinin statik olmayan bir konuma sahip olması gerektiğini belirtmek önemlidir (bundan bahsetti, ancak göz ardı ettim ve örneğinde değildi).

Aşağıda, dolgu ve kenarlık verilen alt öğenin, üst öğeyi% 100 doldurmak için mutlak konumlandırma kullandığı bir örnek verilmiştir. Ebeveyn, normal akışta kalırken çocuğun konumu için bir referans noktası sağlamak amacıyla göreceli konumlandırma kullanır - bir sonraki "daha fazla içerik" öğesi etkilenmez:

#box {
    position: relative;
    height: 300px;
    width: 600px;
}

#box p {
    position: absolute;
    border-style: dashed;
    padding: 1em;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
<div id="box">
  <p>100% height and width!</p>
</div>
<div id="more-content">
</div>

CSS konumlandırmayı hızlı bir şekilde öğrenmek için yararlı bir bağlantı

— Peter Tseng
kaynak
0

Sayfa gövdesi kenar boşluğu yerine div çevresinde kenarlık

Başka bir çözüm - Sadece sayfamın kenarında basit bir kenarlık istedim ve içerik bundan daha küçük olduğunda% 100 yükseklik istedim.

Sınır kutusu işe yaramadı ve sabit konumlandırma böyle basit bir ihtiyaç için yanlış görünüyordu.

Sayfanın gövdesinin kenar boşluğuna güvenmek yerine, kabıma bir kenarlık ekledim - şöyle görünüyor:

body, html {
    height: 100%;
    margin: 0;
}

.container {
    width: 100%;
    min-height: 100%;
    border: 8px solid #564333;
}
— Kris Randall
kaynak
0

Bu varsayılan davranıştır display: block2020 yılında düzeltmek için en hızlı yolu, display: 'flex'örneğin 20px ana öğe ve dolgu ayarlamak için tüm çocuklarının yüksekliğine göre% 100 yüksekliğe sahip olacaktır.

— Freestyle09
kaynak
0

-Webkit ve -moz eklemek daha uygun olur

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
— user3113626
kaynak
-2 
  <style type="text/css">
.stretchedToMargin {
    position:absolute;
    width:100%;
    height:100%;

}
</style>
— Müjassir Nasir
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.