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

问题描述 投票:0回答:2

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

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像素;字体重量:正常; }

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

css html5 css3 fold
2个回答
2
投票

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


0
投票

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

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

.of{overflow:auto}
© www.soinside.com 2019 - 2024. All rights reserved.