Lebar Div 100% dikurangi jumlah piksel tetap


316

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

Struktur 1

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

Struktur 2


Untuk elemen kedua, Anda mengatakan Anda ingin ketinggian elemen tengah diperbaiki, tetapi elemen lain di dekatnya menjadi dinamis
Casebash

Jawaban:


78

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

Terima kasih untuk itu. Saya harus mengubah sedikit untuk situasi saya. Div bersarang pertama membutuhkan margin-kanan bukan padding, dan div tengah juga membutuhkan margin kanan yang sama.
Maks.

3
Solusi bagus hanya hal kecil -> ini bekerja karena ".eader div div" menimpa ".eader div" . Seharusnya ".Header> div" dan ".Header> div> div" sebagai gantinya. Memang, ".Header div" berarti setiap anak div atau anak sub div sedangkan ".Header> div" berarti hanya anak-anak langsung dari .Header
Charles HETIER

@CharlesHETIER: Ya, itu juga berfungsi, dan lebih mudah digunakan karena Anda tidak harus mengabaikan semua pengaturan aturan yang kurang spesifik. Jawabannya ditulis ketika dukungan untuk >operator masih belum cukup baik untuk dapat diandalkan.
Guffa

1
Ini sudah ketinggalan zaman, lihat jawaban di bawah ini tentang fungsi calc pada css.
María Arias de Reyna Domínguez

2
@delawen: Anda harus menunggu beberapa saat sebelum usang. Tidak ada dukungan untuk calcdi IE 8, atau versi Anroid Browser atau Opera saat ini. caniuse.com/#search=calc
Guffa

760

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


86
Jawaban terbaik pada 2013 IMHO. Jawaban yang diterima sudah usang.
Danubian Sailor

7
Sudah saatnya seseorang menemukan ini. Saya selesai dengan peretasan sekarang karena saya tahu ini. +1 @lechlukasz
preahkumpii

47
Setelah 10 tahun berjuang CSS jawaban ini layak +20000! Masih tidak percaya dengan mata saya ...
skobaljic

8
Yang bisa saya katakan adalah ini ... youtube.com/…
Jazz

5
Lebih kompatibel? -> $ ('# yourEl'). css ('lebar', '100%'). css ('lebar', '- = 100px'); (jQuery)
sboy031

7

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!


6

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:


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:


3

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.


3

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.


2

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

1

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.


1

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.


0

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.