Jump to content

can not get iframe to grow to 100% of viewpoint


Recommended Posts

I am trying to get an iframe to have its height the same as the viewpoint  I have got it to be 100% wide but can not get it to fill the page.  Please can someone suggest how I might do this?


<!DOCTYPE html>
<html lang="en" xml:lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="styles.css">
<div class="w3-main"><!-- margin: 180px 0em 70px 0em; -->
	<div class="mainContent w3-row"><!-- mainContent   margin-left: 1%; margin-right: 1%; -->
			<h3>Virtual tour</h3>
			<div class="width100pc">
			<iframe src="https://www.example.com/thepage.php" class="tour"></iframe><!-- tour     width: auto; width: 100%; height: 100%; max-height: 600px; -->
			<div class="w3-container">
				<div class="w3-row">
				00. <a href="00.php" class="link1">more</a><br><br>
				00. <a href="00.php" class="link1" aria-label="00">more</a><br><br>
				00. <a href="00.php" class="link1" aria-label="00">more</a><br><br>
				00. <a href="00.php" class="link1" aria-label="Read more about ">more</a><br><br>
				00. <a href="00.php" class="link1">more</a>


Link to comment
Share on other sites

A height of 100% fills to the parent's height. If you want the full height of the viewport then (a) make sure the parent element - and its ancestors - are the full height as well, or better yet (b) don't use percentages and use actual meaningful units like vh.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.