Issue
I'm facing an issue with the login.php screen and the addphoto.php screen. I want these screens to cover the entire page, but despite using the following code:
.login-screen, .form-screen {
position: fixed;
top: 0;
left: 0;
display: none;
z-index: 1;
height: 100vh;
width: 100vw;
}
There is a small white space at the bottom of the login.php screen. Additionally, on the addphoto.php screen, I am unable to scroll down as the form elements exceed the screen height. You can view the problem in this animation.
I would greatly appreciate any help in ensuring that these screens behave as intended!
https://i.stack.imgur.com/HY49M.png https://i.stack.imgur.com/A7glR.png
Update
I have already referenced this post. While it does make the div scrollable, I still encounter issues where I am able to scroll past the addphoto.php or login.php page and see the content below. Check out this animation for clarification.
Snippet
photos.php
<?php
$name = "Photos";
require_once('config.php');
$sql = 'SELECT * FROM Image;';
require_once("nav.php");
require_once("php/header.php");
require_once("php/grid.php");
require_once("php/footer.php");
require_once('login.php');
require_once('addphoto.php');
?>
config.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>
<?php echo "$name" ?>
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Styling-->
<link type="text/css" rel="stylesheet" href="css/main.css" />
<link type="text/css" rel="stylesheet" href="css/grid.css" />
<link type="text/css" rel="stylesheet" href="css/form.css" />
<?php
$nameLowercased = strtolower($name);
echo "<link type='text/css' rel='stylesheet' href='css/$nameLowercased.css'/>";
?>
<!--Custom icon-->
<link href="https://file.myfontastic.com/fNQ9F99nd88vQm96ESUaLW/icons.css" rel="stylesheet" />
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!--Javascript-->
<script type="text/javascript" src="js/main.js"></script>
</head>