I'm trying to make two divs fill up with width of the page using the viewport parameter vw. However, the divs' widths are not accurate and the overlap. DEMO
I could enclose them in a container and set the widths using % instead, which gives the desired results. DEMO
My question is, why do it not work with vw? If it is because viewport is inaccurate, how inaccurate is it? And what are the causes for viewport to be inaccurate?
UPDATE: When I load the first DEMO, it initially overlaps. However, when I move the slider of the window left and right several times, the overlap disappear. When I try this on my test site, the overlap is also there, but doesn't go away however I resize my window.
It's because your body has a margin. Set the padding/margin of the body to 0, and now it'll work.
The vw param in CSS is based on the whole viewport, regardless of the container it's in (% takes a percentage of the container). If there is not enough space in the container, you'll get behavior like this.
Related
I've been searching for two days, and trying all sorts of different options, but none of them do what I want. I'm positive this should be possible through CSS, but haven't come across the solution yet.
We want to have a single-cell table that is 100% of the page width, but a fixed page height (although we may be able to work around a % page height.) The table should either contain an extremely large image (that gets sized to 100% of the table width) or have a background image that does the same (so it never repeats, and just sizes up to always stay 100% of the table.
However, when the window is shrunk down, we want the table height to shrink, and "cut off" the image at either the top or bottom.
So far, I have no problem with the expansion issue, but I have yet to find a solution that shrinks the table height at all. It either downsizes by the correct ratio for the new size of the page, or it stays exactly the same size.
Can anyone offer any suggestions?
It would help if you posted a sample HTML and CSS, but in a more generic sense, I'd point you out to Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and adding overflow: hidden to the DIV that contains the image.
I’ve been working on this for over 10 hours, searching the web for a solution, to no avail.
Here is the screen capture of the sketch:
I need to produce a grid layout with the following requirements:
The whole thing is in a horizontal scrolling layout.
Responsive in height, relative to its container (which is already responsive relative to body, using the Stretch-to-margin technic).
3 lines of equal height (33.333%)
Composed of square images anchors
On mouse over: color overlay with white text
The square images need to keep their proportion (reduce the height of the window, image width must scale down.
The width of the whole layout must be dynamic, since the number of squares may vary.
I’ve seen tons of examples where the width is defined, and using the padding-top value to define the height. It would not work here since the Height is the defining value.
I will be posting again with updates tomorrow.
I’m kinda desperate. Thinking of taking up drinking (kidding).
The Question is Answered!
I finally used the "vh" unit, and applied it to HEIGHT and WIDTH of all the squares.
Goes something like this:
.c-squares{
width:30vh;
height:30vh;
display:inline;
}
So clean, can’t believe I’ve never knew about "vh" unit.
I always wondered how to fix the gap between floating elements if they don't have the same height:
Here you can see a gap between Featured and Notice which I would like to get rid of. (Get's even larger when the screen resolution is larger since the Featured box becomes more stretched and thus the text spreads over less lines)
Maybe important to note that this is the order of the floating left elments:
Featured
News
Headlines
Notice
Layout for smaller screens (this is looking perfectly fine I just wanted to show you what I mean in the following description with inconsistent layout based on screen resolution)
If the design would be consistent I wouldn't mind implementing some kind of grid system but in my case I'm using styles based on screen resolution so at a certain screen resolution the boxes change from 50% to 100% width (no fixed value used here).
I thought that fluid girds might be the right way to go but after checking them (never used them before) they feel rather static and I'm not sure that they can solve this problem.
EDIT:
Sample of the broblem: http://jsfiddle.net/UfVrH/. Note the fixed height values in A-D are only there to simulate content stretching the div.
To fix such an issue you need to calculate the width and height of each element and re-arrange them by positioning them absolutely, luckily for you there is such a plugin that does this, Isotope
Please visit website: http://viewlike.us/ and change resolution to e.g. 1920x1200 - in mostly cases header (div with input form and submit button ) is not anymore 100%. How to avoid this situation? Ive tried to use width:100% !important, min/max width - but without success. I suppose there should be a small trick/fix or sth to avoid it but Im struggling with lack of ideas.. thanks~!
I think the default value for the width property is auto for most elements. And in this case, the <div> is expanding to 100 percent of its parent element, which in your case is <body>. Since the <body> tag has no width defined, it will default to 100 percent of the browser window. So even though the width of the page located below the resolution selection bar is greater than the browser window's width, the top bars (URL entry and resolution selection) still have the width of the browser window. That is why you see the edge of them when you scroll to the right.
You might want to experiment with using position: fixed in combination with the CSS properties top and left for your top bars. That way, those bars will be on-screen even when you scroll the page to the right. (I tried that breefly and it should work.)
I hope that helps you!
I've coded myself into a corner or I am overseeing something obvious here. I have a semi-fluid CSS layout that is designed like this:
header - 100% width at all times, contains a x-repeated background image
container - fluid (960px to 1200px, centered, contains two columns)
footer - 100% width at all times, contains a x-repeated background image
In almost all cases this works fine.
In summary, the design as a whole scales to any width, yet the content part only to 1200px at a maximum. However, since this concerns a photo site, sometimes images are wider than the container width of 1200px and the image breaks out of it. This is perfectly fine, I want the full image to be shown. However, I want the header and footer to scale to the widest element, in this case the image. This is not happening and is particularly troublesome when I resize the window to a width less than the image and then scroll to the right using the horizontal scrollbar: it leaves a clear gap on both the header and footer whilst I want them to stretch to at least the image/content width.
Simply setting the width to 100% is not enough as that concerns the viewport, not the content width. I can forcefully use min-width with a large value for the header and footer, but that leaves a horizontal scrollbar in normal resolutions. I could hide that scrollbar using overflow:hidden but that would chop of content and not display a scrollbar when the window is small.
To make a long story short, I guess what I want is that this layout would work as a table would work: if one column's content is wider than its size, it pushes all other rows to that same width. The largest width determines the total width. I prefer a solution without javascript, but am thinking it is either not possible or I am overseeing something very obvious?
100% width sets the element's width to 100% of the width of the element it is contained in. In your case, it seems this is the window itself (or the body element). To make the header and footer divs (I'm assuming you're using divs here) scale with the image, they will probably need to either be included in the same div that the image is in, or inside a div that the image div is also in, assuming that div is scaling to the correct width (don't assume it is scaling to fit the image).
However, in many cases using a table for your layout can be much cleaner, and will handle the type of horizontal scaling you're looking for without needing to resort to css hacks.
To make a long story short, I guess
what I want is that this layout would
work as a table would work
display: table on the common container of these elements, and display: table-row or table-cell on its children. This will not work in IE6, but clever things can be done with its CSS expression() hack to simulate this.
I would rather suggest, however, that you not set a maximum width at all, and allow the design to flow better according to the user's desired window size.