I have some simple code for an iframe. I want to display a webpage within a webpage seamlessly i.e no scroll bar
I have tried hidden overflow but I just cant seem to get it right
HTML
<iframe name="Framename" src="https://website"
width="100%" height="100%" frameborder="0" scrolling="auto"
class="frame-
area">
</iframe>
CSS
.frame-area {
display: block;
width: 100%; /* RESPONSIVE WIDTH */
max-width: 100%;
height: 100%;
overflow: hidden; /* EDIT TO hidden FOR NO SCROLLBAR */
border: #999999 1px solid;
margin: 0px;
padding: 0px;
}
The results I have is a full width page with only a small amount of height
I wish it to display full width and height and be fully responsive
To make your iframe full height and width of your page use this css and iframe tag.
[EDIT] Due to your comment that there is a footer I have edited so it will work with a footer. The footer disappeared because the iframe was 100% height and pushed it off at the bottom, which caused a scroll bar to appear. See below for the fix.
In the example code below, notice the CSS for the footer shows 30px height. So the iframe should be 30px less than the screen height to allow for the footer space. This is possible to do using height:calc(100% - 30px); of course substitute the actual height of your footer for 30px.
body {
margin:0;
padding:0;
}
.frame-area {
position:absolute;
height:calc(100% - 30px); /* example below if your footer is 30px in height */
width:100%;
border:none;
}
footer {
position:absolute;
bottom:0;
height:30px; /* match this height in your iframe width calc value */
}
And with the CSS above, you can simplify the iframe tag's formatting:
<iframe name="Framename" src="https://website" class="frame-area"</iframe>
<footer>This is the footer</footer>
Related
How can I have a div with height 100% filling the viewport AND a second div (positioned absolute) covering the entire page (a dropdown)?
More info: I have a div on my homepage containing a hero image. The div needs to fill the viewport. Below the hero div is more content. I have the following code:
html { height: 100%; }
body { height: 100%; }
.hero { height: 100%; }
I would prefer to use height:100% than height:100vh because on tablets and phones (in Chrome) the viewport height changes when scrolling and in iOS Safari the bottom of the hero div is hidden behind the apps controls (bookmarks etc) when using 100vh.
The above works fine for the hero image div. BUT I have a drop down menu/nav bar. The dropdown needs to have a height of the entire page, not just the viewport. The menu has an absolute position. If I set the height to 100% it only covers the viewport height, not the entire page. The same is true if I set top:0; and bottom:0;.
How can I do this? Thank you
First pic shows the hero div in blue with a height of the screen (minus the header). There is more content below the 'fold'.
Second pic show the drop down menu which should cover the entire height of the page. Hence the white drop down will have considerably more height than just the hero div.
The inner element's height 100% means it will occupy its container. If you want to occupy the entire page, you have to use top:0, left:0 and in JavaScript, use innerElement.style.height=document.body.style.height;
Previous snippet might not work
You should use clientHeight
innerElement.style.height=document.body.clientHeight
You can use 'vh' and 'vw' instead:
100vh - 100 virtual height %
100vw - 100 virtua width %
You can use this:
function openMenu(){
document.getElementById("ddl").style.display = "block";
}
function closeMenu(){
document.getElementById("ddl").style.display = "none";
}
body{
height: 100%;
display: flex;
flex-direction: column;
padding-bottom: 50px;
position: relative;
width: 300px; /*for test */
}
.menu{height: 50px;} /* first child of body */
.hero{
flex: 1;
background-color:#4de6d0;
min-height: calc(100vh - 50px); /*for test */
} /* second child of body */
.dropDown {
position: absolute;
min-height: calc(100% - 50px);
top: 0;
background-color:white;
display: none;
width: 80%;
}
.dropDown > div{
height: 60px;
text-align: center;
line-height: 60px;
}
<body>
<div class="menu" onclick="openMenu()">Menu</div>
<div class="hero"></div>
<div class="dropDown" id="ddl">
<div onclick="closeMenu()">Close</div>
<div>Work</div>
<div>About</div>
<div>Services</div>
<div>Ethics</div>
<div>Contact</div>
</div>
<body>
Finally I did not understand what you exactly want, But if you want the drop down is the height of screen you can change this property:
min-height: calc(100% - 50px);
to this: calc(100vh - 50px);
In .dropDown styles
From exhaustive research it doesn't seem possible to have one div with a height of 100% to fill the height of the screen and a second div with height 100% to cover the height of the enire page.
Currently developing a portfolio theme for a friend and trying to create a video background in the hero area.
Currently, it appears the video is only taking its natural width, is there any way to force this to stretch to fill 100% of the div? I'm not worried about quality, it's blurred anyways.
I'm using videoBG to embed the video content, and the following styles are applied to the containing div:
#hero {
min-width: 100%;
display: block;
height: 400px;
margin: 0 auto;
}
It was actually the 100% height that I was applying to the video that was throwing it off in the first place. Changing this to auto let the video stretch while setting overflow to hidden.
Try to use that:
#hero { /* div filled by video */
position:relative;
/* other properties ... */
}
#video { /* video div */
display:block;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
I'm looking to position a Google Maps div with a sidebar on the right that displays listings. I want to make it so the window doesn't scroll, and the contents on the page are fluid when resizing the screen.
I have previously attempted to use box-sizing like the following:
#map-wrapper * {
box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
-khtml-box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
-ms-box-sizing: border-box !important;
}
#map-container {
position: absolute;
width: 100%; height: 100%;
margin: 0;
overflow: hidden;
border-top: 50px solid transparent !important; border-right: 350px solid transparent !important;
}
This starts to become a nightmare when trying to have a scrolling list in the sidebar. Does anyone have a good solution, or am I on the right track with box-sizing?
Box-sizing is purely optional for something like this. There are many ways to go about it, but I have one favored method that is simple and works well in old browsers like IE6.
For the various frames you are trying to create (sidebar and Gmaps/content frame) create a css rule that sets position:absolute; overflow:auto;. Now you can take advantage of a cool trick in CSS absolute positioning. If you set both top and bottom in CSS, the height is automatically calculated. Same goes for widths using left/right. So to make our two divs 100% height set top: 0; bottom:0;.
If you want the sidebar to be 300px wide and anchored to the right, then set width:300px; right:0;. For the content div, set right:300px; left:0;.
Now you need to prevent the body scrollbars from appearing. First of all, you will need to remove the default margin/padding from body by setting them to 0. Also, you need to set html & body to height:100%; (100% equals the viewing area height), other wise they default to auto which is the content's height. It is also wise to add overflow:hidden to body, since some browsers think `body{height:100%;} means they need to show scrollbars.
Here is a quick mockup on JS fiddle showing you how this works.
Elimn's suggestion did not work for me, but the following did (I created a header bar above the Google Map):
body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
#map-canvas { height: 100%; overflow: auto; }
In the body:
<div id="topmenubar" style="position:relative;background:olive;height:40px;top:0;"></div>
<div id="map-canvas"></div>
I am looking to implement the opposite behaviour to the following question: CSS Push Div to bottom of page. I.e., when content overflows to the scrollbars, I would like the footer to be at the bottom of the page, like Stack Overflow.
I have a div with id="footer" and the following CSS:
#footer {
position: absolute;
bottom: 30px;
width: 100%;
}
This moves the div to the bottom of the viewport - but the element stays there even when you scroll the page down, so it is no longer at the bottom.
How can I make sure the div stays at the bottom of the page's contents even when the content overflows? I'm not looking for fixed positioning, only for the element to be at the bottom of all content.
Image:
This is precisely what position: fixed was designed for:
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
Here's the fiddle: http://jsfiddle.net/uw8f9/
Unfortunately you can't do this with out adding a little extra HTML and having one piece of CSS rely on another.
HTML
First you need to wrap your header,footer and #body into a #holder div:
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
CSS
Then set height: 100% to html and body (actual body, not your #body div) to ensure you can set minimum height as a percentage on child elements.
Now set min-height: 100% on the #holder div so it fills the content of the screen and use position: absolute to sit the footer at the bottom of the #holder div.
Unfortunately, you have to apply padding-bottom to the #body div that is the same height as the footer to ensure that the footer does not sit above any content:
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
#body{
padding-bottom: 100px; /* height of footer */
}
footer{
height: 100px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
Working example, short body: http://jsfiddle.net/ELUGc/
Working example, long body: http://jsfiddle.net/ELUGc/1/
Just worked out for another solution as above example have bug( somewhere error ) for me. Variation from the selected answer.
html,body {
height: 100%
}
#nonFooter {
min-height: 100%;
position:relative;
/* Firefox */
min-height: -moz-calc(100% - 30px);
/* WebKit */
min-height: -webkit-calc(100% - 30px);
/* Opera */
min-height: -o-calc(100% - 30px);
/* Standard */
min-height: calc(100% - 30px);
}
#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
position: relative;
}
for html layout
<body>
<div id="nonFooter">header,middle,left,right,etc</div>
<div id="footer"></div>
</body>
Well this way don't support old browser however its acceptable for old browser to scrolldown 30px to view the footer
plunker
I realise it says not to use this for 'responding to other answers' but unfortunately I don't have enough rep to add a comment onto the appropriate answer (!) but ...
If you are having problems in asp.net with the answer from 'My Head Hurts' - you need to add 'height : 100%' to the main generated FORM tag as well as HTML and BODY tags in order for this to work.
You didn't close your ; after position: absolute.
Otherwise your above code would have worked perfectly!
#footer {
position:absolute;
bottom:30px;
width:100%;
}
I would comment if i could , but i have no permissions yet, so i will post a hint as an answer, for unexpected behavior on some android devices:
Position: Fixed only works in Android 2.1 thru 2.3 by using the following meta tag:
<meta name="viewport" content="width=device-width, user-scalable=no">.
see http://caniuse.com/#search=position
This is an intuitive solution using the viewport command that just sets the minimum height to the viewport height minus the footer height.
html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}
#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}
position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;
I've solved a similar issue by putting all of my main content within an extra div tag (id="outer"). I've then moved the div tag with id="footer" outside of this last "outer" div tag.
I've used CSS to specify the height of "outer" and specified the width and height of "footer". I've also used CSS to specify the margin-left and margin-right of "footer" as auto. The result is that the footer sits firmly at the bottom of my page and scrolls with the page too (although, it's still appears inside the "outer" div, but happily outside of the main "content" div. which seems strange, but it's where I want it).
I just want to add - most of the other answers worked fine for me; however, it took a long time to get them working!
This is because setting height: 100% only picks up parent div's height!
So if your entire html (inside of the body) looks like the following:
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
Then the following will be fine:
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
#body{
padding-bottom: 100px; /* height of footer */
}
footer{
height: 100px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
...as "holder" will pick up it's height directly from "body".
Kudos to My Head Hurts, whose answer was the one I ended up getting to work!
However. If your html is more nested (because it's only an element of the full page, or it's within a certain column, etc) then you need to make sure every containing element also has height: 100% set on the div. Otherwise, the information on height will be lost between "body" and "holder".
E.g. the following, where I've added the "full height" class to every div to make sure the height gets all the way down to our header/body/footer elements:
<div class="full-height">
<div class="container full-height">
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
</div>
</div>
And remember to set height on full-height class in the css:
#full-height{
height: 100%;
}
That fixed my issues!
if you have a fixed height footer (for example 712px) you can do this with js like so:
var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
bgTop = winHeight - 712;
document.getElementById("bg").style.marginTop = bgTop+"px";
}
I hit my footer with a margin-top: auto and it did the trick! Im commenting this here just in case it could help any future visitors.
I am create a div with 100% height
HTML
<div id="BottomShelf"></div>
CSS
#BottomShelf{ position:absolute; top:400px; left:0px; width:100%; height:100%;; background:#d4b7a0; z-index:1;}
There is a page scroll showing up on the page, but I need a page scroll (not div scroll) only when there is content. height:auto does not do the trick too.
I need the div to take the browser height irrespective to the height of the monitor.
try to set top: 400px; bottom: 0; instead of top: 400px; height: 100%;
EDIT: note that this might not work in IE6 (don't know about IE7)
The body tag has some default margin, so if you need a div to take the place as body, first set the body style to: margin: 0;
I tried creating a div with the following styles, and it seems to do what you want:
height: 100%;
overflow: auto;
overflow: auto will give the div a vertical scrollbar if the content exceeds the height.
Have you tryd the overflow:hidden; css style property?
Sorry it was overflow:hidden;