I've got photo gallery app with a fluid layout. The #header & #controls are set to position:fixed so that when the user scrolls, they stay on the top of the window.
The div that contains all the photos, #people, is positioned below the controls with padding. On a standard 1280 x 1024 window everything looks fine.
However, when the window gets smaller, the controls wrap, and #controls gets taller. Consequently, #people then gets partially hidden.
Is there a CSS only way to make #people move to accommodate the height change? I'm fairly certain there isn't, as fixed elements get taken out of the document flow. I thought I'd ask anyway.
Update Here's an example: http://jsfiddle.net/hbms2/9/. At the default display, all the blue controls are on one line. When you resize the pane narrower, and they jump onto multiple lines, you can see "#1#,"#2",etc get covered.
Well, this is pretty simple. You set #controls to width:100% that means it will only be as wide as the window. What you should do, since it is fixed positioned, is set the sides to left:0; right:0; (so it covers the page) and the min-width wide enough to fit your controls.
body {
min-width:700px
}
#controls {
left:0;
right:0;
min-width: 700px;
}
Now when you resize the window to less than 700px, your controls will not squish together, and you can use the scrollbar to access off-screen content.
Here it is using your jsfiddle: http://jsfiddle.net/hbms2/14/
Note: I only applied the fix to the controls section, content in the other div's will still squish together since you specified their width with a percentage. (You should avoid doing that) However, you can fix it using the same method.
The control elements will still be hidden if the viewport is smaller than their width. There is no way to fix this using CSS; you would have to use javascript (which would be complicated, cumbersome, and probably wouldn't even yield the desired result) or you can make another site designed for smaller viewports. The latter is by far the better option.
Thanks for making the example like I suggested, it makes answering the question a lot easier.
The only pure CSS solution I know that will even come close are media queries, and you'll have to do a lot of trial and error, and eventually the result might not be 100 perfect.
Therefore, I resorted to JavaScript (jQuery for comfort).
You can achieve this by testing $(window).resize and changing the margin-top of the #people element to match #header's height.
Here's an example!
What I did:
$(function() {
$people = $('#people'); //Cache them to not waste
$header = $('#header'); //browser resources.
$(window).resize(function() { //When window size changes
//Check if the height changed
if ($people.css('margin-top') != $header.height() + 5) {
//Change height if it has.
$people.css('margin-top', $header.height() + 5 + 'px');
}
});
});
I am just giving it a try and I am playing around, but would something like this with dynamic heights work?
http://jsfiddle.net/hbms2/10/
Or am I completely on the wrong track here?
Related
Well this is an odd behaviour.
I'm coding the frontend of a metrics app that must be viewed in a large tv.
I use Html, Js and Css (bootstrap 4).
It's for general public so we must hide browser tabs, etc..
Whenever I set the browser to go fullscreen, a big white row appears at the bottom of the page. Please see attached picture.
The odd part is that there isn't any element there. It's like the viewport just gets bigger and forgets to cover the bottom with stuff.
Is this a known issue?
How to avoid this and cover on fullscreen?
I'ver tried auto, cover, 100% height, etc..
I found the solution right after posting my question.
html,body
{
min-height:100%;
}
The thing is that if you apply height only to body, it will seek for the parent (html) and found that the size is the same as before so both must have the property in order to get the 100% of the height.
I want a page with a fixed pixel size to always have the same percantage hight. I cant just use % or any other relative units since I already made the whole site in pixels.
Means when I have a div with a hight of 1500px and view it on a 1366x768 screen the whole 1500px div should still be visable completely.
The effect I want to accomplish is something similar to a browser zoom.
You could try min-height: 1500px; on the div, then put overflow-y: auto on the body or html elements.
If you want something to dynamically resize depending on the window height you'll want to look into either CSS flexbox, using the vh sizing, or using javascript to detect window resizing.
You could use the viewport meta tag for that. Just remove the "initial-scale=1" part and the page should always be rendered to fit the screen.
You should note that this might result in the page being shown very small which can lead to problems when people want to access it with a smartphone for example. If you want to optimize your page for different devices and screens, I suggest you make yourself familiar with responsive webdesign.
Something like height: 100vh; would make the object's height 100 percent of the viewport height. It seems like there is no way around switching from px to something else.
Is there an html / css / javascipt way to maintain a <div> at a constant size in the face of the user's zooming the page in and out? That is, using control-plus to increase text size and control-minus to reduce it.
EDIT: The kicker, I guess, is that I want the content of the <div> to stay the same size, too.
Thanks!
EDIT: My goal was (and is) to keep an AdSense <div> from expanding so much as to obscure a lot of the real content on the page. But come to find out (thank you #thirtydot) there's really no good way to do this. The answer, for me (thank you #Neal!): give the <div> overflow:scroll so as to sacrifice its content rather than the content I'm trying to show.
.box {
background: red;
width: 5vw;
height: 10vh;
position: absolute;
top: 10vh;
left: 5vw;
}
<div class="box"></div>
There is no good way (read: reliable) to do this. Sorry.
What you're asking for basically boils down to detecting the zoom level of the browser, and there's a great answer here (confirming just how difficult this is):
How to detect page zoom level in all modern browsers?
As stated in that answer, there is a "kinda" cross-browser crazy way involving the use of Flash, but there are downsides:
It uses Flash.
It's not reliable if the user loads your page already zoomed in.
It uses Flash. Yes, this is so bad that I said it twice. Think of all those iPhones/iPads.
Anyway, it's here:
http://blog.sebastian-martens.de/2009/12/how-to-detect-the-browser-zoom-level-change-browser-zoo/
I am not sure what you mean, just use css:
div#id {
width: 100px; /*or some other #*/
height: 100px; /*or some other #*/
}
html:
<div id="id">some content</div>
To make the div size invariant of zooming (But not contents inside it) do the following :
Inside your css for that div :
min-width: 100%;
max-width: 100%;
This will freeze the width, you can do the same for height too.
You should just be ablemto set a width and height in css using a px measurement
Eg
div
{
width:100px; height:200px;
}
I read in another post a solution that I didn't test yet...
Maintain div size (relative to screen) despite browser zoom level
that's the used javascript:
//This floating div function will cause a div to float in the upper right corner of the screen at all times. However, it's not smooth, it will jump to the proper location once the scrolling on the iPhone is done. (On my Mac, it's pretty smooth in Safari.)
function flaotingDiv(){
//How much the screen has been zoomed.
var zoomLevel = ((screen.width)/(window.innerWidth));
//By what factor we must scale the div for it to look the same.
var inverseZoom = ((window.innerWidth)/(screen.width));
//The div whose size we want to remain constant.
var h = document.getElementById("fontSizeDiv");
//This ensures that the div stays at the top of the screen at all times. For some reason, the top value is affected by the zoom level of the Div. So we need to multiple the top value by the zoom level for it to adjust to the zoom.
h.style.top = (((window.pageYOffset) + 5) * zoomLevel).toString() + "px";
//This ensures that the window stays on the right side of the screen at all times. Once again, we multiply by the zoom level so that the div's padding scales up.
h.style.paddingLeft = ((((window.pageXOffset) + 5) * zoomLevel).toString()) + "px";
//Finally, we shrink the div on a scale of inverseZoom.
h.style.zoom = inverseZoom;
}
//We want the div to readjust every time there is a scroll event:
window.onscroll = flaotingDiv;
I am trying to fix the web layout of my web page such that it does not resize or rearrange .
for example , check the page at http://www.boutell.com/newfaq/creating/fixedwidthlayout.html
. On my browser(chrome), when i resize the window along x-axis, the text rearranges to accomodate within viewable area.
On the other hand, http://msdn.microsoft.com/en-us/library/ie/dn255008(v=vs.85).aspx
when i resize the window along x-axis, the text does not rearrange to accomodate itself. I need my web page to NOT rearrange as in the latter case. Not able to isolate the attribute which controls this. I tried position:absolute in the body tag. No luck
You have a fluid layout. All your columns have their width set in percents. So, when the browser size changes, the columns's width changes too. Lets say one of your container has a width of 15%. When the browser window width is 2000px, this container's size will be counted as 15% from 2000px = 300px; on the other device, where width is 1200px, it will be 180px.
The fastest way to fix it to change width to px;
Another way is to set min-width property, - then the container can
act as a fluid, but at some point it won't go smaller. For example:
.columnt {
width: 15%;
min-width: 200px;
}
Hope you get the idea.
I am trying to change my navigation bar's position from the top of the screen based on the screen width. I tried in CSS: top: 10%, but this is based on the height of the screen not the width.
Is there a way to get top: .1 * width?
Quite often overlooked is that the vertical margin percentage properties of elements refer to their containing block's width, not just the horizontal ones.
That means that if you set something to margin-top:10%;, it will have a top margin equivalent to 10% of it's containing block's width.
You can easily see that in this jsFiddle. Try resizing the output panel vertically and horizontally, and note which resize direction makes the inner block move up and down.
You can use vw and vh and if your browser targets are allowing, I'd recommend that. But if you can't use them, you don't have to use Javascript right away. Too many people gun right away for Javascript when it opens up a whole new can of worms (like, what if the browser resizes?), especially when a bit of creative use of CSS can get you out of a sticky spot anyway.
I was going to say there is no way to do so, but apparently in CSS3 since 2011 you have vw/vh that allow sizes to be relative to the viewport. For example:
img { height: 95vw; }
should give images a height that is 95% of the viewport width. Read more; apparently only IE9 supported it at the time of writing.