Full height

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13307
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

Full height

Δημοσίευση από EneMe » 03 Φεβ 2009 13:02

Έστω ότι έχω μια περιοχή στο site της μορφής

Κώδικας: Επιλογή όλων

<div class="classname"></div>
Πως μπορώ να κάνω αυτή την περιοχή να πιάνει το 100% του ύψους?

Για να μην έχω τέτοιο φαινόμενο:

Κώδικας: Επιλογή όλων

HHHHHHHHHHHHHHHH
HHHHHHHHHHHHHHHH
-------------------
ΑΑΑΑΑ||ΒΒΒΒΒΒΒΒΒΒ
ΑΑΑΑΑ||ΒΒΒΒΒΒΒΒΒΒ
ΑΑΑΑΑ||ΒΒΒΒΒΒΒΒΒΒ
ΑΑΑΑΑ||ΒΒΒΒΒΒΒΒΒΒ
ΑΑΑΑΑ||
ΑΑΑΑΑ||
-------------------
FFFFFFFFFFFFFFFFFF
Δηλαδή στο "σχήμα", το προβληματικό div είναι αυτό με τα ΒΒΒ...

Δεν θέλω να μένει κενό από το τελευταίο περιεχόμενο μέχρι το footer, γιατί κάνει "τρύπα" και φαίνεται η εικόνα φόντου, αντί για το χρώμα του συγκεκριμένου div...

Eλπίζω να καταλάβατε...

sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

Full height

Δημοσίευση από sibas » 03 Φεβ 2009 16:23

Το height στο css είναι από τα πιο δύσκολα κομμάτια υπάρχουν πολλές hackies αλλά θα συνιστούσα να βάλεις ένα επιπλέον div που θα κρατάει το χρώμα ή την εικόνα,

έστω ότι έχεις

Κώδικας: Επιλογή όλων

<div class="left">ΑΑΑΑΑ</div>
<div class="right">ΒΒΒΒΒΒΒΒΒΒ</div>
δοκίμασε να προσθέσεις ένα

Κώδικας: Επιλογή όλων

<div class="hold-color"></div>
το τελικό θα είναι κάπως έτσι

Κώδικας: Επιλογή όλων

<div class="hold-color">
<div class="left">ΑΑΑΑΑ</div>
<div class="right">ΒΒΒΒΒΒΒΒΒΒ</div>
</div>
πρόσθεσε "background-color: transparent" στο div που θέλεις να εμφανίζεται το χρώμα του hold-color

Άβαταρ μέλους
greekbytes
WebDev Moderator
Δημοσιεύσεις: 2438
Εγγραφή: 15 Νοέμ 2002 15:42
Τοποθεσία: Αθήνα
Επικοινωνία:

Full height

Δημοσίευση από greekbytes » 03 Φεβ 2009 16:45

Και αν αυτό το έξτρα div δεν εμφανίζεται ή εμφανίζεται μόνο πάνω πάνω, βάλτου overflow:auto και height:1% (για τον ΙΕ6). Τουτέστιν:

Κώδικας: Επιλογή όλων

.hold-color&#123; overflow&#58;auto; height&#58;1% &#125;
Αν θες να φτιάξεις 2 στήλες διαφορετικού χρώματος που θα φαίνονται και οι 2 σε 100% ύψος -με οποιαδήποτε από τις 2 να είναι "ψηλότερη"-, μπορείς να βάλεις στο ίδιο εξτρα div μία εικόνα 900 x 1 pixels για background που να κάνει "repeat-y". Στα πρώτα 200pixels π.χ. θα έχει το χρώμα της αριστερής στήλης και στα υπόλοιπα το χρώμα της δεξιάς.

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Full height

Δημοσίευση από korgr » 03 Φεβ 2009 17:23

εναλλακτικά βάζεις ένα table και καθάρισες :lol:

sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

Full height

Δημοσίευση από sibas » 03 Φεβ 2009 18:33

από την στιγμή που τα πρώτα div λειτουργούν σωστά τότε το να προσθέσεις ένα άλλο div χωρίς τιμή απλά θα ακολουθεί το μέγεθος και των 2
(εντάξει έχει να κάνει και με τις ρυθμίσεις των πρώτων αλλά δεν είναι και τπτ δύσκολο)
korgr έγραψε:εναλλακτικά βάζεις ένα table και καθάρισες :lol:
η πραγματικότητα είναι ότι τα css σε πολύπλοκα layout είναι δύσκολα αλλά από την στιγμή που τα μάθεις δεν ξαναγυρνάς πίσω.. :victory:

I hate tables :hammer:

Άβαταρ μέλους
tsiger
Honorary Member
Δημοσιεύσεις: 1431
Εγγραφή: 11 Νοέμ 2002 13:40
Τοποθεσία: Thessaloniki Observation Center
Επικοινωνία:

Full height

Δημοσίευση από tsiger » 03 Φεβ 2009 20:18

επισης αν υπαρχει χρωμα πισω απο τη δεξια στηλη μπορεις να παιξεις και με faux columns
http://alistapart.com/articles/fauxcolumns/

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Full height

Δημοσίευση από dimsis » 03 Φεβ 2009 21:53

Η απάντηση - μέχρι να βγει ο ΙΕ 8 - είναι όντως faux columns και είναι η αιτία που είχαμε "μάχη" με τον cherouvim τότε που πάλευα να φτιάξω και εγώ ένα layout με CSS αντί για tables :
http://www.freestuff.gr/forums/viewtopic.php?t=20340

Μέχρι να βγει ο IE8 ... όπου επιστρέφουν τα tables, αλλά ΌΧΙ όπως τα ξέραμε... Το ζουμί:
"Specifying the value table for the display property of an element allows you to display the element αnd its descendants as though they&#8217;re table elements. The main benefit of CSS table-based layouts is the ability to easily define the boundaries of a cell so that we can add backgrounds and so on to it&#8212;without the semantic problems of marking up non-tabular content as a HTML table in the document."

Από το βιβλίο "Everything You Know About CSS is Wrong" που αναφέρεται ακριβώς σε αυτά που έρχονται...

Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13307
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

Full height

Δημοσίευση από EneMe » 04 Φεβ 2009 12:48

Μπερδεύτηκα λίγο, αλλά νομίζω πως κάτι θα καταφέρω...

Αν κάποιος έχει λίγο παραπάνω όρεξη, ας δει την σελίδα και ας πει πώς το βλέπει το θέμα...

http://www.psimoulis.gr/

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες