προβλημα με height στο css

[antonisid]

Καλημερα,έχω ενα προβληματα με μια σελιδα που φτιαχνω και δε μου ρχεται καποια λυση στο νου,λοιπον:

 

Εστω οτι εχω ενα div το οποιο δεν εχει σταθερο ύψος,παιρνει αναλογα ποσα αρθρα θα ειναι στην μπροστα σελιδα σε Joomla.

Μέσα στο div αυτο περικλειεται ένα αλλο div με float:right το οποιο περιεχει καποιες πληροφοριες πχ για τον καιρο για εκδηλωσεις κτλ κι εχει πολυ μικροτερο ύψος , καθως κι ένα σκιασμενο background με repeat-y κατι σαν border-left.

Εδω ειναι το προβλημα,αυτο το border θελω να φτανει μεχρι και το τελευταιο άρθρο,άρα πρεπει να παιρνει και το υψος του div που περικλειεται.Εδω ειναι και ο κωδικας που αφορα το σημειο αυτο.

 

#content {

float:right;

width:749px;

margin-left:2px;

margin-right:2px;

}

 

#right_bar {

float:right;

width:200px;

background:url(../images/right-column.png) top left repeat-y;

}

 

Καμμια ιδεα?

[fromaz]

Δοκίμασες height:100% και δεν παίζει?

[antonisid]

Δοκίμασες height:100% και δεν παίζει?

 

Ναι δυστυχώς!!!

[fromaz]

Έ, τότε, βάλε το background στο content... Από τη στιγμή που παίζεις με px, μπορείς να φέρεις τη γραμμή σου εκεί που θέλεις.

[antonisid]

το content εχει αλλο background,απλα δε το γραψα πριν στον κωδικα απο λαθος μου.υποψιαζομαι μηπως πρεπει να κανω clear τα floats me αυτο:

 

<div style="clear:both;"></div>

[fromaz]

Υπάρχουν τουλάχιστον 10 τρόποι για να κάνεις αυτό που θέλεις. Που θα πάει, θα σε πετύχω.

 

- προσθέτεις στο στυλ του #content "position:relative"

- προσθέτεις στο markup του #content "<div id="bar"></div>" (βάλτο στην αρχή)

- φτιάχνεις το στυλ του bar

 

>
#bar
{
position: absolute;
width: ?px; (όσο είναι το bg σου)
height: 100%;
right: 200px;
background: url(../images/right-column.png) top left repeat-y;
}

[macabre_sunsets]

Ίσως το ακόλουθο link σε βοηθήσει : http://www.webmasterworld.com/forum83/200.htm

 

Αναφέρει ότι πρέπει και το parent element να έχει height: 100%, καθώς επίσης και το body element.

 

Επίσης, ένας εναλλακτικός τρόπος εκτός από css, είναι να μπλέξεις με javascript και να καθορίζεις το ύψος του div "δυναμικά".

>document.getElementById('το_div_σου_εδώ').style.height; 

[antonisid]

σας ευχαριστω και τους δυό σας πολύ,θα δοκιμάσω αυτά που μου είπατε κι επανέρχομαι για τ αποτελεσματα !!!

[antonisid]

Τελικα το εκανα με Javascript και λειτουργει αψογα:

<script type="text/javascript">

function fixH(one,two) {

if (document.getElementById(one)) {

var lh=document.getElementById(one).offsetHeight;

var rh=document.getElementById(two).offsetHeight;

var nh = Math.max(lh, rh);

document.getElementById(one).style.height=nh+"px";

document.getElementById(two).style.height=nh+"px";

}

}

function byez(three,four) {

if (document.getElementById(three)) {

var left=document.getElementById(three).offsetHeight;

var right=document.getElementById(four).offsetHeight;

var noth = Math.max(left, right);

var i = 30;

document.getElementById(three).style.height=i+noth+"px";

document.getElementById(four).style.height=noth+"px";

}

}

window.onload=function(){

byez('right_bar','content');

fixH('left_side','wrap');

}

</script>

 

Παρολ αυτα Formaz (ή οποιοςδηποτε θελησει) αν εχεις κι αλλη ιδεα για το πως γινεται με css εκτος απ αυτη που ανεφερες,πες την για να εχουμε κι εναλλακτικη λυση σε αντιστοιχη περιπτωση που θα τυχει στο μέλλον

[el07694]

Παίδες αν και παλιό το topic ανεβάζω λύση να υπάρχει..

Λοιπόν, έχεις 3 divs

α)mainarea

β)contentarea

γ)footer

το α) απλά περιλαμβάνει τα β) και γ)

Πιθανή δομή του α)

>#mainarea {
width:860px;
clear:both;
padding-left:40px;
}

 

Πιθανή δομή β)

>#contentarea {
width:525px;
padding-right:30px;
float:left;
line-height:14pt;
padding-bottom:10px;
}

 

Πιθανή δομή γ)

>#sidebar {
float:left;
width:275px;
line-height:14pt;
}

Λογικά κάτι τέτοιο πρέπει να δουλέψει το σημείο που πρέπει να δώσεις προσοχή είναι: α) clear:bo:shifty:th; και τα 2 float..Προσοχή..!!Το άθροισμα των widths ΤΩΝ εμφωλευμένων divs δεν πρέπει να ξεπερνάει αυτό του α)