I am simply trying to make a iFrame to show a website. The current iframe code that I have does in fact work, but I would like to make the iframe show 100% on the height and width. The current code shows the site 100% height, but not width, so can someone help me with this?
Here is the exact page so you can see what I am talking about:
http://dnatecservices.com/wp-demo/Untitled-2.html
Please view the page source to see my html. For some reason, I am unable to post the code here.
So can someone provide me with an HTML that will show this iframe both 100% on the height and width? I want the site to show on 100% of the user's screen.
After you remove the width:1000px; from the 'container' DIV you will want to remove the border from the iframe :
#iframe {
height: 100%;
width: 100%;
display: block;
border: 0px;
}
Your css code shows:
#container {
width: 1000px;
min-height: 550px;
position: relative;
}
remove the width here and it will show the Iframe with 100% width
Related
I am having trouble making a embedded Typeform 100% height.
The div is 250 px in height and i want the Typeform to take up all 250px. In the embed code from Typeforms own website the height is set to 100%.
Image from Typeform
I have made an example page here -> https://datapilot.dk/hoffaps-demo/test-page/ - the typeform should take up all the blue space.
I use the theme Uncode for wordpress.
Help me please!
As per typeform community post (https://community.typeform.com/integrate-your-typeform-43/typeform-full-page-embed-not-filling-full-page-on-my-wordpress-site-5072?postid=28836#post28836), try this:
<style>
#wrapper {
width: 100%;
height: 100%;
min-height: 100vh;
}
iframe {
border-radius: 0 !important;
width: 100%!important;
height: 100vh!important;
}
</style>
<div id="wrapper" class="alignwide" data-tf-widget="bUfkO2GI" data-tf-inline-on-mobile data-tf-medium="snippet"></div>
<script src="//embed.typeform.com/next/embed.js"></script>
Hi Uffe and welcome to StackOverflow
You can specify a height in pixel too, this is for example how it would look like if you do height: 250px;
https://www.evernote.com/l/ACVK-joRZgRCR7fR61-TARyiCTaJr77ng8cB/image.png
One alternative could also be to use the official Typeform Wordpress plugin.
Hope it helps
I'm trying to make extensible sidebars to the full document height without Javascript. I started to wrote some code to make this happen, but however, both div height are not extending after the viewport size.
Here is a small codepen of what is my problem http://codepen.io/anon/pen/bpAzo. As you can see, if you scroll down, height of both sidebars are just set to viewport size which is weird because i set both body, html, #sidebars to height: 100%;.
Is there a way to extend to full page height without using Javascript ?
Thank you.
You just set your sidebar height to 100% which gives it just a 100% of current browser size. Remove the height of your sidebar and remove also the html and body code.
#sidebar {
position: absolute;
top: 0;
width: 100px;
color: green;
color: #FFFFFF;
}
.left {
background-color: blue;
left: 0;
}
.right {
background-color: red;
right: 0;
}
DEMO HERE
http://codepen.io/anon/pen/jfEhH
If you set html and body to 100% height it will just be 100% of the window ( it's parent ) size. You need to set a specific height ( 3000px ) or 200% for example, which will be 2 times the windows height.
Body tag on codepen by default have margin. Without margin all looks good.
http://codepen.io/suez/pen/zJhne
But in the future, i will reccomend you to use overflow: hidden; on body (combined with margin: 0), this will provide 100% confidence that all of your content always will be inside viewport (without any scrolling).
Edited: if you want to use more than 100% of viewport height for your site, then you need to use position: fixed; on sidebar.
Just make the "height" attribute in your CSS style sheet to "auto", like as follows,
sidebar {
position: absolute;
top: 0;
height:auto;
width: 100px;
color: green;
}
Don't worry about "sidebar.right" ,as u will see no red color on right side of your page. It will automatically show up when you add up some content to it or just add few <br /> tags.
I am a 3D artist by profession, however I have recently been trying to create a website for myself from scratch. My needs are very simple - a widescreen website which consists of a background image and thumbnails which once clicked load a overlay pop up showing further information on that particular content. The pop-up overlay is not the issue here.
My current problem is that I need my page to always be 100% of the browser width, so that means it must scale - along with all the content (thumbnails) in it. I created my first attempt on a screen which is 1920x1080 and the result was perfect, however - when I loaded it on my laptop which has a 1366 screen, it resulted in only showing me a slice of the full page, and gave me scroll bars to view the rest.
I am placing the thumbnails via px as I have got the values from Photoshop but I understand that my needs can only be accomplished via % - how can i overcome this?
Here is a visual of my setup http://i.imgur.com/ZdgTRYk.jpg
Grey is browser window
Red is background
Green is content
Everything should scale at the SAME rate.
Here is my HTML
<body>
<div id="background">
<img src="images/background.png">
<div id="box3thumb">
img src="images/box3thumb.png">
</div>
</div>
</body>
and my CSS
#background {
position:relative;
left:0px;
}
#box3thumb {
position:absolute;
left:514px;
top:117px;
width:92px;
height:200px;
}
I really appreciate any help I might recieve on this.
Thanksm
Elliott
ok, for your #background, you can use this css to scale the browser:
#background{
width: 100%;
background: red;
}
and for your thumbnails, I don't understand very well how you want them placed, but according to your image, you'll need to put them inline:
#thumbnails{
display: inline-block;
margin-left: 15%;
}
The % of the margin may vary depending on what you want.
If you set the body and html elements of your page to
CSS:
html, body
{
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
This will prevent scrollbars from appearing, while maintaining the full width and height of the screen, regardless of resolution. As for your thumbnails, if you have a set number of thumbnails then you can set the widths of your thumbnails to say, 10% width and height with a margin: 1%;, this will allow you to fit roughly 64 thumbnails, but they will get small if the user has a shitty resolution.
.thumbnail
{
position: relative;
display: inline-block;
width: 10%;
height: 10%;
margin: 1%;
}
EDIT ------------------
With large thumbnails like that you could make it more like this:
.thumbnail
{
position: relative;
display: inline-block;
width: 20%;
height: 20%;
margin: 5%%;
}
Use in style.css
#background{
width: 90%;
background: red;
}
/*thumbnails*/
#thumbnails{
display: inline-block;
margin-left: 10%;
vertical-align:text-bottom;
}
I have a footer i created for a website, but for some reason when i change the width of the window the background image seems to just disappear throughout the right side as i'm shrinking the width of the window.
The footer is supposed to stretch 100% accross the bottom of the screen and does so until i start shrinking the width of the window to a certain point.
You can see an example of my issue Here
Any ideas how to fix this? I am totally stumped. Maybe i did something wrong with width?
The width of #footer is set to auto, and the content within (#content-wrapper) has a fixed width.
This is causing the horizontal bars to appear.
To solve this, you can set overflow:hidden to the parent div (#footer).
Try this:
#footer {
background-image: url("images/footer-bg.png");
background-repeat: repeat-x;
height: 451px;
margin: auto 0;
width: 100%;
overflow: hidden; //What you're looking for.
}
If you also want the inner div (#content-wrapper) to dynamically resize itself, use a percentage, instead of a pixel dimension for width:
#footer #content-wrapper {
height: 451px;
margin: auto;
width: 83%;
}
Hi i have check to your demo page you have define your footer width 1265px and now
than your define min width your html or body as like this
body, html {
min-width: 1265px;
}
because your max width is 1265 define to your footer so that you define same width your body or html
I'm currently trying to have an iframe fit the size of my screen, and any other user using it at different resolutions, except no matter what I try I'll either end up with the iframe being too small or the height being too large causing a double scroll bar. (The iframe and the page itself having scroll bars).
My objective is having the iframe fit only 85% width of the page (which works!), 100px from the top of the screen (also works), and then for the bottom to fit the edge of the bottom of my browser (that's where I'm stuck...)
HTML
<div id="maindiv" class="maindiv">
<iframe id="theiframe" class="iframeautowidth" seamless src="http://whateverdomain.com></iframe>
</div>
CSS:
.maindiv {
width: 85%;
top: 100px;
}
.iframeautowidth {
left: 0px;
top: 0px;
bottom: 0px;
width: 85%;
height: 100%;
border: 0
overflow: hidden;
display: block;
margin: 0;
float: left;
}
If it counts for anything, I have the latest jquery running on my page if it'll help. Thanks in advance!
Use the onload() event of your iframe and the onresize() event of the window to resize the iframe to the required size.
This Microsoft Support article explains it well.
FYI, in javascript screen.width & screen.height will give you the screen resolution.
If you had Fx4, a simple height: -moz-calc(100%-100px) would work a wonder. A pity this feature is introduced and supported so late in CSS3.
If the 100px top is for tabs navigating the iframe, there may be a workaround. Just fill up your iframe to 100% height and then put those tabs inside the iframes as another iframe with a fixed size. Or just resort to frameset.
Whether this works for you or not depends on your exact design, but hope that helps.