重叠内容超出页面范围

Question

我正在尝试创建一个页面，其中弹出的叠加层内容超出页面范围单击按钮会出现此叠加内容

<div id="myNavNav" class="overlay">
                                    <div class="overlay-content container-fluid">
                                        <div class="row">
                                            <div class="col-xl-12">
                                                <div class="row">
                                                    <div class="col-xl-9 col-lg-9 col-md-9 col-sm-9 col-9">
                                                        <iframe src="C:\Users\Bidesh Das\Desktop\Python Pocket Reference 5th Edition Book.pdf" style="height: 100%; width: 100%">
                                                            View PDF
                                                        </iframe>
                                                    </div>
                                                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col-3">
                                                        <div class="card">
                                                            <div class="card-header d-flex align-items-center">
                                                                <h4 class="mb-0">Name of AQQR</h4>
                                                                <div class="ml-auto">
                                                                    <a class="toolbar" role="button" href="javascript:void(0)" onclick="closeNavNav()">
                                                                        <i class="mdi mdi-close-outline"></i>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                            <div class="card-body" style="padding: 0">
                                                                <ul class="list-group list-group-flush">
                                                                    <li class="list-group-item d-flex align-items-center">
                                                                        <button class="btn btn-outline-primary" style="margin-right: 1px">
                                                                            <i class="fas fa-chevron-left"></i>
                                                                        </button>
                                                                        <button class="btn btn-outline-primary">
                                                                            <i class="fas fa-chevron-right"></i>
                                                                        </button>
                                                                        <button class="btn btn-primary ml-auto">
                                                                            Return
                                                                        </button>
                                                                    </li>
                                                                    <li class="list-group-item">
                                                                        <h5 style="margin-bottom: 0">Submitted By</h5>
                                                                        <select class="custom-select">
                                                                            <option selected value="1">One</option>
                                                                            <option value="2">Two</option>
                                                                            <option value="3">Three</option>
                                                                        </select>
                                                                    </li>
                                                                    <li class="list-group-item">
                                                                        <h4 style="margin-bottom: 0">Files</h4>
                                                                        <p style="margin-bottom: 0">Handed on 10-04-20</p>
                                                                        <div class="d-flex align-items-center">
                                                                                <button class="btn btn-primary active" href="#" style="margin-right: 1px">
                                                                                    <i class="mdi mdi-file-pdf"></i>
                                                                                    Assignment.pdf
                                                                                </button>
                                                                                <button class="btn btn-primary">
                                                                                    <i class="mdi mdi-open-in-new"></i>
                                                                                </button>
                                                                        </div>
                                                                    </li>
                                                                    <li class="list-group-item">
                                                                        <h5 style="margin-bottom: 0">Marks</h5>
                                                                        <div class="d-flex align-items-center" style="max-width: 50%">
                                                                            <form class="mb-0">
                                                                                <div class="form-group" style="margin-bottom: 0">
                                                                                    <div class="form-control d-flex align-items-center" style="padding-top: 0; padding-bottom: 0; padding-left: 0">
                                                                                        <input type="text" class="form-control" style="text-align: right;">
                                                                                        <span>/100</span>
                                                                                    </div>
                                                                                </div>
                                                                            </form>
                                                                            <div class="dropdown ml-auto">
                                                                                <a class="toolbar" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="mdi mdi-dots-vertical"></i>  </a>
                                                                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
                                                                                    <a class="dropdown-item" href="#">Change total points</a>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </li>
                                                                    <li class="list-group-item">
                                                                        <h5 style="margin-bottom: 0">Private Comments</h5>
                                                                        <form action="#" id="basicform" data-parsley-validate="">
                                                                            <div class="form-group">
                                                                                <input type="text" data-parsley-trigger="change" placeholder="Add private comment..." autocomplete="off" class="form-control">
                                                                            </div>
                                                                            <div class="row">
                                                                                <div class="col-sm-12 pl-0">
                                                                                    <p class="text-right">
                                                                                        <button class="btn btn-space btn-secondary">Cancel</button>
                                                                                        <button type="submit" class="btn btn-space btn-primary">Post</button>
                                                                                    </p>
                                                                                </div>
                                                                            </div>
                                                                        </form>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

<a class="toolbar" role="button" href="javascript:void(0)" onclick="closeNavNav()">
                                                                        <i class="mdi mdi-close-outline"></i>
                                                                    </a>

<script>
    function openNav() {
      document.getElementById("myNav").style.width = "100%";
    }

    function openNavNav() {
      document.getElementById("myNavNav").style.width = "100%";
    }

    function closeNav() {
      document.getElementById("myNav").style.width = "0%";
    }

    function closeNavNav() {
      document.getElementById("myNavNav").style.width = "0%";
    }
    </script>

我在这里附上图片

即使我在页面末尾滚动，内容也不可见任何意见或解决方案都是可取的

我也是HTML / CSS的新手

Answer 1

[尝试操作css（首先通过将高度更改为非常低的值，同时还要更改显示属性），首先通过检查chrome或mozilla dev工具上的元素来尝试一下，然后再应用它们并继续检查其特异性，因此被覆盖