jasonc310771 Posted July 18, 2023 Share Posted July 18, 2023 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"> <head> <title>Title</title> <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"> </head> <body> <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> <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> </div> </div> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
requinix Posted July 18, 2023 Share Posted July 18, 2023 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.