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?
Related
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>
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 menu div and a maincontent div. It displays properly on IE and Chrome, but when I view this on Opera on my Android phone, the menu div and maincontent div do not display the scrollbars, the divs stretch to fit the whole paragraph of text inside, leaving the menu div shorter than the maincontent div.
html:
<div id="contentwrap">
<div id="menu">
<p>Less text in here..............</p>
</div>
<div id="maincontent">
<p>More text in here.......</p>
</div>
</div>
I have specified that the menu and maincontent inherit their height from the contentwrap div so they should fill it?
I cannot work out though why this will not display properly, I have tried this with px and also percentage values and get the same result on the mobile browser.
http://jsfiddle.net/6LCGK/ - this displays fine on here, although on opera, the blue and green divs will not have scrollbars and will stretch to fit all content inside, this leaves the blue div shorter than the green div, exposing the pink coloured wrapper.
Anyone know what is going on?
Many Thanks!
Try to set your body at height 100% .
i've got the next html:
<div id="container">
<div id="content"></div>
</div>
The container div is 1050px wide and includes only the shadow background that is repeated vertically.
The content div is 950px wide, is positioned at the middle of container div (horizontal) and includes content.
What do I need - that a horizontal scroll bar appears only if the browser window is smaller than content div, but container div shall not cause scroll bar to appear. How can i make it?
overflow-x:hidden does not work.
Thx
http://jsfiddle.net/98Eqf/1/
I would suggest using a media query then, to check if the browser is 950px wide and then make the scrollbar appear. That'll allow you to use overflow-x:hidden; while it's larger and then once it becomes smaller you can just do overflow-x:scroll; and make the bar appear.
http://jsfiddle.net/hobobne/98Eqf/2/
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 :-(