Saya memiliki sebuah situs dengan struktur sebagai berikut:
<div id="header"></div>
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
Navigasi di sebelah kiri dan kandungan div adalah di sebelah kanan. Informasi untuk konten div ditarik melalui PHP, jadi itu's yang berbeda setiap waktu.
Bagaimana saya bisa skala navigasi vertikal sehingga tingginya sama seperti kandungan div's tinggi badan, tidak peduli halaman yang dimuat?
Untuk orang tua:
display: flex;
Anda harus menambahkan beberapa prefiks, http://css-tricks.com/using-flexbox/.
Edit: Seperti @Adam Garner mencatat, menyelaraskan-barang: stretch; tidak diperlukan. Penggunaannya juga untuk orang tua, bukan anak-anak. Jika anda ingin mendefinisikan anak-anak peregangan, anda menggunakan menyelaraskan diri.
.parent {
background: red;
padding: 10px;
display:flex;
}
.other-child {
width: 100px;
background: yellow;
height: 150px;
padding: .5rem;
}
.child {
width: 100px;
background: blue;
}
<div class="parent">
<div class="other-child">
Only used for stretching the parent
</div>
<div class="child"></div>
</div>
CATATAN: jawaban Ini berlaku untuk warisan browser tanpa dukungan untuk Flexbox standar. Untuk pendekatan modern, lihat: https://stackoverflow.com/a/23300532/1155721
Saya sarankan anda melihat pada Sama Tinggi Kolom dengan Cross-Browser CSS dan Tidak ada Hacks.
Pada dasarnya, melakukan hal ini dengan CSS di browser yang kompatibel dengan cara ini tidak sepele (tapi sepele dengan tabel) jadi menemukan diri anda yang sesuai pra-dikemas solusi.
Juga, jawabannya bervariasi tergantung pada apakah anda ingin 100% tinggi atau sama tinggi. Biasanya itu's sama tinggi. Jika itu's 100% tinggi jawabannya adalah sedikit berbeda.
Ini adalah masalah frustasi yang's ditangani dengan desainer sepanjang waktu. Kuncinya adalah bahwa anda perlu untuk mengatur ketinggian 100% pada TUBUH dan HTML dalam CSS anda.
html,body {
height:100%;
}
Ini tampaknya sia-sia kode untuk menentukan ke browser yang 100% berarti. Frustasi, ya, tapi ini cara paling sederhana.
Saya menemukan bahwa pengaturan dua kolom untuk display: table-cell;
bukan float: left;
bekerja dengan baik.
Jika anda don't pikiran navigasi div yang dipotong dalam hal yang tak terduga-konten pendek div, ada's setidaknya salah satu cara yang mudah:
#main {
position: relative;
}
#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}
#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}
Elsewise ada's imitasi-kolom teknik.
menggunakan jQuery:
$(function() {
function unifyHeights() {
var maxHeight = 0;
$('#container').children('#navigation, #content').each(function() {
var height = $(this).outerHeight();
// alert(height);
if ( height > maxHeight ) {
maxHeight = height;
}
});
$('#navigation, #content').css('height', maxHeight);
}
unifyHeights();
});
Setelah lama mencari dan mencoba, tidak ada yang memecahkan masalah saya kecuali
style = "height:100%;"
pada anak-anak div
dan untuk orang tua menerapkan ini
.parent {
display: flex;
flex-direction: column;
}
juga, saya menggunakan bootstrap dan ini tidak merusak responsif untuk saya.
height : <persen>
hanya akan bekerja jika anda memiliki semua parent node dengan yang ditentukan persen tinggi dengan tetap tinggi dalam piksel, ems, dll. pada tingkat atas. Dengan cara itu, ketinggian akan cascade ke bawah untuk elemen anda.
Anda dapat menentukan 100% untuk html dan elemen tubuh seperti @Travis yang dinyatakan sebelumnya memiliki tinggi halaman mengalir turun ke node.
Berdasarkan metode yang dijelaskan dalam artikel saya telah dibuat .Kurang dinamis solusi:
Html:
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>
Kurang:
/* Changes these variables to adjust your columns */
@col1Width: 60%;
@col2Width: 1%;
@padding: 0%;
/* Misc variable. Do not change */
@col3Width: 100% - @col1Width - @col2Width;
#container3 {
float: left;
width: 100%;
overflow: hidden;
background-color: red;
position: relative;
#container2 {
float: left;
width: 100%;
position: relative;
background-color: yellow;
right: @col3Width;
#container1 {
float: left;
width: 100%;
position: relative;
right: @col2Width;
background-color: green;
#col1 {
float: left;
width: @col1Width - @padding * 2;
position: relative;
left: 100% - @col1Width + @padding;
overflow: hidden;
}
.col2 {
float: left;
width: @col2Width - @padding * 2;
position: relative;
left: 100% - @col1Width + @padding + @padding * 2;
overflow: hidden;
}
#col3 {
float: left;
width: @col3Width - @padding * 2;
position: relative;
left: 100% - @col1Width + @padding + @padding * 4;
overflow: hidden;
}
}
}
}
Aku tahu itu's been a looong time sejak pertanyaan itu dibuat, tapi saya menemukan solusi yang mudah dan pikiran seseorang bisa menggunakan itu (maaf tentang orang miskin bahasa inggris). Berikut ini kelanjutannya:
CSS
.main, .sidebar {
float: none;
padding: 20px;
vertical-align: top;
}
.container {
display: table;
}
.main {
width: 400px;
background-color: LightSlateGrey;
display: table-cell;
}
.sidebar {
width: 200px;
display: table-cell;
background-color: Tomato;
}
HTML
<div class="container clearfix">
<div class="sidebar">
simple text here
</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.
</div>
</div>
Contoh sederhana. Perhatikan bahwa anda dapat berubah menjadi responsif.
Solusi saya:
$(window).resize(function() {
$('#div_to_occupy_the_rest').height(
$(window).height() - $('#div_to_occupy_the_rest').offset().top
);
});
Jawaban ini tidak ideal lagi karena CSS flexbox dan grid di mana dilaksanakan untuk CSS. Namun hal ini masih bekerja solusi
Pada layar yang lebih kecil, anda mungkin akan ingin untuk menjaga ketinggian auto sebagai col1, col2 dan col3 ditumpuk pada satu sama lain.
Namun setelah media query breakpoint anda ingin cols muncul di samping satu sama lain dengan aplikasi yang sama tinggi untuk semua kolom.
1125 px adalah hanya sebuah contoh dari jendela lebar breakpoint setelah itu anda akan ingin untuk membuat semua kolom yang ditetapkan untuk ketinggian yang sama.
<div class="wraper">
<div class="col1">Lorem ipsum dolor sit amet.</div>
<div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium, possimus sed, debitis amet in, explicabo dolor similique eligendi officia numquam eaque quae illo magnam distinctio odio, esse vero aspernatur.</div>
<div class="col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.</div>
</div>
Anda bisa, tentu saja, mengatur lebih lanjut breakpoints jika anda perlu untuk.
<script>
$(document).ready(function(){
$(window).on('load resize', function() {
let vraperH = $('.wraper').height();
if (window.innerWidth>= 1125) {
$('.col1').height(vraperH);
$('.col2').height(vraperH);
$('.col3').height(vraperH);
}
if (window.innerWidth < 1125) {
$('.col1').height('auto');
$('.col2').height('auto');
$('.col3').height('auto');
}
});
});
</script>
Ada sedikit kontradiksi dalam pertanyaan's judul dan konten. Judul berbicara dari orang tua div, tapi pertanyaannya membuatnya terdengar seperti anda ingin dua saudara div (navigasi dan konten) menjadi sama tinggi.
Apakah anda (a) ingin kedua navigasi dan konten untuk menjadi 100% ketinggian utama, atau (b) navigasi dan konten yang akan menjadi ketinggian yang sama?
I'll berasumsi (b)...kalau begitu, aku don't pikir anda akan mampu melakukan itu mengingat anda saat ini struktur halaman (setidaknya, tidak dengan CSS murni dan tidak ada scripting). Anda mungkin akan perlu untuk melakukan sesuatu seperti:
<main div>
<content div>
<navigation div></div>
</div>
</div>
dan mengatur konten div untuk memiliki margin kiri dengan lebar dari panel navigasi. Dengan cara itu, kandungan's konten ke kanan navigasi dan anda dapat mengatur navigasi div untuk menjadi 100% isi's tinggi.
EDIT: I'm lakukan ini benar-benar di kepala saya, tapi anda mungkin juga perlu untuk mengatur navigasi div's margin kiri untuk nilai negatif atau set's mutlak kiri ke 0 untuk mendorong kembali ke kiri. Masalahnya adalah, ada banyak cara untuk melakukan ini tapi tidak semua dari mereka akan kompatibel dengan semua browser.
Saya memiliki masalah yang sama, bekerja berdasarkan Hakam Fostok's jawaban, aku've dibuat sebuah contoh kecil, dalam beberapa kasus mungkin bekerja tanpa harus menambahkan display: flex;
dan flex-arah: kolom;
pada orang tua wadah
.row {
margin-top: 20px;
}
.col {
box-sizing: border-box;
border: solid 1px #6c757d;
padding: 10px;
}
.card {
background-color: #a0a0a0;
height: 100%;
}
[Mengacu Dmity's lebih Sedikit kode pada jawaban lain] saya'm menebak bahwa ini adalah semacam "pseudo-code"?
Dari apa yang saya mengerti cobalah menggunakan faux-kolom teknik yang harus melakukan trik.
http://www.alistapart.com/articles/fauxcolumns/
Semoga ini bisa membantu :)