I am transitioning a page that used to have frames to an iframe approach to be compatible moving forward. The basic look is very simple, it's a fixed pixel height header, and then the variable height content taking up the rest of the screen space with a different page in it.
I have accomplished this via:
<style type="text/css">
* {overflow:hidden}
div#header {position:absolute;top:0px;left:0px;right:0px;height:86px;overflow:hidden;margin:0px;padding:0px;}
div#wrapper {position:absolute;top:86px;left:0px;right:0px;bottom:0px;overflow-y:auto;margin:0px;padding:0px;}
</style>
and
<div id="header">
content in top
</div>
<div id="wrapper">
<iframe src="http://someotherwebpage" style="width:100%;height:100%;" />
</div>
While this works perfectly in Chrome and IE, it fails in FF and others (i.e. iPhone). Any ideas how I can further improve this to work on all browsers?
Edit: To be specific, by "fail" I mean the scroll bar does not show up (vertical scroll bar), and thus I cannot scroll up or down in FF/others. In Chrome/IE, it shows up and works as expected.
Try changing * {overflow:hidden} to * {overflow:auto}
Related
Chrome 81, FF 75 (latest for today)
in Chrome native image lazy loading works inside iframe only. why? in FF works good
page1.htm(lazy loading does not work in Chrome but works good in FF):
<p style="margin-bottom: 1000px;">Please scroll down. The image is below the viewport.</p>
<p style="margin-bottom: 1000px;">Please scroll down. The image is below the viewport.</p>
<img src="https://wallpaperplay.com/walls/full/5/e/a/218959.jpg" loading="lazy">
page2.htm(lazy loading via iframe works both in Chrome and in FF):
<iframe src="page1.htm">
is it Chrome's bug? in FF it works good
(you can check image deferred loading via scrolling and Developers tools -> Network)
I've got the same issue but only when the image is close enough to the viewport. Otherwise it is being loaded lazily.
Please try to open this minimal working example in Chrome and slowly scroll the page down. The image will be loaded when the viewport is approximately in the middle of the page.
<html>
<head>
<style>
.dummy {
height: 700vh;
}
</style>
</head>
<body>
<div class="dummy"></div>
<img src="https://yasminfinch.com/wp-content/uploads/2015/03/Hello-icon-300x212.jpg" loading="lazy">
</body>
</html>
Without confidence, I can suggest it is a feature, not a bug. Some kind of optimization. It reduces the chance to see the image is loading when, for example, user scrolls up/down quickly enough.
In my case, I had to explicitly set width attribute either inline or in CSS file.
In fact, you can try the original demo. Lazy loading on Chrome will not work if you remove the width and height attributes in this demo.
I'm out of solution. My page wouldn't scroll on mobile devices (testing with iPhone 6).
Here is the structure
<html>
<body>
<header></header>
<div id ="content"></div>
</body>
</html>
The div "content" is about, 10000px height (lot of content)
Other pages, that does not include content, are scrolling perfectly.
So I think there is something with the overflow of the div content.
I tried overflow auto, scroll, height 100% height 100vh a lot of combinaison for html body and content but I can't get a proper solution that works both on computer and iPhone. Sometimes it's scrolling on iPhone but I have two scrollbars and my computer, sometime it is scrolling but the the header (which is supposed to fade away with headroom) stays here etc.
Any help is welcome. Thank you
http://liveweave.com/4gBZxB
Problem solved. It was not the CSS nor HTML but the JS.
I used touchSwipe and it deactivates the page scroll by default on the div you applied a swipe event on.
If you are using jquery.touchSwipe.js for swipe, do add allowPageScroll: "vertical" to the swipe.
$("#ID").swipe({
-----------
-----------
threshold:100,
allowPageScroll: "vertical"
});
it's working.
I have a header and footer, each with dynamic content. This is actually an aspx page with a master page which contains header/footer content which may vary in size. I can not enforce a px height for header or footer as they may have images or just text, etc. I want to make the Google map fill the available page height (and width) between them. I'll give the map canvas a minimum height of say 200px, just in case, but otherwise it should force the footer to bottom of the page without scrolling (unless the screen is short enough for the 200px minimum to require scrolling).
<body>
<div id="wrapper">
<div id="header">Title<br />of<br />variable<br/>height</div>
<div id="body">
<div id="map-canvas"></div>
</div>
<div id="footer">
Footer<br />of<br />variable<br />height
</div>
</div>
Here is a Fiddle showing it very close using flex approach... It seems to work in Chrome/FireFox but this does not work in IE11.
https://jsfiddle.net/randbrown/7dc8u6ja/4/
Is the flex-based approach best for this and if so what am I missing to get it working in IE? Or is there a better way to achieve this?
I finally got it working in IE11. It needed height:100% on the #wrapper div. Now it works on Chrome/Firefox/IE11/Edge.
height: 100%;
Updated fiddle
https://jsfiddle.net/7dc8u6ja/5/
I have an issue that I have seen come up in a couple different sites and I have never been able to find a solution. I have noticed that many other people have had similar issues but every fix that I have seen is not working on the site I am currently working on. Basically what I am trying to do is have a responsive layout with a header that has a repeating background that spans the entire window and a body that has a fixed width. The basic html looks like this:
<html>
<body>
<div id="header">Header content</div>
<div id="main-content">Main content here</div>
</body>
</html>
and the css is something like this:
html, body{
width:100%;
}
#header{
width:100%;
}
#main-content{
width:1000px;
}
This code is not meant to be representative of what is actually on the site that I am working on but to give you an idea of what we are trying to do. To see the actual html, css, etc. please go to http://236887.site-show.com/ and take a look at it. The site initially will look fine but if you shrink the size of the window down so that there is a horizontal scroll bar and then scroll to the right and look at the header, you will see that the repeating background is not going to the full width.
One thing that I did find is that removing the width:1000px on the main-content did fix this issue. However, we need that main-content area to be set to that width. I have also tried setting overflows to hidden and setting floats on the header but nothing seems to correct the issue.
This is especially an issue with Android/iOS systems which run on tablets, smartphones, etc. Any help that you can give me on this issue would be much appreciated.
The issue is that your main-content div is set at 1000px (with 30px horizontal padding) while your CSS file specifies your header to be 960px. Increasing the width of your header to match your content will correct the problem.
Here's the code for the fix:
.grid-50-50 {
display: table;
width: 1030px;
}
If you are doing it in HTML5 I recommend using 100% <header> tag then adding a 100% div 'wrapper'....with this you can have more flexibility.
But for this...If you dont' want to edit the header then set your min to 1030px in your body tag:
body {min-width: 1030px;}
:)
I have a page I am designing that is purely html with a css stylesheet.
I have it set up with scrollable content with a header and footer somewhat like this example here: http://www.cssplay.co.uk/layouts/basics2.html
except my header and footer consist of multiple images as opposed to text.
The issue I am having is that when I scroll down the page a little and resize the window to a smaller size, my header and footer disappear... but only in Firefox.
When I maximize the window again, the footer appears but some 300-400-odd pixels too high and the header is still gone.
Safari, Opera and Chrome all work fine; I can resize the browser window however much I want and my page reacts appropriately.
What could be causing this?
The weird thing is that if I don't scroll at all, and then proceed to resize the window, Firefox retains my page's styling...
possibly an overflow:scroll issue?
thanks everyone
sorry, i forgot to include my link:
http://www.theskycaptain.com/THESKYCAPTAIN.COM/projects/cosmicwomb.html
(I realize that the bandcamp player isn't behaving properly and my codes a bit messy, but I'm in the midst of developing, I've just hosted it to sort out this issue: simply scroll down a bit, resize the window and then maximize and you will see what I mean)
Your webpage has an improperly defined img and br tags everywhere including other errors that need to be cleaned up.
Incorrect Example:
<img src="../image/topspace.png"></img>
Correct Example:
<img src="../image/topspace.png" alt="image" />
For more info on img tags, read here.
Also, change:
</br>
To:
<br />
Try giving top and bottom values to your absolutely positioned elements.
i.e.
.topspace, .headercon, .scroller { top: 0px; }
.footer { bottom: 0px; }
( These are not necessarily the exact values you'd want, but simply an example )