Левая прокладка на контейнере, когда содержимое изделия проходит мимо сгиба - PullRequest
Новая
       5

Левая прокладка на контейнере, когда содержимое изделия проходит мимо сгиба

0 голосов
/ 27 октября 2011

У меня есть контейнер, в котором есть мой заголовок, навигация, боковая панель и статья. Когда содержимое изделия проходит мимо сгиба, слева от контейнера добавляется заполнение или поле. Понятно, когда вы переключаетесь между страницами, где содержимое проходит через сгиб, и страницами, где его нет, поскольку контейнер перемещается вправо.

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; }

# контейнер {border-radius: 20px; цвет фона: # 97C02F; отступы: 10px 50px 30px 50px; поле: 0px авто; ширина: 880px; переполнение: авто; }

в сторону {float: left; ширина: 150px; обивка-направо: 15px; красный цвет; Запас-топ: 15px; }

article {float: left; ширина: 660px; Левое поле: 20px; }

section {font-family: «Droid Sans», без засечек; цвет: #FFFFFF; Размер шрифта: 15px; начертание шрифта: нормальный; }

Я не вставил весь свой код, но думаю, что вставил необходимые биты.

Ответы [ 2 ]

2 голосов
/ 27 октября 2011

Вы можете использовать html { overflow-y:scroll } для принудительной прокрутки, даже если контент не нуждается в прокрутке, поэтому этот переход не происходит.

0 голосов
/ 21 марта 2019

Синтаксис HTML, который может использоваться в вашем классе CSS для обработки любого превышения в вашем контейнере или div;и т.д.

Этот код дает вам доступ к полосе прокрутки, когда это необходимо. 

.of{overflow:auto}
...