css auto height

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

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

Απάντηση
kekropas
Δημοσιεύσεις: 46
Εγγραφή: 25 Αύγ 2008 21:53

css auto height

Δημοσίευση από kekropas » 30 Μαρ 2010 15:46

Παιδιά έχω δύο div το ένα δίπλα στο άλλο, ένα sidebar και ένα content. Αυτά έχουν fixed width αλλά όχι και height γιατί το content έχει για κάθε σελίδα διαφορετικό height. Υπάρχει κάποιος τρόπος να πω μέσω css το div sidebar να παίρνει κάθε φορά το ίδιο ύψος με το διπλανό του (μέχρι το τέλος της σελίδας δηλαδή).

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

css auto height

Δημοσίευση από sibas » 30 Μαρ 2010 16:57

γίνεται αλλά δεν στο συνιστώ γιατί είναι περίπλοκο και έχει μεγάλες πιθανότητες να μη παίζει σε όλους τους browsers,
θα προβληματιστείς ιδιαίτερα όταν χρειαστεί να βάλεις εικόνες ή άλλα div,
παίξε λίγο ίσως στην τελική να σου κάνει :lol:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>auto height</title>
<style type="text/css"> 
<!-- 
body  &#123;
font&#58; 100% Verdana;
background&#58; #666;
margin&#58; 0; 
padding&#58; 0;
text-align&#58; center;
color&#58; #000;
&#125;

#container &#123; 
width&#58; 780px;
background&#58;#fff;
margin&#58; 0 auto; 
border&#58; 1px solid #000;
text-align&#58; left; 
&#125;

#sidebar&#123;
float&#58; left;
width&#58; 200px; 
background&#58; #333; 
color&#58;#fff;
padding&#58; 15px 10px 15px 20px;
&#125;

#sidebar span&#123;
float&#58;left;
border&#58;1px solid #000;
width&#58; 200px;
&#125;

#mainContent &#123; 
margin&#58; 0 0 0 250px; 
padding&#58; 0 20px 20px;
width&#58;450px;
color&#58; #000;
&#125;

.clearfloat &#123; 
clear&#58;both;
height&#58;0;
font-size&#58; 1px;
line-height&#58; 0px;
&#125;
--> 
</style>

</head>
<body>
<div id="container">
<div id="sidebar">
<span>
<h3>Menu</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #sidebar span --></span>
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
<h2>H2 title</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<!-- end #sidebar --></div>
<!-- important dont remove it --> <br class="clearfloat" />
<!-- end #container --></div>
</body>
</html>

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

css auto height

Δημοσίευση από korgr » 30 Μαρ 2010 20:29

Γινεται με tables και παιζει σε ολους τους browsers :P
(αν δεν πεταγομουν θα εσκαγα :lol: )

kekropas
Δημοσιεύσεις: 46
Εγγραφή: 25 Αύγ 2008 21:53

css auto height

Δημοσίευση από kekropas » 31 Μαρ 2010 00:25

ευχαριστώ παιδιά, ίσως να αλλάξω λίγο το design ώστε να μην χρειαστεί γιατί θέλω κάτι απλό και καθαρή css

kekropas
Δημοσιεύσεις: 46
Εγγραφή: 25 Αύγ 2008 21:53

css auto height

Δημοσίευση από kekropas » 19 Απρ 2010 16:56

Να ρωτήσω κάτι ακόμα που κολλάει για να μην ανοίγω νέο θέμα χωρίς λόγο:

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

<div id="content">  &#40;Αυτό έχει 100% width&#41;
content1


		
<div id="listcontent"> content2</div> <!--listcontent--> &#40;μισό width και float left&#41;

<div id="listcontent2"> content3 </div> <!--listcontent2--> &#40;μισό width και float right&#41;

</div> <!--content-->
To πρόβλημα είναι ότι δεν μπορώ να το κάνω ώστε το div content να μην τελειώνει στο content1 αλλά να παίρνει σαν ιδιότητα height το ύψος και των άλλων δύο div που είναι μέσα του. Ακολουθεί και ένα div footer με 100% width και ο μόνος τρόπος που μπόρεσα να μην υπάρχει πρόβλημα είναι με fixed heights αλλά θέλω να βλέπει που τελειώνει το ένα div και μετά να συνεχίζει το άλλο. Όλα είναι position:static από default

Απάντηση

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

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

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