Πρόβλημα με height των divs.

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

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

Απάντηση
g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

Πρόβλημα με height των divs.

Δημοσίευση από g_p » 05 Μαρ 2011 09:34

Γεια σας,

εχω πρόβλημα με το ύψος των divs.
Έχω ένα container div το οποίο περιέχει μέσα τρία άλλα divs τα οποία
δεν "ξεχειλώνουν" στο ύψος ,όταν κάποιο από τα διπλανά τους έχει μεγαλύτερο ύψος.
Το τρίτο μπλε div έχει το μεγαλύτερο ύψος.
Τα άλλα δύο όμως δεν προσαρμόζονται στο ύψος του τρίτου, γιατί όμως?
Πώς θα μπορούσαν τα div να προσαρμόζονται στο ύψος πάντα του μεγαλύτερου
έτσι ώστε να έχουν ομοιόμορφο ύψος??

Παραθέτω τον κώδικα παρακάτω

Ευχαριστώ

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

<html>
<head>
<title>TEst divs</title>
</head>
<body>

<div style="width&#58;960px;border&#58;1px solid yellow">

<div style="float&#58;left;width&#58;300px;background-color&#58;green">
	Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>
</div>
<div style="float&#58;left;width&#58;300px;background-color&#58;orange">
	Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>
</div>
<div style="float&#58;left;width&#58;300px;background-color&#58;blue">
	Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>
	Tst Test TEst Test Test <br/>
</div>
<div style="clear&#58;both">
</div>
</div>

</body>
</html>

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

Πρόβλημα με height των divs.

Δημοσίευση από dimsis » 05 Μαρ 2011 10:14

http://matthewjamestaylor.com/blog/equa ... s-no-hacks
θα το βρεις και ως "faux columns" π.χ. http://www.alistapart.com/articles/fauxcolumns/

το θέμα έχει συζητηθεί πολλές φορές και από προσωπική εμπειρία πιστεύω πως κυρίως οι χρήστες που έχουν μάθει να δουλεύουν με table layouts ψάχνουν να κάνουν κάτι τέτοιο (που γίνετε με ένα table με 3 td για ένα απλό τρίστηλο).
Αν μπει κανείς στην λογική των div και των floats και το πως μπορεί να στηθεί το layout με αυτά, μετά δεν ψάχνεις καν για τέτοιες λύσεις.

Να το πω και αλλιώς. Σκέψου γιατί θεωρείς απαραίτητο να έχουν ίδιο ύψος τα divs σου και προσπάθησε να βρεις άλλο τρόπο χωρίς να είναι πλέον απαραίτητο.

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

Πρόβλημα με height των divs.

Δημοσίευση από korgr » 05 Μαρ 2011 11:29

Παρ' όλα αυτά, αν υπάρξει ανάγκη για τέτοια ιδιαιτερότητα σε οποιοδήποτε σημείο του layout, το θεωρώ εντελώς ηλίθιο να ακολουθήσεις μια τόσο σύνθετη μέθοδο με divs αντί για ένα γρήγορο και καθαρό table με css
Κάποτε το επιχείρημα ήταν εκτός των άλλων, το πόσο λίγοτερος κώδικας χρειάζεται το tableless. Τώρα άντε σύγκρινε την μέθοδο στο ανωτέρω link

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

<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>


Και το CSS&#58;

    float&#58;left;
    width&#58;100%;
    background&#58;green;
    overflow&#58;hidden;
    position&#58;relative;
&#125;
#container2 &#123;
    float&#58;left;
    width&#58;100%;
    background&#58;yellow;
    position&#58;relative;
    right&#58;30%;
&#125;
#container1 &#123;
    float&#58;left;
    width&#58;100%;
    background&#58;red;
    position&#58;relative;
    right&#58;40%;
&#125;
#col1 &#123;
    float&#58;left;
    width&#58;26%;
    position&#58;relative;
    left&#58;72%;
    overflow&#58;hidden;
&#125;
#col2 &#123;
    float&#58;left;
    width&#58;36%;
    position&#58;relative;
    left&#58;76%;
    overflow&#58;hidden;
&#125;
#col3 &#123;
    float&#58;left;
    width&#58;26%;
    position&#58;relative;
    left&#58;80%;
    overflow&#58;hidden;
&#125;
με το

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

<table id="my_columns">
<tr>
<td class="first"></td>
<td class="second"></td>
<td class="third"></td>
</tr>
</table>

και το CSS&#58;

#my_columns&#123;
	width&#58;100%;
&#125;
.first&#123;
background&#58; yellow;
width&#58; 30%;	
&#125;
.second&#123;
background&#58; green;
width&#58; 40%;	
&#125;
.third&#123;
background&#58; red;
width&#58; 30%;	
&#125;

