0

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

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

页眉，页脚，导航，文章，旁边{显示：块；}

#container{ 边界半径：20px; 背景颜色：#97C02F; 填充：10 像素 50 像素 30 像素 50 像素；边距：0px 自动；宽度：880px；溢出：自动；}

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

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

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

我还没有插入我所有的代码，但我想我已经把必要的部分放进去了。

4

2 回答 2

2

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

于 2011-10-27T13:23:15.597 回答
0

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

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

.of{overflow:auto}
于 2019-03-21T00:14:08.363 回答