using this code on chrome browsers will give me a div with a horizontal scrollbar
<div style="overflow-y: scroll;background:black;width:300px;height:100px;">
<div style="min-width: 1000px;"></div>
</div>
but not on firefox,
on ff it will only have a scrollbar if the internal div has some content,
I'm wondering if this is a known issue, and if there's any workaround for it, thank you.
If you give the inner div some height it will work in Firefox. I've added a border on the right so you can see it is actually scrolling. You're right though that does appear to be a browser quirk.
Note that overflow-y is for vertical scrolling (y axis) and overflow-x is for horizontal scrolling (x axis).
<div style="overflow-x: scroll;background:black;width:300px;height:100px;">
<div style="min-width: 1000px;border-right:20px solid red;height:100%;"></div>
</div>
Related
This seems to me currently like the quadrature of the circle, but nevertheless I try to ask this question here.
I need the following:
header - 100% width, fixed at top
content - fixed width, vertically scrolling content
footer - same width as content, fixed at bottom
scrollbar - scrolling horizontally simultaneously content and footer
I.e. there should be only one horizontal scrollbar at the bottom which scrolls content and footer simultaneously, but no scrollbar between content and footer. The vertical scrollbar should only affect the content.
(of course, the horizontal scrollbar should be auto, i.e. only appear if content/footer width is larger than the current viewport width)
The closest I have arrived at is the following HTML/CSS:
<!doctype html>
<html>
<head>
<title>scroll attempt</title>
</head>
<body style="overflow-x:hidden;height:100vh;margin:0;">
<div style="height:100vh;display:flex;flex-direction:column;">
<div style="width:100%;height:100px;background-color:red;">header</div>
<div style="display:flex;flex-direction:column;height:100%;overflow-x:auto;overflow-y:hidden;">
<!--
the following div should only have a vertical scrollbar,
hence overflow-x:visible; - which is not respected
when setting overflow-x:hidden; the horizontal scrollbar disappears
but then the vertical scrollbar moves when scrolling horizontally
-->
<div style="flex:1;background-color:yellow;overflow-x:visible;overflow-y:auto;">
<div style="width:1200px;height:800px;background-color:orange;">scrolling</div>
</div>
<div style="width:1200px;height:100px;background-color:green;">footer</div>
</div>
</div>
</body>
</html>
Unfortunately, with this HTML/CSS, an unwanted scrollbar appears on the div surrounding the inner content, which is located between content and footer, although overflow-x:visible; was set. When setting overflow-x:hidden; the scrollbar is gone, but then the vertical scrollbar is also scrolled by the horizontal scrollbar at the bottom instead of staying on the right of the page.
The behavior is mostly consistend in current IE/FF/Chrome versions. I also have a Javascipt version that fixes divs on window resize and on vertical scroll, but this flickers horribly in IE, which is why I'd prefer a pure CSS solution.
Here's a jsfiddle: http://jsfiddle.net/nftqjkyq/
Any ideas?
[edit: added more details about wanted behavior of the scrollbars]
<div style="width:100%;height:100px;background-color:green;">footer</div>
change the width of your footer to 100% if you want to remove the second scroll bar on your fiddle
Solved fiddle
http://jsfiddle.net/nftqjkyq/1/
EDIT
Try this one http://jsfiddle.net/nftqjkyq/4/
EDIT
With Sticky Footer that scrolls on overflow (This is impossible to scroll a fixed element using just css)
Here is a solution that could be closer to what you want.....maybe it can just give you the direction.
Try this fiddle: http://jsfiddle.net/nftqjkyq/10/
I have a scrollable div with lots of content inside:
<div style="overflow: auto;height: 500px;"
[lots of content]
</div>
In IE, the initial position of the scrollbar is not at the top, but in the middle, so it does not show the beginning of the text. Chrome doesn't do this. How can I fix that?
There seems to be a bug in firefox where if I put anything on the right edge of a container (using text-align or float) it makes the container larger than it should be.
So for example -
<div style='width:100px; overflow:auto'>
<div style='width:50px; float:left;'>Something</div>
<div style='width:50px; float:right;'>
<h1 style='text-align:right;'>Title</h1>
</div>
</div>
Creates a scroll bar in firefox, seems to work fine in chrome. Any ideas?
What you're seeing is that the text actually overflows its container, because the painted dimensions of text can be bigger than its layout dimensions. This is particularly visible with italic text, but can happen with any text, especially with subpixel layout and antialiasing.
Chrome doesn't do subpixel layout of any sort, so it's just ignoring the overflowing text.
Your simplest bet is to just style your right float as overflow:hidden.
When i am doing aligenment with objects i do
<div style='width:100px; overflow:auto'>
<div style='width:50px; float:left;'>Something</div>
<div style='width:49px; float:right;'>
<h1 style='text-align:right;'>Title</h1>
</div>
this prob will not help you but i have to do it alot when useing %'s
Sorry reread you question you can remove the scroll bar like this:
<div style='width:100px; overflow:hidden'>
<div style='width:50px; float:left;'>Something</div>
<div style='width:50px; float:right;'>
<h1 style='text-align:right;'>Title</h1>
</div>
</div>
you will lose 1px of content thou
It's behaving as it should. You don't state which versions of Firefox and Chrome you're using, but for me with FF 9.0 and Chrome 16, they behave the same, i.e., the scrollbar appears. It's because your content extends beyond the defined width, and the default value for overflow is "visible", so the h1 in your right-floated div is extending beyond the div's boundaries. If you change your h1 to, say, a p tag, you note that the scrollbar disappears.
Applying a border will illustrate what's happening with the box model (copy/paste to see how the content extends beyond the border):
<div style='width:104px; overflow:auto;'>
<div style='width:50px; float:left; border:1px solid red;'>Something</div>
<div style='width:50px; float:right; border:1px solid red;'>
<h1 style='text-align:right;'>Title</h1>
</div>
</div>
So, again, it's behaving as it should. If your content extends beyond its container's width and no overflow value is assigned, overflow defaults to visible and the content shows and "pushes" the boundaries of the container. In this case, since your outer container has overflow:auto, you see a scrollbar.
I put a empty content div into a td tag in a table. It shows as there is only one line in div. If I set the height of the div, when I input more content than it's height, it still keep the same size as it was. How to add a vertical scrollbar when content need to consume more space in the div? Thanks.
Automatically show scroll bars when content is greater than height and width like this:
<div style="overflow:auto;"></div>
OR
Show scroll bars at all times like this:
<div style="overflow:scroll;"></div>
Below is some reference for CSS overflow properties:
overflow
overflow-x
overflow-y
Use overflow, or overflow-y: auto | hidden | scroll | visible
<div style="max-height:100px; overflow-y:auto"> ... </div>
or
<div style="max-height:100px; overflow-y:scroll"> ... </div>
NOTE: overflow supported since CSS2, but overflow-y - CSS3, Opera 9.6, Safari 3.1
If you want vertical scrollbar then
<div style="overflow-y:auto;overflow-x:hidden"></div>
only vertical scroll
<div style="overflow-y:auto;"></div>
do this in css
div {overflow: scroll}
edit: What's with all the inline styles guys :-(
The problem: I have a layout of the following:
<div class="container">
<div class="filters1">
</div>
<div class="filters1">
</div>
<div class="stream">
<div class="item"/>
<div class="item"/>
<div class="item"/>.......
</div>
</div>
I want the page to have the standard browser scroller but that it would scroll the stream div only
I tried defining the filter1 div's as position:fixed. but this causes some cross-browser problems and resizing issues. (needed chrome css hacks not to talk about IE7)
Is there a standard solution I can use, various searches did not help...
Thanks
By 'fixed' you mean 'position:fixed' or that you gave it a fixed width and lenght? (I don't why this latter option may have such difficult rendering issues).
Try
.stream {
width: XXpx; /*put your width here*/
height: XXpx; /*put height here*/
overflow:scroll;
}
EDIT: sorry misread the question, do you want the WHOLE page having scroll bars or just the DIV .stream?