CODEWITHSUNDEEP
htmlcssoverridinghtml-lists
Holonet
Holonet

Reputation: 63

ul propagates and overrides CSS (need vertical scrollbar too)

I have a ul which I have propagated full of images. The images most often are numerous enough that a scrollbar is necessary. There is drag/drop interaction between the images to and from a similar ul. Both ul's need to be visible on the screen, so I need the scrollbar for this. I've manually set that, and here is the CSS for the ul:

border: 2px solid black;
height: 70%;
list-style-type: none;
overflow-y: scroll;

I want the height to be 70% of the screen regardless, but if using a %, the ul just expands off the screen and the browser itself gets the scrollbar. I set overflow-y to force the scrollbar, but it does not change the behavior.

I'm using bootstrap grid to make the elements resizable. I need this ul to be resizable with the rest of the page content, but the only way I can seem to keep the ul's contents from expanding it is to set it to a static height.

Does anyone know how to do this or why the CSS percentage values don't seem to work here? I looked in Firefox developer tools, and the height:70%; is still there, not crossed off.

Upvotes: 1

Views: 63

Answers (1)

turbolukoshko
turbolukoshko

Reputation: 126

If you want the height to be 70% of the screen. Then use vh instead %. Viewport Height (vh) – A percentage of the full viewport height. 10vh will resolve to 10% of the current viewport height.

Upvotes: 2

Related Questions