CODEWITHSUNDEEP
cssscrolloverflow
dominotrix
dominotrix

Reputation: 367

Enable scrolling bar on a specific div

I have this website: link and I want the black part only to have a scrollbar so the user can see the whole content.

I have used overflow on body so the whole page denies scrolling, but I can't get it to be enabled on this specific div.

What do I have to do so I can make the black area scrollable?

Thanks in advance!

Upvotes: 1

Views: 575

Answers (3)

Fabian Mebus
Fabian Mebus

Reputation: 2415

If the <div id="lue1"> ... </div> is the element you want to have vertically scrollable go for overflow-y: auto;:

body {
  overflow: hidden;
}

#lue1 {
  width: 450px;
  float: left;
  box-sizing: padding-box;
  background-color: #000;
  height: 100vh;
  padding: 20px;
  color: #fff;
  font-family: 'Georgia';
  text-align: justify;
  font-size: 14px;
  box-sizing: border-box;
  
  overflow-y: auto;
  
}
<body>
  <div id="lue1">
    <div id="lue2"></div>
    <h2 id="lue3">THE<br>OAK HOTEL</h2>
  
    <div id="lue4"></div>
    <div id="lue5">FEELS LIKE HOME</div>
    “The Oak Hotel” ένα ξενοδοχείο 4 αστέρων για τους λάτρεις της μοντέρνας,
    industrial αισθητικής. Νεόδμητη ξενοδοχειακή μονάδα, χτισμένη το 2015,
    προσφέρει στους επισκέπτες, μοναδική εμπειρία διαμονής, χάρη στις
    υπερσύγχρονες εγκαταστάσεις που διαθέτει. Βρίσκεται στην παραθαλάσσια περιοχή,
    της Κεραμωτής και διαθέτει 19 δίκλινα δωμάτια.<br>
    <br>
    Η αρχιτεκτονική του κτιρίου, το οποίο χαρακτηρίζουν οι επιβλητικές γωνίες και
    η ξύλινη του πρόσοψη, είναι εξαιρετική. Στο πίσω μέρος του ξενοδοχείου υπάρχει
    πισίνα και pool bar, για αξεπέραστες στιγμές χαλάρωσης.<br>
    <br>
    Το “The Oak Hotel” σας περιμένει να το επισκεφθείτε σε μια τοποθεσία που
    προσφέρει ηρεμία, ησυχία και χαλάρωση. Ζήστε μια αξέχαστη εμπειρία
    διαμονής.<br>
    <br><br>
  
    <div id="lue6">ΓΕΝΙΚΕΣ ΠΑΡΟΧΕΣ ΞΕΝΟΔΟΧΕΙΟΥ</div>
  
    <ul id="lue7">
      <li>24ωρη reception</li>
      <li>café-bar</li>
      <li>εστιατόριο</li>
      <li>πισίνα</li>
      <li>pool bar</li>
      <li>ιδιωτικό parking</li>
      <li>δωρεάν φύλαξη αποσκευών</li>
      <li>φιλικό με ΑΜΕΑ επισκέπτες</li>
    </ul>
  </div>
</body>

Upvotes: 1

Shrinivas Pai
Shrinivas Pai

Reputation: 7701

Change this.

#lue1 {
width: 450px;
float: left;
box-sizing: padding-box;
background-color: #000;
height: 100vh;
padding: 20px;
overflow-y: scroll; /* New added code */
color: #fff;
font-family: 'Georgia';
text-align: justify;
font-size: 14px;
box-sizing: border-box;
}

Upvotes: 4

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28455

Add style overflow-y: scroll to element with class

container_inner default_template_holder clearfix

Upvotes: 1

Related Questions