CSS: Genişliği / yüksekliği Yüzde eksi piksel olarak ayarlama

Sitemde daha fazla tutarlılık ve daha az dağınıklık için yeniden kullanılabilir bazı CSS sınıfları oluşturmaya çalışıyorum ve sık kullandığım bir şeyi standartlaştırmaya çalışıyorum.

<div>Yüksekliğini ayarlamak istemediğim bir konteynere sahibim (çünkü sitede nerede olduğuna bağlı olarak değişecektir) ve içinde bir başlık <div>ve daha sonra tüm CSS uygulanmış öğelerin sırasız bir listesi var onlar.

Şuna çok benziyor:

İstediğim sırasız liste kapta kalan odayı almaya <div>başlık bilerek <div>olup 18pxuzun boylu. Listenin yüksekliğini " 100%eksi sonucu" olarak nasıl belirleyeceğimi bilmiyorum 18px.

Bu soruyu SO hakkında birkaç bağlamda sordum gördüm, ancak özel durumum için tekrar sormaya değeceğini düşündüm. Bu durumda herhangi bir tavsiye var mı?

Bunun eski bir gönderi olduğunu anlıyorum, ancak önerilmediği göz önüne alındığında, CSS3 uyumlu tarayıcılar için yazıyorsanız, şunları kullanabilirsiniz calc:

height: calc(100% - 18px);

Şu anda tüm tarayıcıların standart CSS3 calc () işlevini desteklemediğini belirtmek gerekir, bu nedenle işlevin tarayıcıya özgü sürümlerini uygulamak aşağıdaki gibi gerekebilir:

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);

Biraz farklı bir yaklaşım için listede böyle bir şey kullanabilirsiniz:

position: absolute;
top: 18px;
bottom: 0px;
width: 100%;

Bu, üst kapsayıcıya sahip olduğu sürece çalışır position: relative;

Bunun için Jquery kullanıyorum

function setSizes() {
   var containerHeight = $("#listContainer").height();
   $("#myList").height(containerHeight - 18);
}

daha sonra tarayıcı penceresi yeniden boyutlandırıldığında yeniden boyutlandırmak için pencerenin yeniden boyutlandırmasını bağlarım (kabın boyutu, pencere yeniden boyutlandırmasıyla değiştiyse)

$(window).resize(function() { setSizes(); });

Yüksekliği yüzde olarak tanımlamayın, top=0ve öğesini bottom=0şu şekilde ayarlayın:

#div {
   top: 0; bottom: 0;
   position: absolute;
   width: 100%;
}

17 piksel başlık yüksekliği varsayımı

Css listesi:

height: 100%;
padding-top: 17px;

Başlık css:

height: 17px;
float: left;
width: 100%;

1. Eksi pikselleri kapatmak istediğiniz öğede negatif kenar boşlukları kullanın. (istenen öğe)
2. Make overflow:hidden;içeren elemana
3. Geçiş overflow:auto;istenilen elemana.

Benim için çalıştı!

Kutu boyutlandırmayı deneyin. Liste için:

height: 100%;
/* Presuming 10px header height */
padding-top: 10px;
/* Firefox */
-moz-box-sizing: border-box;
/* WebKit */
-webkit-box-sizing: border-box;
/* Standard */
box-sizing: border-box;

Üstbilgi için:

position: absolute;
left: 0;
top: 0;
height: 10px;

Tabii ki, ana kapsayıcı şöyle olmalıdır:

position: relative;

Aynı hedefe ulaşmanın başka bir yolu: esnek kutular . Konteyneri bir sütun esnek kutusu yapın ve daha sonra bazı öğelerin sabit boyutlu (varsayılan davranış) olmasına izin verme veya konteyner boşluğunu doldurma / küçültme (flex-grow: 1 ve flex- küçültmek: 1).

#wrap {        
  display:flex;
  flex-direction:column;
}
.extendOrShrink {
  flex-shrink:1;
  flex-grow:1;
  overflow:auto;
}

Bkz. Https://jsfiddle.net/2Lmodwxk/ (efekti fark etmek için pencereyi genişletmeye veya azaltmaya çalışın)

Not: steno özelliğini de kullanabilirsiniz:

   flex:1 1 auto;

