为什么我的模态页眉和模态页脚导致我的网站布局混乱

Question

我创建了一个带有网格布局的基本站点和一个带有登录表单的模式。但是，我注意到在为模态页眉和页脚添加标签后，布局完全搞砸了，中间留下了很大的空隙。当前页面看起来像

页面的预期结果应该如下所示： https://codepen.io/mor10/pen/QvmLpd 如果我不包括模态页脚和页眉标签，它会按预期工作。模态及其周围的当前代码是这样的：

代码是为了能够 post with codepen link:

  <main id="content" class="main-content">
        <!-- Modal for logging in -->
            
        <h2>Main content area</h2>
        <p>The main content area is where the magic happens. Right now, the main content is on the left and the sidebar is on the right. If you go into the markup for this document and add <code>dir="rtl"</code> to the <code>html</code> element, the two elements will swap spaces because CSS Grid honors text direction.</p>
        <div id="loginModal" class="modal">
        
                    <div class="modal-content">
                <div class="modal-header">
                <span class="close">&times;</span>
                <h2>Login</h2>
                </div>
                <div class="modal-body">
                <form action="" method="">
                    <label for="fname">Username:</label><br>
                    <input type="text" id="user"><br>
                    <label for="lname">Password:</label><br>
                    <input type="text" id="password"><br><br>
                    <input type="submit" value="Login">
                </form>
                <p>Don't have an account?</p><p>Create one</p>
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
      
      </div>

    </main>

令我感到很奇怪的是，模态正在影响布局，但只有在使用模态的页眉和页脚时才会如此。在我以前制作的网站上，我使用了多个模式并且没有遇到这个问题。

Answer 1

您有一个没有开始标签的结束 </div> 标签：

<main id="content" class="main-content">
    <!-- Modal for logging in -->
        
    <h2>Main content area</h2>
    <p>The main content area is where the magic happens. Right now, the main content is on the left and the sidebar is on the right. If you go into the markup for this document and add <code>dir="rtl"</code> to the <code>html</code> element, the two elements will swap spaces because CSS Grid honors text direction.</p>
    
    <div id="loginModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <span class="close">&times;</span>
                <h2>Login</h2>
            </div>
            <div class="modal-body">
                <form action="" method="">
                    <label for="fname">Username:</label><br>
                    <input type="text" id="user"><br>
                    <label for="lname">Password:</label><br>
                    <input type="text" id="password"><br><br>
                    <input type="submit" value="Login">
                </form>
                <p>Don't have an account?</p><p>Create one</p>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
    </div> <!-- this should be removed -->
</main>

为什么我的模态页眉和模态页脚导致我的网站布局混乱

Why is my modal-header and modal-footer causing my websites layout to mess up

html

css

modal-dialog