Div genişliği% 100 eksi sabit miktarda piksel

Tablo veya JavaScript kullanmadan aşağıdaki yapıya nasıl ulaşabilirim? Beyaz kenarlıklar div öğelerinin kenarlarını temsil eder ve soru ile ilgili değildir.

Ortadaki alanın boyutu değişecektir, ancak tam piksel değerlerine sahip olacaktır ve tüm yapı bu değerlere göre ölçeklendirilmelidir. Basitleştirmek için, "% 100 - n px" genişliğini üst-orta ve alt-orta div değerlerine ayarlamak için bir yola ihtiyacım var.

Temiz bir çapraz tarayıcı çözümünü takdir ediyorum, ancak mümkün değilse, CSS saldırıları yapacak.

İşte bir bonus. Mücadele ettiğim başka bir yapı ve tablolar veya JavaScript kullanıyorum. Biraz farklı, ama yeni sorunlar getiriyor. Ben esas olarak jQuery tabanlı pencereleme sisteminde kullanıyorum, ancak düzeni komut dosyasından uzak tutmak ve sadece bir öğenin (ortadaki) boyutunu kontrol etmek istiyorum.

Araç çubuğunda sol ve sağ kenar elde etmek için iç içe geçmiş öğeleri ve dolguları kullanabilirsiniz. Bir divöğenin varsayılan genişliği auto, yani mevcut genişliği kullandığı anlamına gelir. Daha sonra öğeye dolgu ekleyebilirsiniz ve yine de mevcut genişlik dahilinde kalır.

Görüntüleri sol ve sağ yuvarlak köşeler olarak yerleştirmek için kullanabileceğiniz bir örnek ve aralarında tekrar eden orta bir görüntü.

HTML:

<div class="Header">
   <div>
      <div>This is the dynamic center area</div>
   </div>
</div>

CSS:

.Header {
   background: url(left.gif) no-repeat;
   padding-left: 30px;
}
.Header div {
   background: url(right.gif) top right no-repeat;
   padding-right: 30px;
}
.Header div div {
   background: url(center.gif) repeat-x;
   padding: 0;
   height: 30px;
}

Sadece tökezlediğim yeni yol: csscalc() :

.calculated-width {
    width: -webkit-calc(100% - 100px);
    width:    -moz-calc(100% - 100px);
    width:         calc(100% - 100px);
}​

Kaynak: css genişliği% 100 eksi 100 piksel

Guffa'nın cevabı birçok durumda işe yararken, bazı durumlarda sol ve / veya sağ dolgu parçalarının orta divın ebeveyni olmasını istemeyebilirsiniz. Bu durumlarda, merkezde bir blok biçimlendirme bağlamı kullanabilir ve dolgu div'larını sola ve sağa kaydırabilirsiniz. İşte kod

HTML:

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

CSS:

.container {
    width: 100px;
    height: 20px;
}

.left, .right {
    width: 20px;
    height: 100%;
    float: left;
    background: black;   
}

.right {
    float: right;
}

.center {
    overflow: auto;
    height: 100%;
    background: blue;
}

Bu öğe hiyerarşisinin iç içe iç içe div'lara kıyasla daha doğal olduğunu ve sayfadakileri daha iyi temsil ettiğini hissediyorum. Bu nedenle, sınırlar, dolgu ve kenar boşluğu tüm elemanlara normal olarak uygulanabilir (yani: bu 'doğallık' stilin ötesine geçer ve sonuçları vardır).

Bunun yalnızca div öğelerinde ve 'varsayılan olarak genişliğin% 100'ünü doldur' özelliğini paylaşan diğer öğeler üzerinde çalıştığını unutmayın. Girdiler, tablolar ve muhtemelen diğerleri bunları bir konteyner divine sarmanızı ve bu kaliteyi geri yüklemek için biraz daha css eklemenizi gerektirir. Bu durumda olacak kadar şanssızsanız, benimle iletişime geçin, css'yi kazacağım.

jsfiddle burada: jsfiddle.net/RgdeQ

Zevk almak!

Flexbox düzenini kullanabilirsiniz . Sırasıyla flex: 1dinamik genişliği veya yüksekliği olması gereken öğeyi ayarlamanız gerekir flex-direction: row and column.

Dinamik genişlik:

HTML

<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>
</div>

CSS

.container {
  display: flex;
}
.fixed-width {
  width: 200px; /* Fixed width or flex-basis: 200px */
}
.flexible-width {
  flex: 1; /* Stretch to occupy remaining width i.e. flex-grow: 1 and flex-shrink: 1*/
}

