2 Ερωτήσεις για CSS και Bootstrap

[killer76]

Καλησπέρα! 2 ερωτήσεις για να μην ανοίγω 2 διαφορετικά νήματα

Ερώτηση 1: Θα τρελαθώ. Προσπαθώ να κάνω το footer να μένει κολλημένο κάτω όταν είναι πολύ μικρό το περιεχόμενο. Δεν θέλω ούτε sticky δηλαδή και σε μεγάλες σελίδες να φαίνεται, ούτε absolute position που δεν δουλέυει σωστά όταν σκρολάρω. Κάποτε είχα δοκιμάσει ένα πολύ απλό τρόπο που είχα βρει στο stackoverflow που δήλωνα στο body ύψος 100% και έβαζα στο footer απλά την κλάση mt-auto. Μου δούλεψε. Δεν μπορώ να το ξαναβρώ όμως. Τώρα βρήκα αυτό. Έφτιαξα και ένα απλό τεστ στο codepen αλλά δεν δουλεύει με τίποτα. Τι μου διαφευγει?????
Το codepen που έφτιαξα είναι αυτό.

Ερώτηση 2: Σε έναν πίνακα που έχω φτιάξει και είναι responsive, γίνεται η οριζόντια μπάρα κύλισης να εμφανίζεται και από την πάνω μεριά. Για παράδειγμα σε αυτόν τον πίνακα που εμφανίζεται η μπάρα από κάτω.

 

Να εμφανίζεται και από πάνω

 

Ευχαριστώ πολύ!!!!

[k33theod]

για το 1 δες https://www.w3schools.com/howto/howto_css_fixed_footer.asp

για το 2 https://jsfiddle.net/dagope/DtRTq/

[killer76]

12 ώρες πριν, k33theod είπε

για το 1 δες https://www.w3schools.com/howto/howto_css_fixed_footer.asp

για το 2 https://jsfiddle.net/dagope/DtRTq/

Για το 1 ξέρω να το φτιάξω fixed αλλά δεν θέλω fixed. Το fixed οταν ειναι μικρό το περιεχόμενο σωστα δουλεύει όπως το θέλω αλλά αν είναι μεγάλο το περιεχόμενο και έχει scroll, το footer εμφανίζεται μόνιμα από την αρχή. Εγω αυτό που θέλω είναι: Αν είναι μικρό το περιεχόμενο να μην το πάει στην μέση της σελίδας αλλά στο κάτω μέρο, αν είναι μεγάλο το περιεχόμενο, να ΜΗΝ εμφανιζεται, μέχρι που θα κάνεις σκρολ μέχρι το τέλος.

Για το 2 εν μέρη δουλεύει αλλά δεν μπορώ να καταλάβω πως να το συνδυασω με το table. Το έκανα έτσι και μου το δείχνει σαν μικρό κουτάκι με μικρό width. Όπου έχει απόλυτο width το css το άλλαξα με 100% αλλά δεν εμφανίζει τα scroll.

Έτσι το έχω βάλει τώρα

<div class="wmd-view-topscroll">
  <div class="scroll-div1"></div>
</div>

<div class="wmd-view">
  <div class="scroll-div2">
    <div class="table-responsive" id="managerTable">
      <table class="table table-bordered table-sm" id="dataTable">
        <thead class="thcss">
          <tr>
            <th>Τιτλος</th>
            <th>Τιτλος</th>
            <th>Τιτλος</th>
            <th>Τιτλος</th>
            <th>Τιτλος</th>
            <th>Τιτλος</th>
            <th>Τιτλος</th>
            <th>Τιτλος</th>
            <th>Τιτλος</th>
            <th>Τιτλος</th>
            <th>Τιτλος</th>
            <th>Τιτλος</th>
            <th>Τιτλος</th>
            <th>Τιτλος</th>
            <th>Τιτλος</th>
            <th>Τιτλος</th>
            <th>Τιτλος</th>
            <th>Τιτλος</th>
            <th>Τιτλος</th>
            <th>Τιτλος</th>
          </tr>
        </thead>
        <tbody>
          <?php foreach($rows as $row):?>
          <tr>
            <td>Κείμενο</td>
            <td>Κείμενο</td>
            <td>Κείμενο</td>
            <td>Κείμενο</td>
            <td>Κείμενο</td>
            <td>Κείμενο</td>
            <td>Κείμενο</td>
            <td>Κείμενο</td>
            <td>Κείμενο</td>
            <td>Κείμενο</td>
            <td>Κείμενο</td>
            <td>Κείμενο</td>
            <td>Κείμενο</td>
            <td>Κείμενο</td>
            <td>Κείμενο</td>
            <td>Κείμενο</td>
            <td>Κείμενο</td>
            <td>Κείμενο</td>
            <td>Κείμενο</td>
            <td>Κείμενο</td>
          </tr>
          <?php endforeach ?>
        </tbody>
      </table>
    </div>
  </div>
</div>
<script>
  $(function () {
    $(".wmd-view-topscroll").scroll(function () {
      $(".wmd-view").scrollLeft($(".wmd-view-topscroll").scrollLeft());
    });
    $(".wmd-view").scroll(function () {
      $(".wmd-view-topscroll").scrollLeft($(".wmd-view").scrollLeft());
    });
  });
</script>

 

[killer76]

Τελικά το 2ο πρόβλημα δεν θα χρειαστεί να το λύσω. Το έφτιαξα αλλιώς ωστε να μην χρειάζομαι scroll. 

[rafinos]

Ορίστε η λύση για το πρώτο: https://css-tricks.com/snippets/css/sticky-footer/

Όπως βλέπεις για να το πετύχεις αυτό χρειάζεται να ξέρεις το height του footer ώστε να αφαιρέσεις και το ανάλογο margin-bottom από το main wrapper. 

Επεξ/σία 15 Ιανουαρίου 2024 από rafinos

[Xvipes]

Με flex γίνεται πολύ εύκολα https://codepen.io/xvipes/pen/rNRGVpx και δεν χρειάζεται fixed height κάπου.

[killer76]

19 ώρες πριν, Xvipes είπε

Με flex γίνεται πολύ εύκολα https://codepen.io/xvipes/pen/rNRGVpx και δεν χρειάζεται fixed height κάπου.

Φίλε μου δούλεψε άψογα. Σε ευχαριστώ πολύ!!!!