Άβαταρ μέλους
Banavas
Script Master
Δημοσιεύσεις: 1367
Εγγραφή: 21 Νοέμ 2004 20:25
Επικοινωνία:

Πρόβλημα με height των divs.

Δημοσίευση από Banavas » 06 Μαρ 2011 10:18

Υπάρχει απλός τρόπος για την αντιμετώπιση του προβλήματος και χωρίς tables. (δεν ξέρω αν τον κάλυψε ο dimsis γιατι δεν ακολούθησα όλα τα link).

Βάλε τρεις (ή όσες θέλεις) κολώνες μέσα σε ένα conteiner χωρίς κανένα background. Βάλε background στο conteiner. Αυτό το background πρέπει να είναι μια γραμμή με τα επιθυμητά χρώματα των στηλών στο κατάλληλο μέγεθος το ένα δίπλα στο άλλο και επανάληψη προς τα κάτω.
Παρότι οι διάφορες κολώνες δεν θα έχουν το ίδιο μήκος το οπτικό αποτέλεσμα θα είναι το ζητούμενο.
Happy coding....
Μάρκος
http://lasernet.gr

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

Πρόβλημα με height των divs.

Δημοσίευση από korgr » 06 Μαρ 2011 10:53

Ναι υπάρχει και αυτή η λύση αλλά σε δεσμεύει σε αυστηρό πλάτος των στηλών. Μην ξεχνάς πως το παράδειγμα αναφέρεται σε % πλάτη
Με table μπορεί μια στήλη λόγω περιεχομένου να αναπροσαρμοστεί η κατανομή πλάτους και αυτό που δηλώθηκε 30-40-30% να γίνει στην πράξη 25-50-25% επειδή το απαιτούν οι περιστάσεις (πχ το μέγεθος μιας φωτογραφίας)

Άβαταρ μέλους
Banavas
Script Master
Δημοσιεύσεις: 1367
Εγγραφή: 21 Νοέμ 2004 20:25
Επικοινωνία:

Πρόβλημα με height των divs.

Δημοσίευση από Banavas » 06 Μαρ 2011 11:37

Ναι έχεις δίκιο. Δεν πρόσεξα το %. Σαφώς η χρήση του πίνακα είναι η πιο πρακτική για την περίπτωση και την χρησιμοποιώ και εγώ αρκετές φορές.
Happy coding....
Μάρκος
http://lasernet.gr

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

Πρόβλημα με height των divs.

Δημοσίευση από Sermac » 20 Μαρ 2011 15:46

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

<!DOCTYPE html>
<html>
    <head>
        <title>Faux Columns by Sermac</title>
        <style type="text/css">  
            #columns &#123;
                position&#58;relative;
                height&#58;300px;
            &#125;
            
            #columns .col &#123;
                position&#58;absolute;
                top&#58;0;
                bottom&#58;0;           /* or height&#58;100%; */
                float&#58;left;
                width&#58;300px;
                overflow&#58;hidden;
            &#125;
            
            #col-1 &#123;
                background-color&#58;#88FF6B;
                left&#58;0;
            &#125;
            
            #col-2 &#123;
                background-color&#58;#FFD35B;
                left&#58;300px;
            &#125;
            
            #col-3 &#123;
                background-color&#58;#5BA7FF;
                left&#58;600px;
            &#125;
        </style>
    </head>
    <body>
        <div id="columns">
            <div id="col-1" class="col">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </div>
            <div id="col-2" class="col">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                when an unknown printer took a galley of type and scrambled it to make a 
                type specimen book. It has survived not only five centuries, but also the 
                leap into electronic typesetting, remaining essentially unchanged.
            </div>
            <div id="col-3" class="col">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                when an unknown printer took a galley of type and scrambled it to make a type 
                specimen book. It has survived not only five centuries, but also the leap into 
                electronic typesetting, remaining essentially unchanged. It was popularised 
                in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
                and more recently with desktop publishing software like Aldus PageMaker 
                including versions of Lorem Ipsum.
            </div>
        </div>
    </body>
</html>
Λύση με tables: 5 elements και σημασιολογικά λάθος
Λύση με css: 4 elements και σημασιολογικά σωστή
Εικόνα

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

Πρόβλημα με height των divs.

Δημοσίευση από korgr » 21 Μαρ 2011 09:23

Sermac να το βάλουμε το πρόβλημα στην πραγματική του διάσταση;
Να το βάλουμε δηλαδή στη διάσταση των πραγματικών δεδομένων που αντιμετωπίζουμε κάθε μέρα.

Πρώτον και κυριότερον:

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

#columns &#123; 
                position&#58;relative; 
                height&#58;300px; 
            &#125;
Το height: 300px ξέχνα το και αφαίρεσέ το, δεν γνωρίζουμε εκ των προτέρων το ύψος του τρίστηλου

