Auto-Height su due div affiancati

**FraDesign** · 31-01-2013, 03:58

Buongiorno ragazzi,

sto sviluppando un sito internet e mi sono imbattuto in un problema non facilmente risolvibile credo..
io ho un div contenitore all'interno dei quali ci sono due div uno sinistro e uno destro
il problema sta nel fatto che il contenitore destro ha un bordo per delimitarsi da quello sinistro quindi nel momento in cui il div sinistro sia più lungo di quello destro (causa contenuto) si vedrebbe il bordo spezzato mentre se il div di destra è più lungo su quello di sinistra apparirebbe un colore di sfondo diverso da quello di destra
spero di spiegarmi bene
vorrei sapere se c'è qualche script o qualche modo col css3 di poter modificare l'altezza di un div scegliendo la maggiore tra i due div in questione... ho provato a cercare su google ma gli script che ho trovato non funzionano (probabilmente perchè non sono molto afferrato in materia javascript)
la questione del colore di sfondo è sistemabile con un immagine di sfondo al div contenitore soluzione orribile ma fattibile ... la mia necessità di uno script è per il fatto che ho tra i due div un bordo ...
spero di essermi spiegato il meglio possibile, scusate se non ho creato img illustrative per spiegare meglio

grazie mille in anticipo.. please help me

Francesco

**FraDesign** · 31-01-2013, 07:43

Giusto per cercare di essere di aiuto.. attualmente ho applicato al sito il foglio js di jquery

e un altro foglio chiamato sameheight.js contenente all'interno il seguente script :

var highestCol = Math.max($('wrapleft').height(),$('text').height() );
$('.sameheight').height(highestCol);

wrapleft e text sono i due div che vorrei avessero la stessa altezza considerando il div con altezza maggiorne ..
nel foglio di stile css a tutti e due i div non ho assegnato un campo height
ho inoltre creato nel foglio di stile una class chiamata .sameheight senza alcuna proprieta
questa classe l'ho applicata ai due div interessati
lo script sopra da quello che ho capito inserisce nlella variabile highestCol il valore height più altro tra i due div e poi inserisce il valore come proprietà alla classe .sameheight

non va comunque

**lucavizzi** · 03-02-2013, 15:47

Una soluzione potrebbe essere:

codice:

$(function(){
   if($('#left').height()>$('#right').height()){
      $('#right).css('height',$('#left').height());
   }else{
      $('#left).css('height',$('#right').height());
});

<div id="wrapper">
   <div id="left"></div>
   <div id="right"></div>
</div>

Ma è ancora meno elegante del bg sul wrapper.

**carlomarx** · 03-02-2013, 16:50

Io farei così:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Due div della stessa altezza</title>
<style type="text/css">
#sinistro {
	background-color: #ffcccc;
	float: left;
}

#destro {
	background-color: #ccffcc;
	border-radius: 10px;
	float: right;
	border: 2px #cccccc solid;
}

#sinistro, #destro {
	width: 50%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 5px;
	overflow: hidden;
}

</style>
<script type="text/javascript">
onload = function () {

	var
		oLeftCol = document.getElementById("sinistro"), oRightCol = document.getElementById("destro"),
		nLeftH = oLeftCol.offsetHeight, nRightH = oRightCol.offsetHeight;

	oLeftCol.style.height = oRightCol.style.height = (nLeftH > nRightH ? nLeftH : nRightH) + "px";

};
</script>
</head>

<body>

<h1>Due div della stessa altezza</h1>

<div>
	<div id="sinistro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tellus felis, sagittis sed semper vitae, pellentesque non dui. Duis dignissim dolor sed risus tristique convallis. Etiam posuere dolor nec massa convallis non sagittis dui scelerisque. Mauris nec porttitor lacus. Sed hendrerit porttitor malesuada. Curabitur vitae neque vitae urna laoreet tincidunt. Pellentesque non lacus dui, sit amet pulvinar quam. In eu elit turpis, eget euismod turpis. Sed molestie magna nec justo imperdiet euismod. Aenean viverra euismod dolor, non luctus leo consequat et. Nam a dui sed lorem faucibus vestibulum non posuere mauris. Quisque tristique iaculis nunc, eleifend ultricies dolor molestie vel. Donec suscipit scelerisque risus, eu placerat augue pellentesque nec. Maecenas vel faucibus eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque mauris nisi, scelerisque nec hendrerit nec, posuere eu nibh.</div>
	<div id="destro">Duis porttitor lorem augue. Integer consectetur purus non risus blandit vel bibendum orci condimentum. Nulla vehicula tellus ac nulla iaculis vulputate. Nullam at velit quis nisl ornare scelerisque. Aliquam erat volutpat. Aliquam molestie, libero at lobortis varius, dolor enim bibendum lorem, eu interdum nibh nulla sed nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Suspendisse eleifend velit porta turpis posuere quis ornare orci pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>
</div>

</body>

</html>

Il risultato sarà questo: http://pastehtml.com/view/cr9prft31.html

**FraDesign** · 03-02-2013, 21:29

Grazie mille ragazzi .. alla fine per questioni di tempistica ho optato per il bg su wrapper .. ma terrò queste soluzioni da parte per la prossima volta .. grazie mille ancora veramente

Discussione: Auto-Height su due div affiancati

Strumenti discussione

Ricerca discussione

Visualizza

Auto-Height su due div affiancati

Permessi di invio