I'm trying to make a part of my webpage that fit the width of the browser, for this I'm using width: 100%
, the problem is that it shows scrollbars and I can't use overflow-x: hidden;
because it will make some of the content hidden, so how I can fix this?
#news { list-style-type: none; position: absolute; bottom: 0; width: 100%; text-align: center; margin-right: 10px; margin-left: 10px; padding: 0; -webkit-user-select: text; }
There are some reasons to use a scroll bar, but the main one is because we need to allow to focus on one specific area at a time. Content overload is well known in the field of user experience and using this small component in the UI improves the way we split users' attention.
The default scrollbar width can range anywhere from 12px to 17px. Webkit browsers also have the ability for the user to configure scrollbar widths. Webkit browsers, such as Chrome can have custom scrollbars that can have any size scrollbar.
Many desktop browsers do include the scrollbar in the viewport width.
Because you're using position: absolute
, instead of using:
width: 100%; margin-right: 10px; margin-left: 10px
you should use:
left: 10px; right: 10px
That will make your element take the full width available, with 10px
space on the left and right.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With