jak zmienić wysokość div dynamicznie na podstawie innego div przy użyciu css?

tutaj jest mój kodjak zmienić wysokość div dynamicznie na podstawie innego div przy użyciu css?

HTML:

<div class="div1"> 
    <div class="div2"> 
    Div2 starts <br /><br /><br /><br /><br /><br /><br /> Div2 ends 
    </div> 
    <div class="div3"> 
    Div3 
    </div> 
</div>

CSS:

.div1 { 
    width: 300px; 
    height: auto; 
    background-color: grey; 
    border: 1px solid; 
    overflow: auto; 
} 

.div2 { 
    width: 150px; 
    height: auto; 
    background-color: #F4A460; 
    float: left; 
} 

.div3 { 
    width: 150px; 
    height: auto; 
    background-color: #FFFFE0; 
    float: right; 
}

chcę zwiększyć wysokość div3 dynamicznie.

na przykład, jeśli wysokość elementu div1 wynosi 500 pikseli, wówczas wysokość elementu div3 powinna wynosić 500 pikseli. Wiem, że mogę używać dziedziczenia, ale rzecz jest wysokość div1 jest auto, więc nie pomoże. tutaj jest moje skrzypce http://jsfiddle.net/prashusuri/E4Zgj/1/ jak to zrobić?

dzięki

Źródło

2013-01-10 Prashanth Suriyanarayanan

To skomplikowane, używając tylko CSS. Istnieje wiele metod, możesz sprawdzić niektóre z nich [tutaj] (http://css-tricks.com/fluid-width-equal-height-columns/). Jeśli możesz używać javascript (lub idealnie, jQuery), to staje się łatwiejsze – scumah

@scumah sprawdź moją odpowiedź. –

Więc chcesz kolumny o tej samej wysokości? – cimmanon

#container-of-boxes { 
    display: table; 
    width: 1158px; 
} 
#box-1 { 
    width: 578px; 
} 
#box-2 { 
    width: 386px; 
} 
#box-3 { 
    width: 194px; 
} 
#box-1, #box-2, #box-3 { 
    min-height: 210px; 
    padding-bottom: 20px; 
    display: table-cell; 
    height: auto; 
    overflow: hidden; 
}

Pojemnik musi mieć wyświetlacz: stół
Skrzynki wewnątrz pojemnika musi być: display: table-cell
Nie kładź pływaków.

Źródło

2013-10-07 09:52:25 cosacu

określając pozycje możemy to osiągnąć,

.div1 { 
    width:300px; 
    height: auto; 
    background-color: grey; 
    border:1px solid; 
    position:relative; 
    overflow:auto; 
} 
.div2 { 
    width:150px; 
    height:auto; 
    background-color: #F4A460; 
    float:left; 
} 
.div3 { 
    width:150px; 
    height:100%; 
    position:absolute; 
    right:0px; 
    background-color: #FFFFE0; 
    float:right; 
}

ale to nie jest możliwe, aby osiągnąć to za pomocą pacy.

Źródło

2013-01-10 12:30:28

Staraj się zachować spójność w kodzie: opisałeś powyżej 'color' jako' grey', a następnie użyłeś symboli do reprezentowania kolorów. – user2567857

Chociaż moje działa. Odpowiedź dostarczona przez @cosacu jest lepszym rozwiązaniem. –

Nie wierzę, że można to osiągnąć dzięki css. Pierwotnie zaprojektowano do tego javascript. Spróbuj tego:

<div class="div1" id="div1"> 
    <div class="div2"> 
    Div2 starts <br /><br /><br /><br /><br /><br /><br /> 
    Div2 ends 
    </div> 
    <div class="div3" id="div3"> 
    Div3 
    </div> 
</div>

i funkcji javascript:

function adjustHeight() { 
    document.getElementById('div3').style.height = document.defaultView.getComputedStyle(document.getElementById('div1'), "").getPropertyValue("height"); 
}

zadzwoń javascript po div1 (lub całej strony) jest załadowany.

Możesz także zastąpić document.getElementById ('div3'). Style.height z kodem manipulującym klasa div3, ponieważ mój kod tylko dodaje/zmienia atrybut stylu elementu.

Mam nadzieję, że to pomoże.

Źródło

2013-01-10 12:39:59 WrongASP

nie możemy tego zrobić z css. po prostu sprawdź moją odpowiedź. –

