Как сделать переполнение: скрытый действительно скрытый контент?

Question

Пожалуйста, посмотрите на этот пример .Я намерен сделать горизонтальный макет с чистым HTML / CSS, не беспокойтесь о старых браузерах.Я сделал это с техникой display: table.Но отображение основных текстовых контейнеров (светло-желтых) стало проблемой.Каждый из них имеет overflow: hidden для предотвращения вертикальной прокрутки.Позже я собираюсь добавить эффект тени внизу.Теперь я хочу сделать, например, 80% высоты с 10% полей сверху и снизу.Но я получаю контейнер с большим текстом, растягивающим все родительские контейнеры (светло-зеленый), поэтому 80% его стало слишком много.

Есть ли способ избежать этого без javascript?

Может быть, я могу получить текстовый контейнер любой высоты, но с некоторым запасом внизу.Я буду признателен за любое решение.

Answer 1

Пока не ясно, что вы хотите;может быть, опубликовать быстрый набросок?

В любом случае, я бы хотел избежать горизонтальной полосы прокрутки.Для этого установите #content { width: 61%;} (на основе остальной части CSS).В настоящее время в layout.css , #content width установлено на 305%.

RE:

@ Брок Адам, я хочу сделать div.article-content 80% экрана, а не 80% родительского контейнера.Я полагаю, что этого можно добиться, заставив родительский контент div # быть ровно на 100% экрана, а не больше.Но я не знаю, как.

div.article-content в настоящее время появляется на странице 5 раз.Установка его на 80% экрана даст странице, которая будет по меньшей мере на 400% шире, чем может видеть пользователь.

Вопросы:

1. Первый div идентифицируется как"заголовок", но он плавает влево и имеет ширину всего 39%.Это заголовок (полоса вверху страницы) или левая боковая полоса?
2. Статьи должны быть в 5 крошечных столбцах в одном ряду или один за другим?другой, прокручивая страницу вниз?

Опять же, утверждения и семантика страницы примера неясны.Поможет вам в этом краткий набросок желаемого макета .

Answer 2

Не используйте макеты таблиц, у элементов div таблицы есть проблема с настройкой их ширины / высоты, и поэтому они не смогут следовать правилам переполнения.
Обновите следующие свойства CSS в файле layout.css.:

#content{
    display:block;
    height:90%;
    overflow:hidden;
    vertical-align:top;
}

#content-inner{
    display:block;
    height:100%;
    vertical-align:top;
}

.article{
    display:inline-block;
}