I'm trying to make a fixed width, fixed height box that "mimics" overflow:scroll, but the scroll bar is actually the widow scrollbar (or a pseudo-window scrollbar). What I mean by that is, the box is sitting there and you have the scroll bar on the side of the browser scroll the box contents up and down. Possible with just css? If not, is there a solution with javascript?
Your box height is exceeding your window height. In following manner this could happen if you are in resolution 1024 by 768px
div style="width:400px; height:1000px; overflow:scroll;"
Solutions-
css- reduce height of the box
or
js- control height of the box [screen.Height] for different
resolutions
Related
I'm trying to stretch the div container to fit the whole window. However whenever I set the width and height to 100%, I still get vertical and horizontal scroll bars that barely scroll anything. Hiding it with:
overflow:hidden
hides it but then the border on the right and bottom are missing. I want the div to fit exactly as the size of the window.
http://jsfiddle.net/pqDQB/
What I tend to do in situations like this is tinker around with the unit I am using.
Step 1: Make sure your content doesn't have any padding or margin that causes your issue.
Step 2: I recommend setting your width to width: 100vw and height to height: 100vh. This stands for viewport width and viewport height and will expand your div to cover the whole screen when both are set to 100.
I noticed that when I have an element with a horizontal scrollbar, Chrome will add a scrollbar within the element without changing the height, but Firefox will increase the element height to make room for the scrollbar. Any way to control this behavior in either case?
Ok I have a problem where one div's margin doesn't appear to stay relative to the previous div as the browser window re-sizes (height not width). This creates the problem where content overlaps as shown when in a wide browser. The picture bellow shows how in a narrow screen it works fine, however in the second picture you can see how the div has moved up based on the browser being made wider (27 inch imac).
If you go to: http://creativeabyss.co.uk/test/ you can see this effect for your self as you resize the window (You might need a big monitor). I cannot for the life of me figure out what is causing this, so I was wondering if any of you could help? The code should be available at the aforementioned link.
p.s I have set the background of one div to blue which illustrates that it is the size of this div which appears to be causing the issue...
Your problem is the fixed height on #OuterMenu. It is set to 300px, when you resize the browser window, the height of the content inside #OuterMenu decreases, but #OuterMenu is still 300px high, this causes some empty white-space to be displayed before the content which is rendered below it. Getting rid of the fixed height on #OuterMenu will fix this. It breaks on high resolutions because then the content inside #OuterMenu will be too high for its containing div which is only 300px high. In this case it will look like the content below this div is rendering over the top of the content inside #OuterMenu, but in fact it is the 300px height set on #OuterMenu which is limiting the space allowed for #OuterMenu to render its content within.
I'm trying to place three divs side by side.
The first div has a fixed width and needs to be against the left side of the screen (ie: float:left;).
The next div also has a fixed width and needs to be against the right side of the screen (ie: float:right;).
And the last div needs to fill the space in between them and adjust based on the width of the browser window.
When a certain minimum width is reached for this last div in the middle I need it to stop getting smaller and have scroll bars appear in the browser.
Is this possible to achieve? If so, how?
try this link. basically, there are 3 divs, 2 of them which placed on the side are fixed width absolute position div while the center is a normal div with margin.
To summarize, I'm trying to get a "resizable page" both in the height and in the width of the window. I've two fixed blocs too. One on the top of the page and an other on the left (like the Flow app for example).
As you can see there, I'm trying to make the yellow part of the screen resizable (css only) but I get some trouble with the height part. The scrolling zone is always counting the height of the top bloc (the red one).
Is there a way to make it javascript free?
The div with id="container" has a height of 100%. This means 100% of the containing id='wrapper' div. One possible solution is to make the heights:
red part: 10% of the total height
blue+yellow (i.e. the "wrapper" div): 90% height
This would mean the "container" wrapper should nicely fill up those 90%.
Edit: only drawback would be that the red part is no longer a fixed hight pixel-wise.