SORU
27 Ocak 2009, Salı

CSS doldurma/marjı 100% yükseklik

Bu oldu beni deli birkaç gün oldu, ama gerçekte bir sorun yaşadım vurdu ve son birkaç yıl: HTML/CSS nasıl yapabilirim unsuru olan bir genişlik ve/veya yükseklik yani 0 ana öğe ve hala uygun bir dolgu ya da kenar boşlukları?

"Uygun" demek istediğim, eğer benim ana unsurdur 200px uzun boylu ve benim belirttiğim 100% yüksekliği ile 5px doldurma ederim beklediğiniz almam gerekiyor 190px yüksek element ile 5px "sınır" ilgili tüm tarafların, güzel ortalanmış olarak üst öğe.

Şimdi, bu standart kutu modeli çalışması gerektiğini belirtir nasıl değil (nedenini bilmek istiyorum, tam olarak... rağmen), açık cevap işe yaramıyor biliyorum:

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

Ama güvenilir bir şekilde, keyfi büyüklükte bir ebeveyn için bu etkiyi üreten bir yol olması gerektiğini bana görünüyor. Herkes (görünüşte) bu basit görevi yerine getirmeye bir yol biliyor mu?

Oh, ve o (umarım) biraz daha kolay yapmak gerekir, böylece IE uyumluluk çok ilgilenmiyorum kayıt için.

DÜZENLEME:Bir örnek istedi beri, burada aklıma gelen en basit bir şey:

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

O zaman sayfa olmadan tüm kenarları kaydırma çubukları gerektirecek kadar büyük büyüyen 25 piksel doldurma göstermek için kara kutuyu almak için.

CEVAP
27 Ocak 2009, Salı

Bir şeyler okurken bu tür yapmayı öğrendim "PRO HTML and CSS Design Patterns". display:block div görüntüleme için varsayılan değer ama açık olmak istiyorum. Kap fixed, relative absolute niteliği türü; position olmalı.

.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;
}

HTML

<div class="stretchedToMargin">
  Hello, world
</div>

Nooshu Fiddle comment

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:
Css

AYNI ETİKETTEKİ VİDEOLAR

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • andony5589

    andony5589

    7 Aralık 2011
  • THELIFEOFPRICE

    THELIFEOFPRI

    16 Mart 2011
  • TouchePro

    TouchePro

    27 EYLÜL 2007

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR