Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Width: 100% Without Scrollbars

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; } 
like image 247
Nathan Campos Avatar asked Jun 11 '11 16:06

Nathan Campos


People also ask

Are scrollbars necessary?

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.

How wide are scrollbars?

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.

Does width include scrollbar?

Many desktop browsers do include the scrollbar in the viewport width.


1 Answers

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.

like image 175
thirtydot Avatar answered Sep 30 '22 22:09

thirtydot