CSS: Mengatur lebar / tinggi sebagai Persentase minus piksel

Saya mencoba membuat beberapa kelas CSS yang dapat digunakan kembali untuk konsistensi yang lebih baik dan lebih sedikit kekacauan di situs saya, dan saya terjebak dalam mencoba untuk membakukan satu hal yang sering saya gunakan.

Saya memiliki wadah <div>yang tidak ingin saya atur ketinggiannya (karena akan berbeda-beda tergantung di mana situs itu berada), dan di dalamnya ada header <div>, dan kemudian daftar item yang tidak berurutan , semua dengan CSS diterapkan ke mereka.

Ini terlihat sangat seperti ini:

Saya ingin daftar unordered untuk mengambil ruang yang tersisa dalam wadah <div>, mengetahui bahwa header <div>adalah 18pxtinggi. Saya hanya tidak tahu bagaimana menentukan tinggi daftar sebagai "hasil 100%minus 18px".

Saya telah melihat pertanyaan ini ditanyakan dalam beberapa konteks lain pada SO, tetapi saya pikir akan layak untuk bertanya lagi untuk kasus khusus saya. Adakah yang punya saran dalam situasi ini?

Saya menyadari ini adalah posting lama, tetapi mengingat bahwa itu belum disarankan, perlu disebutkan bahwa jika Anda menulis untuk browser yang mendukung CSS3, Anda dapat menggunakan calc:

height: calc(100% - 18px);

Perlu dicatat bahwa tidak semua browser saat ini mendukung fungsi standar CSS3 calc (), jadi mengimplementasikan versi browser spesifik dari fungsi tersebut mungkin diperlukan seperti berikut:

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

Untuk sedikit pendekatan yang berbeda, Anda dapat menggunakan sesuatu seperti ini pada daftar:

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

Ini berfungsi selama wadah induk memiliki position: relative;

Saya menggunakan Jquery untuk ini

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

maka saya mengikat ukuran jendela untuk recalc itu setiap kali jendela browser diubah ukurannya (jika ukuran kontainer diubah dengan ukuran jendela)

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

Jangan mendefinisikan tinggi sebagai persentase, cukup atur top=0dan bottom=0, seperti ini:

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

Menganggap tinggi header 17px

Daftar css:

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

Header css:

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

1. Gunakan margin negatif pada elemen yang ingin Anda kurangi pikselnya. (elemen yang diinginkan)
2. Buat overflow:hidden;pada elemen yang mengandung
3. Beralih ke overflow:auto;elemen yang diinginkan.

Itu berhasil untuk saya!

Coba ukuran kotak. Untuk daftar:

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;

Untuk tajuk:

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

Tentu saja, wadah induk harus memiliki sesuatu seperti:

position: relative;

Cara lain untuk mencapai tujuan yang sama: kotak fleksibel . Jadikan wadah sebagai kotak fleksibel kolom, dan kemudian Anda memiliki semua kebebasan untuk memungkinkan beberapa elemen memiliki ukuran tetap (perilaku default) atau untuk mengisi / mengecilkan ke ruang wadah (dengan pertumbuhan-tumbuh: 1 dan lentur- menyusut: 1).

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

Lihat https://jsfiddle.net/2Lmodwxk/ (coba perpanjang atau kurangi jendela untuk melihat efeknya)

Catatan: Anda juga dapat menggunakan properti singkatan:

   flex:1 1 auto;

Saya mencoba beberapa jawaban lain, dan tidak ada yang bekerja seperti yang saya inginkan. Situasi kami sangat mirip dengan header jendela dan jendela dapat diubah ukurannya dengan gambar di badan jendela. Kami ingin mengunci rasio aspek dari pengubahan ukuran tanpa perlu menambahkan perhitungan untuk memperhitungkan ukuran tetap dari header dan masih memiliki gambar yang mengisi tubuh jendela.

Di bawah ini saya membuat cuplikan yang sangat sederhana yang menunjukkan apa yang akhirnya kami lakukan yang tampaknya bekerja dengan baik untuk situasi kami dan harus kompatibel di sebagian besar browser.

Pada elemen jendela kami, kami menambahkan margin 20px yang berkontribusi pada penentuan posisi relatif terhadap elemen lain di layar, tetapi tidak berkontribusi pada "ukuran" jendela. Window-header kemudian diposisikan secara absolut (yang menghilangkannya dari aliran elemen lain, sehingga tidak akan menyebabkan elemen lain seperti daftar yang tidak berurutan digeser) dan atasnya diposisikan -20px yang menempatkan header di dalam margin dari jendela. Akhirnya elemen ul kami ditambahkan ke jendela, dan tingginya dapat diatur ke 100% yang akan membuatnya mengisi tubuh jendela (tidak termasuk margin).

*,*: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>

Terima kasih, saya menyelesaikan masalah saya dengan bantuan Anda, mengubahnya sedikit karena saya ingin div 100% lebar 100% heigth (kurang tinggi dari bilah bawah) dan tidak ada gulir di badan (tanpa peretasan / menyembunyikan bilah gulir).

Untuk CSS:

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

Untuk HTML:

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

Itu berhasil, oh ya saya menaruh nilai sedikit lebih hebat pada div.adjusted untuk bottom daripada untuk bottom bar tinggi, kalau tidak scrollbar vertikal muncul, saya disesuaikan menjadi nilai terdekat.

Perbedaannya adalah karena salah satu elemen di area dinamis adalah menambahkan lubang bawah tambahan yang saya tidak tahu bagaimana cara menghilangkannya ... itu adalah tag video (HTML5), harap dicatat saya meletakkan tag video itu dengan css ini ( jadi tidak ada alasan untuk itu membuat lubang bawah, tetapi itu memang):

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

Tujuannya: Memiliki video yang mengambil 100% browser (dan mengubah ukuran secara dinamis ketika browser diubah ukurannya, tetapi tanpa mengubah rasio aspek) kurang ruang bawah yang saya gunakan untuk div dengan beberapa teks, tombol, dll (dan validator w3c & css tentu saja).

EDIT: Saya menemukan alasannya, tag video seperti teks, bukan elemen blok, jadi saya memperbaikinya dengan css ini:

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

Perhatikan display:block;tag pada video.

Saya tidak yakin apakah ini berfungsi dalam situasi khusus Anda, tetapi saya telah menemukan bahwa bantalan pada div bagian dalam akan mendorong konten di dalam div jika div yang berisi ukuran tetap. Anda harus mengapung atau benar-benar memposisikan elemen header Anda, tetapi jika tidak, saya belum mencoba ini untuk div ukuran variabel.