CODEWITHSUNDEEP
htmlcssoverflow
BigBugCreator
BigBugCreator

Reputation: 1059

Property overflow doesn´t work (set scroll just in a div)

I´m trying to set a scroll just in a div. I have my website and I´m trying to make it with the same height in all windows.

The page "brands" has part that need more height, but I don´t want the scroll in the window, I just want scroll in a div.

enter image description here enter image description here

I just want the scroll in the purple (or pink) div the rest of my website must be static.

I´m trying to get this with overflow: auto in the purple div and setting overflow hidden in the rest.

This is my current CSS: 

.marcas {
  background-color: gold; 
  height: 80vh;  
  font-family: 'Josefin Slab', serif;
  overflow: hidden; 
}

.title {
    height: 10%;
   /* background-color: ghostwhite; */
    background-color: palegreen;
    color: #1f1f1f;
    font-size: 2.5em;
    padding: 3%;
    padding-left: 10%;
    text-transform: uppercase; 
}

.brands-container {
   background-color: coral; 
   overflow: hidden; 
}

.brands-info {
    overflow: auto;  
    background-color: crimson; 
}

marcas:The wrap of my content (yellow) title: "Our Brands" text (green) brands-container: The div with the brand´s names (orange, salmon...) brands-info: The div with the information and slide (pink)

I think that maybe I have a div with a incorrect property or a wrap with something wrong... I don´t know.

This is the website (but I did not updated my code yet): http://mad4sneakers.com/web/eng/brands.html

Upvotes: 0

Views: 31

Answers (1)

Johannes
Johannes

Reputation: 67748

This should work (a bit hard to say, also depends what the rest of your new code will look like):

.marcas {
    background-color: #F8F8FF;
    font-family: "Josefin Slab",serif;
    height: 80vh;
    overflow: hidden;
}
.brands-info {
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}

(box-sizing: border-boxis not relevant in this partiular case, but you'll need it if you add any margin or padding in order to keep the 100% height (in relation to the parent element)

Upvotes: 1

Related Questions