Full height στήλης σε σελίδα

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

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

Απάντηση
dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

Full height στήλης σε σελίδα

Δημοσίευση από dpa » 02 Μαρ 2013 13:41

Παιδιά θέλω να φτιάξω μια σελίδα ώστε να είναι full width και full height όπως είναι το email της microsoft www.outlook.com

Μια σελίδα με μια στήλη αριστερά που να είναι full height και μια στήλη δεξιά πάλι με full height.

Πως θα το κάνω ??

Σας ευχαριστώ

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

Full height στήλης σε σελίδα

Δημοσίευση από korgr » 02 Μαρ 2013 15:04

Θα δώσεις στις στήλες σου height:100% αφού βεβαιωθείς πως έχεις δηλωμένο DOCTYPE και πως στο css σου έχεις το

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

html, body{
height:100%
}

dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

Full height στήλης σε σελίδα

Δημοσίευση από dpa » 02 Μαρ 2013 19:02

Το έκανα έτσι:

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

<style type="text/css">
html, body &#123; 
	height&#58;100%;
	overflow&#58; hidden;
&#125;
body &#123;
	margin-left&#58; 0px;
	margin-top&#58; 0px;
	margin-right&#58; 0px;
	margin-bottom&#58; 0px;
&#125;
.left &#123; float&#58; left; width&#58; 10%; background-color&#58; #09F; height&#58; 100%; &#125;
.right &#123; float&#58; left; width&#58; 90%; border-left&#58; 0px solid #ccc; height&#58; 100%; overflow&#58; scroll; padding&#58; 10px; &#125;

</style>

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

<body>
<div class="left">
	Πλοηγός
</div>
<div class="right">
	Κείμενο
</div>
</body>
Να σε ρωτήσω!

Στο δεύτερο div έχω width 90% και βάζω padding: 10px αλλά μου αυξάνει το πλάτος και το div πάω κάτω από το άλλο.

Όταν δουλεύουμε με ποσοστά πως ορίζουμε το padding ???

Σε ευχαριστώ και πάλι

gvre
Δημοσιεύσεις: 990
Εγγραφή: 14 Οκτ 2010 11:34
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

Full height στήλης σε σελίδα

Δημοσίευση από gvre » 02 Μαρ 2013 19:38

Έχεις διάφορες επιλογές:

1. Βάζεις padding πχ 2%, οπότε αλλάζεις το width σε 86% και το height σε 96%.
2. Τα αφήνεις ως έχουν και βάζεις margin: 10px σε ένα div που θα προσθέσεις μέσα στο right.
3. Χρησιμοποιείς box-sizing: border-box (δες το Browser support).

Σου προτείνω να δεις το 3.

dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

Full height στήλης σε σελίδα

Δημοσίευση από dpa » 02 Μαρ 2013 19:57

Μπορώ να δουλέψω την αριστερή στήλη πχ 250px και δεν την Δεξιά 100% ???

Ευχαριστώ φίλε για την βοήθειά σου.

gvre
Δημοσιεύσεις: 990
Εγγραφή: 14 Οκτ 2010 11:34
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

Full height στήλης σε σελίδα

Δημοσίευση από gvre » 02 Μαρ 2013 20:19

Ναι. Μπορείς να ορίσεις το δεξί div (main) να έχει πλάτος 100% και μετά να βάλεις το αριστερό (nav) να "κάτσει" από πάνω του, μέσω positioning και z-index. Τέλος, χρειάζεσαι ένα εσωτερικό div στο main με margin-left: 250px. Αν δεν το βάλεις, ένα μέρος από τα περιεχόμενα του main θα κρύβεται από το nav.

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

<!DOCTYPE html>
<html>
        <style type="text/css">
                * &#123; margin&#58; 0; padding&#58; 0; &#125;
                html, body &#123; height&#58; 100%; &#125;
                #nav, #main &#123; position&#58; absolute; height&#58; 100%; &#125;
                #nav &#123; z-index&#58; 2; width&#58; 250px; background&#58; green; &#125;
                #main &#123; z-index&#58; 1; width&#58; 100%; background&#58; yellow; &#125;
                        #main-inner &#123; margin-left&#58; 250px; &#125;
        </style>
<body>
        <div id="nav">
                nav
        </div>

        <div id="main">
                <div id="main-inner">
                        main
                </div>
        </div>
</body>
</html>

dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

Full height στήλης σε σελίδα

Δημοσίευση από dpa » 02 Μαρ 2013 20:21

Φίλε σε ευχαριστώ πάρα πολύ.

Το κατάλαβα.

Σε ευχαριστώ

unibo
Δημοσιεύσεις: 1
Εγγραφή: 01 Νοέμ 2010 16:39

Full height στήλης σε σελίδα

Δημοσίευση από unibo » 18 Οκτ 2013 00:30

στην CSS3 υπάρχει και η εντολή calc που είναι ακριβώς αυτό που θές, απλώς δεν παίζει σε όλους τους browsers (εδώ).

e.g.

html, body { height: 100%; }
#nav{width:100px;}
#main{
width:90%; /* fallback if needed */
width: calc(100% - 100px);
}

περισσότερα παραδείγματα εδώ

Απάντηση

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

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

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