在整个网页周围放置父级 div

Question

我想在我的整个网页周围放置一个黑框。

我希望父级 div 位于整个页面周围，而不仅仅是底部。我的 HTML 看起来像这样：

<body>
<!-- Header --> 
        <section id = "top" class = "top">
            <div class="container">
                <h1 class = text-center>Sarah Hynds</h1>
            </div>
        </section>
        <!------ tabs ------>
        <nav class="mynav">
            <ul>
                <li>
                    <a href="">About</a>
                </li>
                <li>
                    <a href="">Resume</a>
                </li>
                <li>
                    <a href="">Projects</a>
                </li>
                <li>
                    <a href="">Interests</a>
                </li>
                <li>
                    <a href="">Contact</a>
                </li>
            </ul>
        </nav>
        <hr id="separator" width="35%" color="black">
        <div class="floating-box" id="about"></div>
        <div class=floating-box" id="profile">
        </div>
        <div class="parentDiv"></div>
</body>

我的 css 看起来像这样：

.parentDiv { 
width: 90%; 
border: 1px solid #000000; 
margin-top: 5%; 
margin-left: 5%; 
margin-right: 5%; 
height: 100%; 
display: inline-block; 
padding-bottom: 50px;
display: inline-block;
white-space: nowrap; }

如何在整个页面周围放置边框？非常感谢！

Answer 1

<body>
<div class="parentDiv">
<!-- Header --> 
        <section id = "top" class = "top">
            <div class="container">
                <h1 class = text-center>Sarah Hynds</h1>
            </div>
        </section>
        <!------ tabs ------>
        <nav class="mynav">
            <ul>
                <li>
                    <a href="">About</a>
                </li>
                <li>
                    <a href="">Resume</a>
                </li>
                <li>
                    <a href="">Projects</a>
                </li>
                <li>
                    <a href="">Interests</a>
                </li>
                <li>
                    <a href="">Contact</a>
                </li>
            </ul>
        </nav>
        <hr id="separator" width="35%" color="black">
        <div class="floating-box" id="about"></div>
        <div class=floating-box" id="profile">
        </div>

</div>
</body>
</html>

只需将它包裹在您希望它影响的内容周围即可。 :-)

在整个网页周围放置父级 div

Put a parent div around entire webpage

html

css

border