Left padding on container when content of the article goes past the fold
I have a container which has my header, nav, sidebar and article inside. When the contents of the article go past the fold, there is either padding or margin being added to the left of the container. It's clear when you change between pages where the content goes past the fold, and pages where it doesn't, as the container jolts to the right.
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
header, footer, nav, article, aside{ display: block; }
#container{ border-radius: 20px; background-color:#97C02F; padding:10px 50px 30px 50px; margin:0px auto; width:880px; overflow:auto; }
aside{ float:left; width:150px; padding-right:15px; color:red; margin-top:15px; }
article{ float:left; width:660px; margin-left:20px; }
section{ font-family: 'Droid Sans', sans-serif; color:#FFFFFF; font-size:15px; font-weight:normal; }
I haven't inserted all of my code, but think I've put the necessary bits in.
您可以使用html { overflow-y:scroll }来强制滚动条，即使内容不需要滚动，也不会发生跳转。
上一篇: 这个盒子有什么区别