Πώς να αναγκάσετε το παιδί div να είναι 100% του ύψους του γονέα div's χωρίς να καθορίσετε το ύψος του γονέα's;

Έχω έναν ιστότοπο με την ακόλουθη δομή:

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

Η πλοήγηση είναι στα αριστερά και το div περιεχομένου είναι στα δεξιά. Οι πληροφορίες για το content div εισάγονται μέσω της PHP, οπότε είναι διαφορετικές κάθε φορά.

Πώς μπορώ να κλιμακώσω την πλοήγηση κάθετα ώστε το ύψος της να είναι το ίδιο με το ύψος του content div's, ανεξάρτητα από το ποια σελίδα φορτώνεται;

TylerH
Επεξεργασμένη ερώτηση Κάνε Ιανουάριος 2019 в 8:20
Προγραμματισμός
html css
Κάνε Ιούλιος 2009 в 10:14
10 προβολές
Λύση

ΣΗΜΕΙΩΣΗ: Αυτή η απάντηση ισχύει για παλαιά προγράμματα περιήγησης χωρίς υποστήριξη του προτύπου Flexbox. Για μια σύγχρονη προσέγγιση, δείτε: https://stackoverflow.com/a/23300532/1155721

Σας προτείνω να ρίξετε μια ματιά στο Στήλες ίσου ύψους με Cross-Browser CSS και χωρίς αμυχές.

Βασικά, το να το κάνεις αυτό με CSS με τρόπο συμβατό με τα προγράμματα περιήγησης δεν είναι τετριμμένο (αλλά τετριμμένο με τους πίνακες), οπότε βρες μια κατάλληλη έτοιμη λύση.

Επίσης, η απάντηση διαφέρει ανάλογα με το αν θέλετε 100% ύψος ή ίσο ύψος. Συνήθως είναι ίσο ύψος. Αν είναι 100% ύψος, η απάντηση είναι ελαφρώς διαφορετική.

csvan
Επεξεργασμένη απάντηση Κάνε Ιούλιος 2017 в 11:06
Σχόλια (2)

Εάν δεν σας πειράζει να περικόπτεται το div πλοήγησης σε περίπτωση ενός απροσδόκητα σύντομου div περιεχομένου, υπάρχει τουλάχιστον ένας εύκολος τρόπος:

#main {
position: relative;
}

#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}

#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}

Διαφορετικά, υπάρχει η τεχνική faux-columns.

David Thomas
Επεξεργασμένη απάντηση Κάνε Ιούλιος 2009 в 10:30
Σχόλια (4)

[Αναφερόμενος στο Dmity's Less code σε μια άλλη απάντηση] Υποθέτω ότι αυτό είναι κάποιο είδος "ψευδο-κώδικα"?

Από ό, τι καταλαβαίνω δοκιμάστε να χρησιμοποιήσετε την τεχνική faux-columns που θα πρέπει να κάνει το κόλπο.

http://www.alistapart.com/articles/fauxcolumns/

Ελπίζω αυτό να βοηθάει :)

Jonathan Julian
Επεξεργασμένη απάντηση Κάνε Αύγουστος 2013 в 5:07
Σχόλια (2)