当物品的内容通过折叠时，在容​​器上留下填充

我有一个容器，里面有我的标题，导航，边栏和文章。 当物品的内容经过折叠时，容器的左侧会添加填充或边距。 很显然，当您在内容经过折叠页面的页面和不在页面的页面之间切换时，容器会向右跳动。

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; padding：10px 50px 30px 50px; margin：0px auto; 宽度：880px; 溢出：汽车; }

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

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

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

我没有插入我的所有代码，但认为我已经把必要的东西放进去了。

---

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

链接地址: http://www.djcxy.com/p/13175.html

上一篇: Left padding on container when content of the article goes past the fold

下一篇: How to remove border (outline) around text/input boxes? (Chrome)