Απορία πάνω σε responsive layout

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

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

Απάντηση
nickapokotos
Δημοσιεύσεις: 2
Εγγραφή: 24 Ιαν 2017 14:16

Απορία πάνω σε responsive layout

Δημοσίευση από nickapokotos » 24 Ιαν 2017 14:32

Γειά σας μετά από πολύ ψάξιμο και διάβασμα σε διάφορα άρθρα κατέληξα στο ακόλουθο responsive layout, δεν ξέρω κατά πόσο αυτό το αποτέλεσμα είναι κάτι άρτιο ή προγραμματιστικά ορθό αλλά είμαι ερασιτέχνης και δεν με ενδιαφέρει να είναι τέλειο αν και μου φαίνεται μια χαρά με τις γνώσεις τις περιορισμένες που έχω αποκτήσει από το διάβασμα. Έχω μια "χαζή!" απορία όμως ενώ έστησα ως κάτωθι το layout όταν δοκιμάζω να βάλω περιεχόμενο κάποιο κείμενο μέσα στα divs τότε αυτό βγαίνει εκτός των ορίων των divs και δεν κατανοώ γιατί σύμβαίνει αυτό αφού αν δώσω ένα fixed ύψος τότε πια δεν θα έχω responsive αποτέλεσμα... επίσης δεν θέλω να έχω ένα fixed height θέλω το ύψος να παίρνεται αυτόματα από το μέγεθος του περιεχομένου που βάζουμε στο div.

Ρίξτε μια ματιά στον κώδικα μου παρακαλώ,

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

<div class="mywrapper">
  <header class="myheader">
   header
  </header>
  <div class="mysidebar">
Το Lorem Ipsum είναι απλά ένα κείμενο χωρίς νόημα για τους επαγγελματίες της τυπογραφίας και στοιχειοθεσίας. Το Lorem Ipsum είναι το επαγγελματικό πρότυπο όσον αφορά το κείμενο χωρίς νόημα, από τον 15ο αιώνα, όταν ένας ανώνυμος τυπογράφος πήρε ένα δοκίμιο και ανακάτεψε τις λέξεις για να δημιουργήσει ένα δείγμα βιβλίου. Όχι μόνο επιβίωσε πέντε αιώνες, αλλά κυριάρχησε στην ηλεκτρονική στοιχειοθεσία, παραμένοντας με κάθε τρόπο αναλλοίωτο. Έγινε δημοφιλές τη δεκαετία του '60 με την έκδοση των δειγμάτων της Letraset όπου περιελάμβαναν αποσπάσματα του Lorem Ipsum, και πιο πρόσφατα με το λογισμικό ηλεκτρονικής σελιδοποίησης όπως το Aldus PageMaker που περιείχαν εκδοχές του Lorem Ipsum.
  </div>
  <div class="mymain">
    Το Lorem Ipsum είναι απλά ένα κείμενο χωρίς νόημα για τους επαγγελματίες της τυπογραφίας και στοιχειοθεσίας. Το Lorem Ipsum είναι το επαγγελματικό πρότυπο όσον αφορά το κείμενο χωρίς νόημα, από τον 15ο αιώνα, όταν ένας ανώνυμος τυπογράφος πήρε ένα δοκίμιο και ανακάτεψε τις λέξεις για να δημιουργήσει ένα δείγμα βιβλίου. Όχι μόνο επιβίωσε πέντε αιώνες, αλλά κυριάρχησε στην ηλεκτρονική στοιχειοθεσία, παραμένοντας με κάθε τρόπο αναλλοίωτο. Έγινε δημοφιλές τη δεκαετία του '60 με την έκδοση των δειγμάτων της Letraset όπου περιελάμβαναν αποσπάσματα του Lorem Ipsum, και πιο πρόσφατα με το λογισμικό ηλεκτρονικής σελιδοποίησης όπως το Aldus PageMaker που περιείχαν εκδοχές του Lorem Ipsum.
  </div>
  <footer class="myfooter">
    footer
  </footer>
</div>

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

html, body &#123;
  padding&#58; 0;
  margin&#58; 0;
  background&#58; #40a8e3;
&#125;

.mywrapper &#123;
  text-align&#58; justify;
  max-width&#58; 75.5em;
  margin&#58; 0 auto;
&#125;

.mywrapper > * &#123;
  vertical-align&#58; top;
  display&#58; inline-block;
  text-align&#58; left;
  width&#58; 100%;
&#125;

.lt-ie8 .mywrapper > * &#123;
  display&#58; inline;
  zoom&#58; 1;
&#125;

.myheader, .mysidebar, .mymain, .myfooter &#123;
  height&#58; 3em;
  color&#58; #fff;
  font-family&#58; monospace, monospace;
&#125;

.myheader, .myfooter &#123;
  background&#58; #235c7d;
&#125;

.mysidebar, .mymain &#123;
  background&#58; #358bbc;
&#125;

@media screen and &#40;min-width&#58; 46em&#41; &#123;
  .mysidebar &#123;
    width&#58; 22.51656%;
  &#125;
  .mymain &#123;
    width&#58; 74.17219%;
  &#125;
&#125;



nickapokotos
Δημοσιεύσεις: 2
Εγγραφή: 24 Ιαν 2017 14:16

Απορία πάνω σε responsive layout

Δημοσίευση από nickapokotos » 24 Ιαν 2017 15:26

Αν βάλω

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

.header, .sidebar, .main, .footer &#123;
  height&#58; 100%;
  color&#58; #fff;
  font-family&#58; monospace, monospace;
&#125;
Τότε τα δύο divs με το κείμενο δεν έχουν το ίδιο ύψος θέλω να έχουν το ίδιο ύψος ...πως θα το πετύχω αυτό και να παραμένει responsive ;

Απάντηση

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

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

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