当文章的内容超过折叠时，容器上的左填充

Posted 2023-03-05

【中文标题】当文章的内容超过折叠时，容器上的左填充

【英文标题】：Left padding on container when content of the article goes past the fold

【发布时间】：2011-12-16 11:38:23

【问题描述】：

我有一个容器，里面有我的标题、导航、侧边栏和文章。当文章的内容超过折叠时，容器左侧会添加填充或边距。当您在内容通过折叠的页面和没有通过折叠的页面之间切换时，很明显，因为容器向右摇晃。

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 边框半径：20px;背景颜色：#97C02F;填充：10 像素 50 像素 30 像素 50 像素；边距：0px 自动；宽度：880px； 溢出：自动；

旁边浮动：左；宽度：150px；填充右：15px；红色; 边距顶部：15px；

文章浮动：左；宽度：660px；左边距：20px；

section font-family: 'Droid Sans', sans-serif;颜色：#FFFFFF； 字体大小：15px；字体粗细：正常；

我还没有插入所有代码，但我认为我已经放入了必要的部分。

【问题讨论】：

没看过HTML和CSS，但你的“问题”不就是因为页面比屏幕大，浏览器在右侧添加滚动条造成的吗？这会将页面的宽度减小滚动条的宽度

哇，我觉得自己很愚蠢。有几个人看过这个，但没有人注意到这一点。谢谢。有没有办法解决这个问题，因为我不喜欢页面如何向右跳转？

我认为 Ben 关于添加垂直滚动条是正确的。你可以使用html overflow-y:scroll 强制滚动条，即使内容不需要滚动，所以不会发生这种跳转。

问题出在margin: auto，因为它居中，从而使您的页面跳转。 id 建议您只是忍受它，因为另一种方法是将您的内容对齐在左侧而不是中心，这更难看

我已经使用了 motoxer4533 的解决方案。感谢您指出对我来说显而易见的事情，并感谢您的解决方案！

【参考方案1】：

你可以使用html overflow-y:scroll 强制滚动条，即使内容不需要滚动，这样就不会发生这种跳跃。

【参考方案2】：

可以在你的 CSS 类中使用的 HTML 语法来处理你的容器或 div 中的任何超出；等等

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

.ofoverflow:auto