Çıktı:

.container {
  display: flex;
  width: 100%;
  color: #fff;
  font-family: Roboto;
}
.fixed-width {
  background: #9BCB3C;
  width: 200px; /* Fixed width */
  text-align: center;
}
.flexible-width {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
}

<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>

</div>

Dinamik yükseklik:

HTML

<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>
</div>

CSS

.container {
  display: flex;
}
.fixed-height {
  height: 200px; /* Fixed height or flex-basis: 200px */
}
.flexible-height {
  flex: 1; /* Stretch to occupy remaining height i.e. flex-grow: 1 and flex-shrink: 1*/
}

Çıktı:

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  color: #fff;
  font-family: Roboto;
}
.fixed-height {
  background: #9BCB3C;
  height: 50px; /* Fixed height or flex-basis: 100px */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flexible-height {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>

</div>

Bunu yapmanın olağan yolu Guffa, iç içe elemanlar tarafından belirtildiği gibidir. Bunun için ihtiyacınız olan kancaları almak için ekstra işaretleme eklemek biraz üzücü, ama pratikte burada bir sarıcı div ya da kimseye zarar vermeyecek.

Ek öğeler olmadan yapmanız gerekiyorsa (örneğin, sayfa işaretlemesinin kontrolüne sahip değilseniz), oldukça iyi ancak eksiksiz veya basit tarayıcı desteği olmayan kutu boyutlandırma kullanabilirsiniz . Yine de komut dosyalarına güvenmekten daha eğlenceli.

Belki aptalım, ama burada bariz bir çözüm değil mi?

<div class="parent">
    <div class="fixed">
    <div class="stretchToFit">
</div>

.parent{ display: table; width 100%; }
.fixed { display: table-cell; width: 150px; }
.stretchToFit{ display: table-cell; vertical-align: top}

Kromda anladığım başka bir yol daha da basit, ama adam bir hack!

.fixed{ 
   float: left
}
.stretchToFit{
   display: table-cell;
   width: 1%;
}

Bu tek başına tablo hücrelerinin yaptığı gibi çizginin geri kalanını yatay olarak doldurmalıdır. Ancak, genişliğinin yüzde değerine ayarlanması, üst öğesinin% 100'ünün üzerine çıkmasıyla ilgili garip sorunlar yaşarsınız.

Bunu flex-box kullanarak kolayca başarabiliriz.

Üstbilgi, MiddleContainer ve Altbilgi gibi üç öğemiz varsa. Üstbilgi ve Altbilgiye sabit bir yükseklik vermek istiyoruz. o zaman şöyle yazabiliriz:

React / RN için (varsayılanlar flex olarak 'display' ve sütun olarak 'flexDirection' şeklindedir), web css'de gövde kapsayıcısını veya bunları içeren kapsayıcıyı display olarak belirtmeliyiz: 'flex', flex-direction: 'column' aşağıdaki gibi:

    container-containing-these-elements: {
     display: flex,
     flex-direction: column
    }
    header: {
     height: 40,
    },
    middle-container: {
     flex: 1, // this will take the rest of the space available.
    },
    footer: {
     height: 100,
    }

kaydırma div% 100 ise ve bir piksel miktarı için dolgu kullandıysanız, dolgu # dinamik olması gerekiyorsa, olaylarınız tetiklendiğinde dolgu miktarınızı değiştirmek için kolayca jQuery kullanabilirsiniz.

Ekranın üst kısmında solda bir resim ve sağda ekranın kenarında tekrarlayan bir resim olmasını istediğim benzer bir sorun vardı. Ben böyle çözdü sonunda:

CSS:

.banner_left {
position: absolute;
top: 0px;
left: 0px;
width: 131px;
height: 150px;
background-image: url("left_image.jpg");
background-repeat: no-repeat;
}

.banner_right {
position: absolute;
top: 0px;
left: 131px;
right: 0px;
height: 150px;
background-image: url("right_repeating_image.jpg");
background-repeat: repeat-x;
background-position: top left;
}

Anahtar doğru etiketti. Ben temelde soldan 0 piksel 131px tekrar tekrar istiyorum istiyorum belirtiyorum.

Bazı bağlamlarda, "% 100 genişlik eksi N piksel" i etkili bir şekilde belirlemek için kenar boşluğu ayarlarından yararlanabilirsiniz. Bu sorunun kabul edilen cevabına bakınız .