Lacking better terms for the problem, this question got a bit long. Sorry!
I've been trying to build a simple horizontal layout with a bunch of <div>s with width: 100%; height: 100% next to each other ("screens" of an app that you can swipe).
In Chrome's responsive preview, as well as on a real device, empty space appeared below the <div>s — no invisible objects, no traces of the excess height in any DOM properties.
Here's a gist, try it via bl.ocks.org. Scrolled all the way down, it looks like this:
Red/blue are the divs, yellow is bodys background-color.
In a related answer I found this:
Chrome infers the layout height using the width and screen's aspect ratio. i.e. height=width/aspectRatio
Which means that if my content is wider than the viewport, a minimal height will be calculated for it. I find this weird, and came up with workarounds:
set html, body { overflow-y: hidden}
put all children of <body> inside a <div> wrapper
Since both methods have downsides or aren't always applicable, I am wondering: is there a way to control this behavior, like, set the inferred layout height to "auto"?
Related
I have a website on which one of the pages should not be scrollable (the entire page should fit on the client's screen). On this site I need to have a list of selectable objects in a column, which could potentially be quite large (it will certainly eventually overflow the screen)
I have stored these items in a <v-list> component and ordered it to scroll when it overflows. The problem is however is that it is forcing its parent column to increase in size when the number of <v-list-item> elements is too high, destroying the non-scrollable page layout. It seems to be because all of the actual <v-list-item> components are still being rendered, which is stretching out the <v-list>, despite the fact that it is set to overflow when it reaches 100% of its parent height.
I am able to sort of fix this by defining max-height in terms of px. But this is not an acceptable solution because it needs to be fully responsive.
This is demonstrated in the codepen. The list in the purple column (initially commented out) should make the list scroll when it becomes larger than the purple column's height. But, instead, it stretches out the entire page height and makes everything render with a different height before finally starting to scroll.
Codepen link
The orange column is basically what I want, but obviously with max-height being defined in px it wouldn't necessarily be right on everyone's screen. But it should look sort of like this:
All colours are just for referencing.
As a final note, we did find some oddities about the fill-height parameter being used in <v-container>, apparently it is deprecated? But it was the only way we could consistently get the full page height to render properly before adding everything else.
I think I got what you were looking for: https://codepen.io/tino-hb/pen/eYvdMXO?editors=1000
It is a slightly different base layout, but I think it will do nicely and match your use case.
The keys are the 100vh for v-main and the combination of flexbox and max-height: 100% around the grid columns and lists.
<v-main style="height: 100vh;">
...
<v-col style="max-height: 100%; background-color: magenta;">
<v-list class="overflow-y-auto" style="max-height: 100%">
...
...
</v-main>
I am blocking out a new page for my site that is going to be responsive with a sliding divide separating 2 columns. On the left column I have a couple vertically stacked divs, the bottom of which I want to scroll its contents when it overflows. I want only the div to scroll and not the entire page.
I have already set the overflow-y to scroll and while this does produce the scroll-bar it still expands the entire page rather than recognizing the edge of the window. I have a feeling it has to do with the parent containers size not being fixed and I thought setting it to max-height: 100%; would resolve this but it has not.
here is the jfiddle
jfiddle
It is basically just a grab from my sandbox site wtb.dsdcs.com but it seems to behave the same in the jfiddle so it should suffice.
Just a disclaimer: there is a video the autoplays in both the website and jfiddle that I left intact in-case its container is part of the issue, so may need to turn down speakers.
Clarification: #PlayList is the element I wish to be able to scroll.
You need to give your Playlist class a height - (e.g 400px). Then, as you add more a items you should get a scrollbar. You can remove max-height as that won't be needed.
If you want a dynamic height of the playlist, that always takes up the remainder of the height, you could add a jQuery script:
var h1 = $(window).height();
var h2 = $('.videowrapper').height();
$('.playlist').height(h1-h2);
Since your videoWrapper is set to take up 50% of the height, the other approach could be to set your playlist to have the other 50%. So set it to height: 50%.
.playlist {
padding: 10px;
font-size: 12px;
overflow-y: scroll;
height: 50%;
position: relative;
}
EDIT 17 Oct:
The reason the above might not work with all browsers is probably because of your implementation. Like I said in the comments below, you shouldn't be using table-type display properties because they don't support overflow very well.
The W3C even say that the overflow property only applies to block-type elements LINK.
The MDN suggests the same LINK.
As such, implementing overflow on any table-type element will always be a tricky and risky approach as browser support issues or browser display inconsistencies should be expected. To get a fully supported solution, I'm afraid you'd have to try other display properties such as flex or block.
Unfortunately, there is no way to get a fully supported solution for overflow on table elements, and therefore such answer cannot be provided. The only real "solution" here that would actually solve your problem would be a complete (or partual) overhaul of your entire site.
However, I hope the above gave you hint of direction of what to do next and as such being an acceptable answer for you.
Good luck!
I have simple page using a two-column page layout that breaks on zooming. Here it is - try zooming in with cmd+:
http://jamesabbottdd.com/ems-with-max-width.html
The header breaks on the right side, causing a horizontal scrollbar to appear. Originally I thought this was due to using pixels for sizing elements and setting max-width. This article is about that very problem:
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
Then I overrode pixels with ems but the problem persists.
This intrigues me to no end. I’ve been using CSS for about a decade now, the last 3 years on a high level, but haven’t yet figured out why the above page breaks but this one:
http://framelessgrid.com/
does not, regardless of how closely I zoom in.
Any help greatly appreciated.
Hmmm, it looks a bit like you've inadvertently linked together two slightly unrelated observations, making it a bit more difficult to diagnose the actual problem.
Separating the Symptoms
Based on your screenshot, it does appear that your header is coming up with some visual glitches. Additionally, a horizontal scrollbar appears - but rest assured that this is not due to any property of your header. In fact, it is due to your wrapper div below the header, which has a width of 1130px. So when you zoom in that much, it can't all show on the screen, and thus creates the scrollbar.
The True Issue
Returning to the problem with your header though, the reason why the colour is disappearing is because your header div has a width of 100%. If, when you took that screenshot, you were scrolled all the way to the left, you would have seen no problem with the header's background colour, because it would have covered 100% of the browser's width. (If you're wondering where this width of 100% came from, it's due to the h1 element inside the header; an h1 generally has a default width of 100%, a style you wouldn't be able to see even with an element inspector like Firebug open.)
Note that the site you provided does not display this issue due to a few things: first, its header doesn't have a background colour, so you wouldn't see any kind of issue in that respect (if it did have one though, you'd immediately see that the div doesn't actually span the whole screen as yours does; it is only a little wider than the text within, and has a fixed width. The title is centred not through only usage of the h1 element's width of 100% and text-align:center, but is also due to the margin:0 auto applied to the header div. But now, how to fix your issue?
A Solution
With the current structure of your page, the easiest solution would be to give your header div a defined width. Well, not a width per se, but rather a min-width, one which is identical to the width of your wrapper div. If you give it the style of min-width:1130px, you should see your problem solved.
I hope this was helpful! (Sorry if it was a little long to read, though.)
I have been working on a project using Compass with the 960.gs plugin. It's worked quite well so far, giving results that look nearly identical across browsers with little effort. I've run into a small problem, however.
The div I am using as 960's main grid container has a vertically tiled background in CSS. I need this background to extend all the way to the bottom of the browser's viewport, but it would seem that 960's use of floats is somehow conflicting with this.
Despite the container's height being set to 100%, the background only extends part of the way down the screen when overflow is unspecified. Setting overflow to hidden fixes it, but hides the scrollbars!
How can this be dealt with? I've used Webkit's inspector look through the code and DOM for problems and as far as I can see there's nothing that should cause this behavior.
It's not online and the code is too large to copy and paste here, but I will recreate the structure in abbreviated psuedocode:
<html>
<head></head>
<body>
<primary background div>
<960 container div>
<header div>Stuff</div>
<main content div>More Stuff</div>
<footer div></div>
</div>
</div>
</body>
</html>
I've scanned the CSS is there is nothing problematic. I'm not floating anything and the most I'm doing is small padding and margins...
It's hard to tell without the actual code, but the prerequisite for block to stretch at 100% is one of these:
It's parent have an absolute set height (like 100px etc.).
Or all parent of this block till HTML tag must have height: 100%.
So, look at this example: http://jsfiddle.net/kizu/UvAxV/ — there on frame hover HTML and BODY get height: 100% and the wrapper stretches to 100% too.
So, in your case, you must to make sure that HTML, BODY and “primary background div” all have height: 100%
This seems like it should be the easiest thing in the world, but I'm having difficulties. I'm started to think I didn't know as much about CSS as I thought, or CSS was designed more poorly than I thought.
I have a page. At the top, there's an arbitrary amount of markup. Then there's a block element. All I want to do is make this block element extend its height to the bottom of the window.
See http://jsfiddle.net/vHVeC/4/. It's close, but the last block element extends beyond the visible area of the browser, creating scrollbars. No content should extend beyond the dimensions of the viewport (ie there should be no scrollbars).
How can I do this with having to use JavaScript?
Apparently, CSS has massive troubles finding heights. Widths, no worries.
Using Javascript, you'd go:
//Grab div element
var obj = document.getElementById('theDiv');
//Enable sizing
obj.style.position = 'relative';
//Force to window
obj.style.height = document.documentElement.clientHeight+'px';
Incidentally, in your Fiddle, the plaintext node above the div is offsetting the div below. It's finding 100% of the body height, but then being bumped down, causing the scrollbar. The way to fix this in CSS is position:absolute;left:0;top:0 which locks it in place.
Also note that in any of these cases, if you do end up scrolling (e.g. to 150%), you'll see the bottom edge of your div down there at 100%.
You've hit the css box model problem. A quick and dirty solution is to set the overflow: hidden property to prevent the scrollbars but you should be very careful doing this. You will need to make sure your content fits on screen as any content extending beyond the block element will be inaccessible to users.
This is how you can do it using a table (It's pure CSS):
http://vidasp.net/tinydemos/table-layout.html