Am un site cu următoarea structură:
<div id="header"></div>
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
Navigarea este pe stânga și conținutul div este pe dreapta. Informațiile pentru conținutul div este tras prin PHP, deci's diferit de fiecare dată.
Cum pot scala de navigare pe verticală, astfel încât înălțimea sa este aceeași ca și conținutul div's înălțime, indiferent de pagina pe care este încărcat?
Pentru părinte:
display: flex;
Tu ar trebui să adăugați unele prefixe, http://css-tricks.com/using-flexbox/.
Edit: Ca @Adam Garner a remarcat, aliniați-elemente: stretch; nu este necesară. Utilizarea sa este, de asemenea, pentru mamă, nu copii. Dacă doriți să definiți copii stretching, utilizați aliniați-auto.
.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>
NOTĂ: Acest răspuns este aplicabilă moștenirii browsere fără sprijinul pentru Flexbox standard. Pentru o abordare modernă, a se vedea: https://stackoverflow.com/a/23300532/1155721
Vă sugerez să luați o privire la Înălțime Egală Coloane cu Cross-Browser CSS și Nu Hacks.
De fapt, a face acest lucru cu CSS într-un browser compatibil fel nu este banal (dar banal, cu mese), astfel încât găsi un adecvat pre-ambalate soluție.
De asemenea, răspunsul variază în funcție de dacă doriți 100% înălțime sau de înălțime egală. De obicei's de înălțime egală. Daca's 100% înălțimea răspunsul este ușor diferită.
Aceasta este o problemă de frustrant ca's tratate cu designeri tot timpul. Trucul este că aveți nevoie pentru a seta înălțimea la 100% pe CORP și HTML în CSS.
html,body {
height:100%;
}
Acest aparent fără sens, codul este de a defini la browser-ul de 100% înseamnă. Frustrant, da, dar este cel mai simplu mod.
Găsesc că stabilirea de cele două coloane pentru a display: table-cell; "în loc de" float: stânga;
functioneaza foarte bine.
Dacă tu nu't mintea navigare div fiind atins în cazul unui mod neașteptat-conținutul pe scurt div, acolo's cel puțin o modalitate ușoară:
#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 */
}
Altfel nu's faux-coloane tehnica.
folosind 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();
});
Dupa lungi cautari si incearca, nimic nu a rezolvat problema mea cu excepția
style = "height:100%;"
pe copii div
și pentru mamă a aplica această
.parent {
display: flex;
flex-direction: column;
}
de asemenea, eu sunt, folosind bootstrap și acest lucru nu a corupte sensibil pentru mine.
înălțime : <la sut>
va funcționa doar dacă aveți toate nodurile părinte cu specificate la sută înălțime, cu o înălțime fixă în pixeli, ems, etc. pe nivelul de sus. În acest fel, înălțimea va fi organizată în elementul tău.
Puteți specifica 100% la html si elemente de caroserie ca @Travis a declarat mai devreme pentru a avea înălțimea paginii cascadă în jos la noduri.
Pe baza metodei descrise în aceasta articolul am creat .Mai puțin dinamică soluție:
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>
Mai puțin:
/* 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;
}
}
}
}
Știu că's a fost o lungă de timp, deoarece întrebarea a fost făcut, dar am găsit o soluție simplă și am crezut că cineva ar putea folosi (îmi pare rău pentru săraci engleză). Aici merge:
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>
Exemplu simplu. Rețineți că puteți transforma într-capacitatea de reacție.
Soluția mea:
$(window).resize(function() {
$('#div_to_occupy_the_rest').height(
$(window).height() - $('#div_to_occupy_the_rest').offset().top
);
});
Acest răspuns nu este ideal, deoarece orice mai CSS flexbox și de rețea în cazul în care puse în aplicare pentru a CSS. Cu toate acestea, este încă o soluție de lucru
Pe un ecran mai mic, probabil că ar vrea să păstreze înălțimea auto ca col1, col2 și col3 sunt stivuite unul pe altul.
Cu toate acestea, după o interogare mass-media breakpoint-ai dori cols să apară unul lângă celălalt, cu o înălțime egală pentru toate coloanele.
1125 px este doar un exemplu de lățimea ferestrei punct de întrerupere, după care ar vrea să facă toate coloanele setat la aceeași înălțime.
<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>
Ai putea, desigur, a stabilit mai multe puncte de întrerupere, dacă aveți nevoie să.
<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>
Există un pic de o contradicție în cauză's titlu și conținut. Titlul vorbește de un părinte div, dar întrebarea sună ca și cum ai vrea doi frați divs (navigare și conținut) pentru a fi la aceeași înălțime.
Ai (o) doresc atat de navigare și conținut pentru a fi 100% înălțimea principal, sau (b) doresc navigare și conținut să fie aceeași înălțime?
Am'll presupune (b)...daca e asa, eu nu't cred că va fi capabil să o facă având în vedere actuala structură a paginii (cel puțin, nu cu pure CSS și nu de scripting). Tu, probabil, ar trebui să faci ceva de genul:
<main div>
<content div>
<navigation div></div>
</div>
</div>
și a stabilit conținutul div pentru a avea o marja de stânga de orice lățime a panoului de navigare este. În acest fel, conținutul's de conținut este la dreapta de navigare și puteți seta de navigare div a fi de 100% din conținutul's înălțime.
EDIT: am'm a face acest lucru complet în capul meu, dar tu ar fi, probabil, de asemenea, trebuie să setați navigare div's de marginea din stânga la o valoare negativă sau setați-l's absolută plecat de la 0 pentru a împinge-l înapoi la extrema stângă. Problema este, există multe moduri de a trage acest off dar nu toate dintre ele sunt de gând să fie compatibil cu toate browserele.
Am avut aceeasi problema, a functionat pe baza Hakam Fostok's a răspunde, am'am creat un mic exemplu, în unele cazuri, s-ar putea lucra fără a fi nevoie să adăugați display: flex;
și flex-direcție: coloană;
pe containerul părinte
.row {
margin-top: 20px;
}
.col {
box-sizing: border-box;
border: solid 1px #6c757d;
padding: 10px;
}
.card {
background-color: #a0a0a0;
height: 100%;
}
[Referindu-se la Dmity's mai Puțin de cod într-un alt răspuns] I'm ghicitul că acesta este un fel de "pseudo-codul"?
Din ce am inteles încercați să utilizați faux-coloane tehnica pe care ar trebui să facă truc.
http://www.alistapart.com/articles/fauxcolumns/
Sper că acest lucru ajută :)