This seems like it should be a simple question but i cannot seem to find a solution anywhere.
On the website i am making i have a navigation bar at the top of the page that is 43px in height and in an attempt to not have to edit it for each individual page that i make what i did is put an iframe below it at 100% width with the navigation buttons targeting the source of my iframe.
Now where i run into an issue is that i want the iframe to extend from the bottom of the navigation bar to the bottom of the page so that you cannot tell that it was iframed in but if i set the height to 100% it is set to the height of the entire page and adds a 2nd scrollbar to compensate for the extra 43px at the bottom, so how can i fit the iframe to just the remaining space below the nav bar ?
I have tried setting different % but that does not work for different res monitors. And i need this to work cross browser (in IE, Chrome, Safari, and Mozilla, preferably in Opera also but that's not a necessity).
Sorry its a little wordy, can anyone help?
Pretty simple. All you need do is subtract the height of your navigation from the current viewport height and set that as your iframe's height. Use this Javascript method:
function ResizeIFrame() {
var nNavigationHeight = 43; // Assuming the 43px you stated above
var nViewHeight = document.body.clientHeight;
var nIframeHeight = nViewHeight - nNavigationHeight;
document.getElementById("YourIFrameID").style.height = nIframeHeight + "px";
}
You'll need to set your body and html to 100% height for this to work.
body, html {
height: 100%;
}
I should mention that this is a somewhat dubious way of achieving what you want to do, but it's a solution true to the letter of your question. I'd recommend you look into using Jquery rather than vanilla Javascript as cross-browser headaches will be minimised (I've tested this code in my current installations of IE 7 & 8, FF, Chrome, and Safari without issue, but your mileage may vary). If you decide to go that route, it would be better to take advantage of their excellent and simple AJAX functionality using a div and dispense with the iframe entirely.
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've been battling with this simple issue for a while and I'm looking for some help...
I'm trying to make a full width colour banner that spans the full width of the page, but doesn't in any way affect the browser viewport sizing. I want it to be visible to human eyes, but I don't want it to affect the size/location of the browser's start view or scrolling behavior... just like it's not really there.
I also want to be able to place the banner in-line in the HTML.
Here is my test page: http://www.tanatu.com/widthtest
The Green Banner works perfectly, but it's y-location is defined in CSS (which is a pain)
The Pink Banner is my best guess so far, and works as intended on Chrome, but not on Safari on iOS, where the viewport is skewed to one side
Safari iOS Positioning Issue
Correct Positioning
I've been playing with this for months so any help would be MASSIVELY appreciated! :0)
Thanks!
Because you are trying to break out of your parent container that is where your challenge is. You can do this a few ways but I think the easiest without completely changing your markup would be to use a combination of viewport width units and calc()
If you change these attributes on #widthtest4 it should work:
#widthtest4 {
width: 100vw;
margin-left: calc(-50vw + 426px);
}
I was testing a website: This Website
When I stumbled upon the following problem. everything looks correct in all browsers I tesded on my computer (IE, Chrome, Safari, Firefox etc...) but When I test this website on iPad, in safari browser I get strange margin at the right side, I can't show a screenshot, but in a nutshell image all website page like you see it on computer, but shifted to the left side (so there is blank space on the right side). Can anyone suggest what is causing this?
EDIT:
I noticed that this margin is somehow affected by margin of arrows that you can see on the sides (used to list through slides). Styles of the buttons have following id's
#prevslide and #nextslide
EDIT2:
As code is very long, I will post links to stylesheets used in website here.
Slideshow stylesheets, #prevslide, #nextslide style rules can be found in second stylesheet
Style1
Style2
And main stylesheet I use to style how website looks, however I dont think that the problem lies within it.
Main Style
It looks like your problem is because of the combination of % and pixels in your css.
For example, your .header wrapper is set to 100%, but the .in-header inside it is set to 1020px. This is fine as long as your browser window is wider than 1020px, but when it shrinks, .header is sizing itself in relation to the browser window, and .in-header isn't.
Set the min-width property on your body element so it won't ever reduce below the size of your main page elements:
body {
min-width: 1020px;
}
You'll need to set a meta tag in the header for the ipad (and mobile):
<meta name="viewport" content="width=device-width" />
This instructs the browser to set the page body to match the tablet size. I'm not 100% sure this is the exact setting you want, but I don't have my iPad handy to test; whatever the solution, it lies in this tag.
I'm working on a school project, and I have to create a simple presentation webpage. The problem is that the webpage doesn't work as expected in Firefox, while in Chrome and othet WebKit browser it's all fine.
My problem is here: http://c303.usv.ro/~HPC/ (please don't change the language in English, as you will not be able to see my problem). If you go to "Echipamente" in Chrome, you'll see that the "#content" div has some nice scrollbarls and the footer stays at the bottom. If you'll do that in Firefox, the scrollbars no longer appears and the footer seems to go somewhere under the visible part of the webpage. As a workaround I use:
function mozillaFix(){
return; // we shouldn't use this
$('#content').height($('#maindiv').height() - $('#topheader').height() - $('#copynote').height() - 40)
$('#leftmenu').height($('#maindiv').height() - $('#topheader').height() - $('#copynote').height() - 40)
}
but I guess that this is not the mos elegant solution. Where could be the issue?
Set the max-height with Javascript to the desired height (I tested it with FireBug to with max-height: 400px;). Then, Firefox will make a nice scrollbar, and show the footer as you wanted.
As found on the internet, the solution is defining the height of the container of the div. If you have the following CSS it should work:
html, body {
height: 100%;
}
Url for the unruly site: http://chrism.se
After we put it live we discovered that if the viewport is too small for the content, so as to require scrolling, the background image (body-tag, repeat-x) won't extend beyond the initial view, but I can't for the life of me figure out why and how to fix it. A note to bear in mind is that I didn't code the site by myself, since I'm not that Javascript-savvy and the designers wanted some swooshy effects. My senior colleague could surely find a remedy, but he is unfortunately away and I'd like to wrap this up.
The state of the html and css is the same as when I found out about the issue, but I've tried suggestions I've seen on similar questions, mainly revolving around min-width. I don't really understand the difference between background is only as wide as viewport? and my problem?
Full view = i.imgur.com/6aDpN.jpg
Problem = i.imgur.com/X6JVp.jpg
IE does not support min-width so you can use an expression to do the same:
body {
/* fix for most browsers, fill in desired width */
min-width: 1000;
/* IE Version, fill in desired width equal to the min-width, second value with 2px less */
width:expression(document.body.clientWidth < 1000 ? "998px" : "auto" );
}
The closest thing to a working solution I could find was to from #bodyCurrent, #bodyNext:
Remove right: 0.
Add min-width: 1349px.
Looking again, maybe that's good enough.
Tested in Firefox only, using Firebug.
I realize I'm way late to the party, but I ran into the same problem and added a min-width to the body to fix this problem. Since the link you provided still has this problem, I assume you may want more advice. The min-width of the body should be at least as wide as the viewport when horizontal scrollbars appear.
It's easier to see what's happening if you make your viewport small enough for scrollbars and use Firefox's 3D view to see the page. Then you'll see that your region-footer is set to take 100% width of the body element and that the background works fine; however, the body itself is smaller than the overflow from the top part of the page so you get that cut-off looking area when you scroll. So make the body element have a min-width as large as the overflow from the top part of the page and you'll be all set. This is a pretty common problem (I even noticed it on mailchimp for a while).
Add this to the background of div#wrapper:
background:url("../img/home.png") repeat-x scroll 0 0 #1B2E4C;
Tested it in IE7:
html, body {
position:relative;
overflow:hidden;
margin:0 auto !important;
}