Div 100% height

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

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

Απάντηση
Άβαταρ μέλους
DrJim
Δημοσιεύσεις: 459
Εγγραφή: 27 Ιαν 2006 13:30
Τοποθεσία: MY COSMOS

Div 100% height

Δημοσίευση από DrJim » 14 Ιουν 2009 04:00

Έχω φτιάξει ένα πολύ μικρό site και θα ήθελα μια βοήθεια στα css.

Έχω ένα body κεντρικό που μέσα σε αυτό έχω άλλα δυο div ένα αριστερό και ένα δεξιά.

1) Μπορώ το αριστερό να πιάνει όλο το ύψος της οθονης ανεξαρτητως ανάλυση??

έχω δοκιμάσει αυτό αλλά τίποτα,

#left {
float: left;
background-color: #3a8fb6;
width: 176px;
height: 100%;
}

2) Μπορώ να βάλω ένα div πάνω στα δυο div δηλαδή να είναι σε ένα παραπάνω layer ας πουμε γίνεται κάτι τέτοιο?
http://www.travelpassion.gr - Travel News Online

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

Div 100% height

Δημοσίευση από dimsis » 14 Ιουν 2009 10:43

Από όσο θυμάμαι πρέπει να βάλεις και το body { 100% }

Άβαταρ μέλους
DrJim
Δημοσιεύσεις: 459
Εγγραφή: 27 Ιαν 2006 13:30
Τοποθεσία: MY COSMOS

Div 100% height

Δημοσίευση από DrJim » 14 Ιουν 2009 17:12

Το body είναι αυτό:

#body {
float: left;
width: 960px;
background-color: white;
height: 100%;
}

αλλα πάλι δεν το κάνει, τι δεν είναι σωστό??
http://www.travelpassion.gr - Travel News Online

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6236
Εγγραφή: 30 Νοέμ 2004 03:09

Div 100% height

Δημοσίευση από fafos » 14 Ιουν 2009 17:59

DrJim έγραψε:Το body είναι αυτό:

#body {
float: left;
width: 960px;
background-color: white;
height: 100%;
}

αλλα πάλι δεν το κάνει, τι δεν είναι σωστό??
gia kane kai to width: 100%;
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

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

Div 100% height

Δημοσίευση από korgr » 14 Ιουν 2009 18:54

Μα ειναι δυνατον να απαντουν οι ...tableαδες? :lol:
Working sample:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
html,body&#123;
margin&#58;0;
padding&#58;0;
height&#58;100%;
border&#58;none;
background-color&#58; #fff;
&#125;
#left &#123;
float&#58; left;
background-color&#58; #3a8fb6;
width&#58; 176px;
height&#58; 100%;
&#125; 
-->
</style>
</head>

<body>
<div id="left">test</div>
</body>
</html>
Πρεπει να εχουμε παντα στο μυαλο πως η ιδιοτητα height οταν ειναι ποσοστιαια, αναφερεται στο υψος του parent. Αν δεν οριστει το υψος του parent δεν δουλευει. Αυτος ειναι ο λογος που δεν δουλεψε με το body (του οποιου το parent ειναι η html και πρεπει να ορισθει 100%)

Οποιος μου επισυναψει κατηγορια πως ...αλλαξοπιστησα, να σας θυμισω:

I love tables :lol:

Άβαταρ μέλους
DrJim
Δημοσιεύσεις: 459
Εγγραφή: 27 Ιαν 2006 13:30
Τοποθεσία: MY COSMOS

Div 100% height

Δημοσίευση από DrJim » 14 Ιουν 2009 19:15

Είσαι μεγάλος, είσαι πολύ μεγάλος!!! Ευχαριστώωωωωωω!!!
http://www.travelpassion.gr - Travel News Online

Απάντηση

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

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

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