Динамическая ширина тела HTML (более 100%)

Question

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

Я создаю сайт здесь: http://www.obliquo.co.uk/

Как видите, все работает, но я вынужден установить огромную ширину тела в пикселях. Содержание на странице будет постоянно меняться. Если я не установлю ширину в пикселях, элементы div, естественно, будут сталкиваться вертикально.

Answer 1

Я не потратил время на полное понимание вашего HTML, но предполагал следующую структуру:

<div id="container">
    <section>...</section>
    <section>...</section>
    <article>...</article>
    <article>...</article>
    <section>...</section>
    <section>...</section>
</div>

используйте следующий CSS:

#container {
    white-space: nowrap;
}
section, article {
    display: inline-block;
    white-space: normal;
    /* no float */
}

Это позволит каждому разделу / статье течь как встроенный элемент (т.е. обтекание). Но объявление white-space: nowrap предотвращает перенос и сохраняет его в одной строке.

Answer 2

Поскольку вы уже используете jquery, вы можете сделать следующее .. Я попробовал это в IE8, и он работает. Возможно, вам придется немного подправить его для других браузеров.

Добавьте тег script в свой файл, и это должно сработать, если вы планируете использовать ССЫЛКИ в качестве последнего раздела на странице. Если вы измените это, вам, возможно, придется поиграть вокруг, чтобы сделать его более динамичным, но это основной принцип, которому я бы следовал.

<script type="text/javascript">
            $(document).ready(function()
            {
                var width = $("#links").width() + $("#links").position().left;
                $("body").css("width", width + "px");
            });
</script>

Answer 3

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