Δεύτερον:
Το overflow:hidden; επίσης ξέχνα το, θέλουμε να εμφανίζεται όλο το περιεχόμενο (χωρίς scrollbars)

Για να μην πω για τα πλάτη που θέλω να αναδιανέμονται αυτόματα ανάλογα το περιεχόμενο...

Παίξε μπάλα :wink:

Άβαταρ μέλους
Banavas
Script Master
Δημοσιεύσεις: 1367
Εγγραφή: 21 Νοέμ 2004 20:25
Επικοινωνία:

Πρόβλημα με height των divs.

Δημοσίευση από Banavas » 21 Μαρ 2011 09:36

korgr έγραψε: Για να μην πω για τα πλάτη που θέλω να αναδιανέμονται αυτόματα ανάλογα το περιεχόμενο...

Αυτό στην καθημερινή πρακτική συνήθως δεν το θέλουμε γιατί χαλάει το design.
Για το ύψος συμφωνώ και εγώ.
Happy coding....
Μάρκος
http://lasernet.gr

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

Πρόβλημα με height των divs.

Δημοσίευση από korgr » 21 Μαρ 2011 10:03

Τα πλάτη των στηλών λέω όχι το πλάτος του container των στηλών που πρέπει να ορίζεται ρητά.
Πχ 600px όλο το τρίστηλο, αλλά ο χώρος αυτός να μπορεί ανά περίπτωση (ανάλογα το εκάστοτε περιεχόμενο) να μοιράζεται είτε 30-30-40% είτε 25-25-50% είτε 33-34-33%.
Οκ λίγο χοντρό το ανωτέρω αλλά ονομάζεται flexibility και μερικές φορές σου λύνει τα χέρια.

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

Πρόβλημα με height των divs.

Δημοσίευση από Sermac » 21 Μαρ 2011 12:19

Υπάρχει λύση και για αυτόματο ύψος των στηλών:

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

<!DOCTYPE html>
<html>
    <head>
        <title>Faux Columns by Sermac</title>
        <style type="text/css"> 
            #columns &#123;
                overflow&#58;hidden;
            &#125;
           
            #columns .col &#123;
                float&#58;left;
                width&#58;300px;
                margin-bottom&#58;-1000px;
                padding-bottom&#58;1000px;
            &#125;
           
            #col-1 &#123;
                background-color&#58;#88FF6B;
            &#125;
           
            #col-2 &#123;
                background-color&#58;#FFD35B;
            &#125;
           
            #col-3 &#123;
                background-color&#58;#5BA7FF;
            &#125;
        </style>
    </head>
    <body>
        <div id="columns">
            <div id="col-1" class="col">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </div>
            <div id="col-2" class="col">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                when an unknown printer took a galley of type and scrambled it to make a
                type specimen book. It has survived not only five centuries, but also the
                leap into electronic typesetting, remaining essentially unchanged.
            </div>
            <div id="col-3" class="col">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                when an unknown printer took a galley of type and scrambled it to make a type
                specimen book. It has survived not only five centuries, but also the leap into
                electronic typesetting, remaining essentially unchanged. It was popularised
                in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
                and more recently with desktop publishing software like Aldus PageMaker
                including versions of Lorem Ipsum.
            </div>
        </div>
    </body>
</html>

Επίσης, υπάρχουν τα display:table, display:table-column, display:table-cell κ.α., ώστε να συμπεριφέρεται οποιοδήποτε element (όχι μόνο τα div) σαν πίνακας.
Εικόνα

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

Πρόβλημα με height των divs.

Δημοσίευση από korgr » 21 Μαρ 2011 13:08

margin-bottom:-1000px;
padding-bottom:1000px;
Αυτό ακριβώς προσπαθώ να τονίσω.
Στον προγραμματισμό θα μπορούσαμε να τα αναφέρουμε ως magic numbers
Το θέμα είναι να μην χρειάζεται να αναφέρεσαι σε ρητές τιμές, γιατί αν ξεπεραστούν έχεις προβλήματα. Αν βρεθεί στήλη με ύψος 1100px έχεις πρόβλημα, αν το ορίσεις 10000 το μαγικό σου νούμερο, θα έχεις πρόβλημα στο 10100 κ.ο.κ

Το να είναι εμμονή να μην χρησιμοποιήσουμε ακόμα και σε εξειδικευμένες περιπτώσεις tables, είναι το ίδιο κακό με το να μην εκμεταλευόμστε τα γενικά οφέλη από το box modeling.

Όταν φτάσω σε σημείο να χρησιμοποιήσω την display:tableοειδές, προτιμώ να χρησιμοποιήσω ένα αθώο table με CSS formating (εκτός ελαχίστων περιπτώσεων)

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

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

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