Diğer cevaplardan bazılarını denedim ve hiçbiri tam istediğim gibi çalıştı. Durumumuz bir pencere başlığına sahip olduğumuz ve pencere gövdesindeki görüntülerle pencerenin yeniden boyutlandırılabildiği yerlerde çok benzerdi. Başlığın sabit boyutunu hesaba katmak için hesaplamalara eklemeye gerek kalmadan yeniden boyutlandırmanın en boy oranını kilitlemek ve görüntünün pencere gövdesini doldurmasını istedik.

Aşağıda, yaptığımız durumun iyi sonuç verdiğini ve çoğu tarayıcıda uyumlu olması gerektiğini gösteren çok basit bir snippet oluşturdum.

Pencere öğemize, ekrandaki diğer öğelere göre konumlandırmaya katkıda bulunan, ancak pencerenin "boyutuna" katkıda bulunmayan 20 piksellik bir kenar boşluğu ekledik. Pencere başlığı daha sonra kesinlikle konumlandırılır (diğer öğelerin akışından kaldırılır, bu nedenle sıralanmamış liste gibi diğer öğelerin kaydırılmasına neden olmaz) ve üst kısmı, başlığı kenar boşluğunun içine yerleştiren -20px konumlandırılır pencerenin. Son olarak ul elemanımız pencereye eklenir ve yükseklik% 100 olarak ayarlanabilir, bu da pencerenin gövdesini doldurmasına neden olur (kenar boşluğu hariç).

*,*:before,*:after
{
  box-sizing: border-box;
}

.window
{
  position: relative;
  top: 20px;
  left: 50px;
  margin-top: 20px;
  width: 150px;
  height: 150px;
}

.window-header
{
  position: absolute;
  top: -20px;
  height: 20px;
  border: 2px solid black;
  width: 100%;
}

ul
{
  border: 5px dashed gray;
  height: 100%;
}

<div class="window">
  <div class="window-header">Hey this is a header</div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>

Teşekkürler, yardımınızla mayın çözdüm, çünkü bir div% 100 genişlik% 100 yükseklik (alt çubuğun daha az yüksekliği) ve vücutta kaydırma yok (kesmek / kaydırma çubukları olmadan).

CSS için:

 html{
  width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }
 body{
  position:relative;width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }
 div.adjusted{
  position:absolute;width:auto;height:auto;left:0px;right:0px;top:0px;bottom:36px;margin:0px;border:0px;padding:0px;
 }
 div.the_bottom_bar{
  width:100%;height:31px;margin:0px;border:0px;padding:0px;
}

HTML için:

<body>
<div class="adjusted">
 // My elements that go on dynamic size area
 <div class="the_bottom_bar">
  // My elements that goes on bottom bar (fixed heigh of 31 pixels)
 </div>  
</div>  

Bu hile yaptı, oh evet ben div.t alt çubuk yüksekliği için daha alt ayarlanmış biraz daha büyük bir değer koymak, başka dikey kaydırma çubuğu görünür, ben en yakın değer olarak ayarlanmış.

Bu fark, dinamik alandaki öğelerden birinin nasıl kurtulacağımı bilmediğim ekstra bir alt delik eklemesi ... bir video etiketi (HTML5), lütfen bu video etiketini bu css ( bu nedenle bir alt delik açması için bir neden yoktur, ancak yapar):

 video{
  width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }

Amaç: Tarayıcının% 100'ünü alan (ve tarayıcı yeniden boyutlandırıldığında dinamik olarak yeniden boyutlandırılan, ancak en boy oranını değiştirmeden) daha az bazı metinler, düğmeler vb. w3c & css tabii ki).

EDIT: Ben nedenini buldum, video etiketi metin gibi bir blok öğesi değil, bu yüzden bu css ile sabit:

 video{
  display:block;width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }

Not display:block;video etiketine üzerinde.

Bu durumun sizin özel durumunuzda olup olmadığından emin değilim, ancak içeren div sabit bir boyuttaysa, iç div üzerindeki dolgu, bir div içindeki içeriği itecektir. Üstbilgi öğenizi yüzdürmeniz veya kesinlikle konumlandırmanız gerekir, ancak aksi takdirde, değişken boyutlu div'ler için bunu denemedim.