当文章内容经过折叠时，在容 器上留下填充

Question

我有一个容器，里面有我的标题，导航，侧边栏和文章。当物品的内容经过折叠时，在容​​器的左侧添加填充物或边缘。当你在内容经过折叠的页面和没有内容的页面之间进行更改时，很明显，因为容器会向右颠簸。

HTML

<div id="container">

<header>
    Blog
</header>

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="newpost.html">New post</a></li>
        <li><a href="about.html">About</a></li>
    </ul>
</nav>

<aside>
    <form id="newsletter">
        <h2 label for="newsemail">Newsletter signup</h2 label>
        <input type="email" name="newsemail" placeholder="Enter email..." required>
        <button type="submit" class=submitbutton>Submit</button>
    </form>
</aside>

<article>
    <section><h1>Post 1</h1>
    Lorem ipsum dolor sit amet
    <br>
    <span class="commentlink">
    <a href="#">View comments</a>
    </span>
    <hr>
    </section>
    <section>
    <h1>Post 2</h1>
    Lorem ipsum dolor sit amet
    <br>
    <span class="commentlink">
    <a href="#">View comments</a>
    </span>
    <hr>
    </section>
    <section>
    <h1>Post 3</h1>
    Lorem ipsum dolor sit amet
    <br>
    <span class="commentlink">
    <a href="#">View comments</a>
    </span>
    <hr>
    </section>
</article>

CSS

页眉，页脚，导航，文章，旁边{display：block; }

#container {border-radius：20px;背景色：＃97C02F;填充：10px 50px 30px 50px;保证金：0px auto;宽度：880px;溢出：汽车; }

一边{float：left;宽度：150像素;填充右：15像素;红色;边距：15像素; }

文章{float：left;宽度：660px;保证金左：20像素; }

section {font-family：'Droid Sans'，sans-serif;颜色：#FFFFFF;字体大小：15像素;字体重量：正常; }

我没有插入我的所有代码，但我想我已经把必要的位插入了。

Answer 1

您可以使用html { overflow-y:scroll }强制滚动条，即使内容不需要滚动，因此不会发生跳跃。

Answer 2

可以在CSS类中使用的HTML语法，用于处理容器或div中的任何超出;等等

此代码可让您在必要时访问滚动条。

.of{overflow:auto}