Lebar Div 100% dikurangi jumlah piksel tetap

Bagaimana saya bisa mencapai struktur berikut tanpa menggunakan tabel atau JavaScript? Batas putih mewakili tepi divs dan tidak relevan dengan pertanyaan.

Ukuran area di tengah akan bervariasi, tetapi akan memiliki nilai piksel yang tepat dan seluruh struktur harus berskala sesuai dengan nilai-nilai itu. Untuk menyederhanakannya, saya perlu cara untuk mengatur lebar "100% - n px" ke div tengah-atas dan bawah-tengah.

Saya menghargai solusi lintas-browser yang bersih, tetapi jika itu tidak mungkin, peretasan CSS akan dilakukan.

Ini bonusnya. Struktur lain yang telah saya perjuangkan dan akhirnya gunakan tabel atau JavaScript. Ini sedikit berbeda, tetapi memperkenalkan masalah baru. Saya terutama menggunakannya dalam sistem windowing berbasis jQuery, tapi saya ingin menjaga tata letak skrip dan hanya mengontrol ukuran satu elemen (yang tengah).

Anda dapat menggunakan elemen dan padding bersarang untuk mendapatkan tepi kiri dan kanan pada toolbar. Lebar default suatu divelemen adalah auto, yang artinya menggunakan lebar yang tersedia. Anda kemudian dapat menambahkan padding ke elemen dan itu masih tetap dalam lebar yang tersedia.

Berikut adalah contoh yang dapat Anda gunakan untuk menempatkan gambar sebagai sudut bulat kiri dan kanan, dan gambar tengah yang berulang di antara mereka.

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

Cara baru yang baru saja saya temukan: csscalc() :

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

Sumber: lebar css 100% minus 100px

Sementara jawaban Guffa bekerja dalam banyak situasi, dalam beberapa kasus Anda mungkin tidak ingin bantalan kiri dan / atau kanan menjadi induk dari div pusat. Dalam kasus ini, Anda dapat menggunakan konteks pemformatan blok di tengah dan mengapungkan div padding kiri dan kanan. Ini kodenya

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

Saya merasa bahwa hirarki elemen ini lebih alami jika dibandingkan dengan div bersarang bersarang, dan lebih baik mewakili apa yang ada di halaman. Karena itu, batas, bantalan, dan margin dapat diterapkan secara normal ke semua elemen (yaitu: 'naturalitas' ini melampaui gaya dan memiliki konsekuensi).

Perhatikan bahwa ini hanya bekerja pada divs dan elemen lain yang berbagi properti 'isi 100% dari lebar secara default'. Input, tabel, dan mungkin orang lain akan meminta Anda untuk membungkusnya dalam div kontainer dan menambahkan lebih banyak css untuk mengembalikan kualitas ini. Jika Anda cukup beruntung berada dalam situasi itu, hubungi saya dan saya akan menggali css.

jsfiddle di sini: jsfiddle.net/RgdeQ

Nikmati!

Anda dapat menggunakan tata letak Flexbox . Anda perlu mengatur flex: 1pada elemen yang perlu memiliki lebar dinamis atau tinggi untuk flex-direction: row and columnmasing - masing.

Lebar dinamis:

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*/
}

Keluaran:

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

Tinggi dinamis:

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*/
}

Keluaran:

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

Cara biasa untuk melakukannya adalah seperti yang dijelaskan oleh Guffa, elemen bersarang. Agak menyedihkan harus menambahkan markup tambahan untuk mendapatkan kait yang Anda butuhkan untuk ini, tetapi dalam praktiknya pembungkus div di sini atau di sana tidak akan menyakiti siapa pun.

Jika Anda harus melakukannya tanpa elemen tambahan (mis. Ketika Anda tidak memiliki kendali atas markup halaman), Anda dapat menggunakan ukuran kotak , yang memiliki dukungan browser yang lumayan tetapi tidak lengkap atau tidak sederhana. Mungkin lebih menyenangkan daripada harus bergantung pada skrip.

Mungkin saya bodoh, tetapi bukankah meja solusi yang jelas di sini?

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

Cara lain yang saya temukan di chrome bahkan lebih sederhana, tetapi manusia itu hack!

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

Ini saja harus mengisi sisa baris secara horizontal, seperti halnya sel-tabel. Namun, Anda mendapatkan beberapa masalah aneh dengan nilai lebih dari 100% dari induknya, namun menetapkan lebar hingga nilai persentase memperbaikinya.

Kita dapat mencapai ini menggunakan flex-box dengan sangat mudah.

Jika kita memiliki tiga elemen seperti Header, MiddleContainer dan Footer. Dan kami ingin memberikan ketinggian yang tetap untuk Header dan Footer. maka kita bisa menulis seperti ini:

Untuk Bereaksi / RN (standarnya adalah 'display' sebagai flex dan 'flexDirection' sebagai kolom), dalam web css kita harus menentukan wadah atau wadah yang berisi ini sebagai tampilan: 'flex', flex-direction: 'column' seperti di bawah ini:

    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,
    }

bagaimana jika pembungkus div Anda adalah 100% dan Anda menggunakan padding untuk jumlah piksel, maka jika padding # harus dinamis, Anda dapat dengan mudah menggunakan jQuery untuk mengubah jumlah padding Anda saat acara Anda menyala.

Saya memiliki masalah serupa di mana saya ingin spanduk di bagian atas layar yang memiliki satu gambar di sebelah kiri dan gambar yang berulang di kanan ke tepi layar. Saya akhirnya menyelesaikannya seperti ini:

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

Kuncinya adalah tag yang tepat. Saya pada dasarnya menetapkan bahwa saya ingin mengulang dari 131px dari kiri ke 0px dari kanan.

Dalam beberapa konteks, Anda dapat memanfaatkan pengaturan margin untuk secara efektif menentukan "100% lebar minus N piksel". Lihat jawaban yang diterima untuk pertanyaan ini .