@Prashanth - O ile jest to możliwe przy ustalonych wysokościach lub CSS3 z potencjalnie szkicową obsługą (display: table, flex-box), to nie wtedy, gdy wysokości są dynamiczne i używasz pływaków (i we wszystkich przypadkach prawdopodobnie potrzebujesz pewnej ilości wsparcia JS, aby wszystko było dynamiczne i/lub obsługiwane we wszystkich odpowiednich przeglądarkach). [Dlatego właśnie faux-kolumny istnieją już od prawie dziesięciu lat.] (Http://www.alistapart.com/articles/fauxcolumns/) – Shauna

@Shauna szkicowe wsparcie? IE8 + ma stabilną obsługę 'display: table', wraz z każdą inną wersją przeglądarki wydaną w ciągu ostatnich 5 lat. – cimmanon

Najprostszym sposobem, aby uzyskać równe kolumny wysokości, bez brzydkich skutków ubocznych, które przychodzą wraz z pozycjonowania bezwzględnego, jest użycie display: table właściwości:

.div1 { 
    width:300px; 
    height: auto; 
    background-color: grey; 
    border:1px solid; 
    display: table; 
} 

.div2, .div3 { 
    display: table-cell; 
} 
.div2 { 
    width:150px; 
    height:auto; 
    background-color: #F4A460; 

} 
.div3 { 
    width:150px; 
    height:auto; 
    background-color: #FFFFE0; 
}

http://jsfiddle.net/E4Zgj/21/

Teraz, jeśli Twoim celem jest posiadanie .div2, tak aby był tylko tak wysoki, jak powinien zawierać zawartość, podczas gdy .div3 jest co najmniej tak wysoki, jak .div2, ale wciąż może się rozwijać, jeśli jego zawartość sprawia, że jest wyższy niż .div2, wtedy musisz użyć Flexbox. Obsługa Flexboksa jeszcze nie istnieje (IE10, Opera, Chrome, Firefox podąża za starą specyfikacją, ale wkrótce podąża za aktualną specyfikacją).

.div1 { 
    width:300px; 
    height: auto; 
    background-color: grey; 
    border:1px solid; 
    display: flex; 
    align-items: flex-start; 
} 

.div2 { 
    width:150px; 
    background-color: #F4A460; 
} 

.div3 { 
    width:150px; 
    background-color: #FFFFE0; 
    align-self: stretch; 
}

http://jsfiddle.net/E4Zgj/22/

Źródło

2013-01-10 13:30:12 cimmanon

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<!-- Here is the Pakka codes for making the height of a division equal to another dynamically - M C Jain, Chartered Accountant --> 

<script language="javascript"> 
function make_equal_heights() 
{ 


if ((document.getElementById('div_A').offsetHeight) > (document.getElementById('div_B').offsetHeight)) 
{ 
document.getElementById('div_B').style.height = (document.getElementById('div_A').offsetHeight) + "px"; 
} 
else 
{ 
document.getElementById('div_A').style.height = (document.getElementById('div_B').offsetHeight) + "px" 
} 


} 
</script> 

</head> 

<body style="margin:50px;" onload="make_equal_heights()"> 

<div id="div_A" style="height:200px; width:150px; margin-top:22px; 
         background-color:lightblue;float:left;">DIVISION A</div><br> 

<div id="div_B" style="height:150px; width:150px; margin-left:12px; 
         background-color: blue; float:left; ">DIVISION B</div> 

</body> 
</html>

Źródło

2013-11-22 11:10:18

W ten kawałek kodu wysokość lewym panelu będą zostaje dostosowana do wysokości prawego panelu dynamicznie ...

function resizeDiv() { 
var rh=$('.pright').height()+'px'.toString(); 
$('.pleft').css('height',rh); 
}

Można spróbować to tutaj http://jsfiddle.net/SriharshaCR/7q585k1x/9/embedded/result/

Źródło

2015-01-12 15:24:15

Flex odpowiedź

.div1 { 
    width:300px; 
    background-color: grey; 
    border:1px solid; 
    overflow:auto; 
    display: flex; 
} 
.div2 { 
    width:150px; 
    background-color: #F4A460; 
} 
.div3 { 
    width:150px; 
    background-color: #FFFFE0; 
}

Sprawdź skrzypce pod http://jsfiddle.net/germangonzo/E4Zgj/575/

Źródło

2017-10-13 23:02:56

jak zmienić wysokość div dynamicznie na podstawie innego div przy użyciu css?

Odpowiedz

Powiązane problemy