I want to have a set width for my page with no horizontal scroll bar. (And if my elements exceed the page width, they don't add width or a horizontal scroll bar to the page.)
Probably not the best user experience, but this is what you need to add to your CSS:
body {
overflow-x:hidden;
}
Related
So basically when I shrink the page to say 1000px wide, enough for the x-axis scrollbar to appear. When I scroll to the right the navbar stops filling the 100% width, rather just the viewable width when you shrink the window.
I have had a fiddle around and cannot work out why it is doing this.
Here is the page:
http://astrodeer.com.au/habbonauts/test/index.php
Any help is appreciated.
100% of the width is 100% of the width of the parent (which is the screen size). You can scroll to the right, because the header is wider than that, but the bar still won't fill that width.
The easiest fix, without modifying the HTML, is adding this style to your CSS. Doing so will make the nav-bar background at least 1180px, which is the same size as the header.
.nav-bar {
min-width: 1180px;
}
Alternatively, you can put the nav-bar inside the header, so it will grow to 100% of the header width.
Add this style, it works fine.
body{ float:left; min-width:100%;}
or
body{ display:inline-block; min-width:100%;}
Body will not automatically stretch to 100%; so we add these.
Is there any way to scroll a div from the main page scrollbar ?
Here is an example of the page I would like to change:
Scroll bar example page
Or can we put the div MAINDIV inside another div which would be 100% height and width, and scrolling this div would scroll the MAINDIV div ?
Remove "overflow-y:scroll" (and "height: 580px" to make it look better) from the MAINDIV.
Removing "overflow-y" will remove the scrollbar from the MAINDIV, because you want this scrolling to apply to the body not the MAINDIV.
AND
replace "overflow-y: none" of the body by "overflow-y: auto". Now a scrollbar should appear if your MAINDIV content does not fit the browser.
I want that the scollbar is hidden but you can still scroll.
if I now do:
body{
overflow-y:hidden
}
the vertical scroll is hidden but you can't scroll.
my question: is there a way to hide the scrollbar but you can still scroll?
You can try to add padding-right:20px; and overflow-x:hidden; to the overflowing element, hiding the scrollbar. Not sure if it works on body though.
How can I make a div overflow, but rather than create a scroll bar, make the entire webpage larger so as to avoid scrolling?
To avoid scrolling:
overflow: hidden;
To make entire webpage larger:
min-height: <!-- set larger height -->
Hope it helps!
I would like to fix my navigation bar to the top of the browser window, but allow horizontal scroll for nav items for nav items that may have overflowed when the browser width is decreased. An example is the gmail nav bar being fix to top but still horizontally scrollable when the window width is decreased.
Currently I use the following css for the div which fixes the div to top but does not allow horizontal scrolling because it is fixed(tried overflow:scroll but doesn't do anything):
position: fixed;
top:0
overflow:scroll;//does nothing
If you give it a right and left value, it should scroll: http://jsbin.com/edopor/4/edit
If overflow:auto; doesn't work it may be the possible lack of a doctype.