Сделайте div, содержащий столбцы CSS, неограниченной шириной

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

Решение 1 работает на Firefox, Chrome и IE

однако я получил это, чтобы работать, вроде. Это не совсем для спецификации.

HTML-код

<div id="DIV-1">Header </div>
        .. in the Fiddle there's a lot of "Lorum ipsum here"
<div id="DIV-3">Footer </div>

в CSS

@media only screen 
and (orientation : landscape) {

    body {
        position: absolute;
        display: block;
        box-sizing: border-box;
        white-space: normal;
        -webkit-columns: 235px auto;
        -moz-columns: 235px auto;
        columns: 235px auto;
        -webkit-column-gap: 0;
        -moz-column-gap: 0;
        column-gap: 0;
        height: 100%;
        float: left;
        width: calc(100% + 450px);
        min-width: -webkit-min-content; 
        padding-left: 400px;
    }

    #DIV-1{
        position: absolute;
        left: 0px;
        box-sizing: border-box;
        background-color: #2693FF;
        height: 100%;
        width: 400px;
        float: left;
    }

    #DIV-3 {
        position: relative;
        float: right;
        left: 205px;
        box-sizing: border-box;
        background-color: #FF7373;
        height: 100%;
        width: 450px;
        -webkit-column-span: all;
        -moz-column-span: all;
        column-span: all;

        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;

    }       

}

Я поместил контейнер содержимого столбцы непосредственно в тело. (Все еще может быть элемент div.)

width: calc(100% + 450px);
min-width: -webkit-min-content; 

этот бит фактически (по волшебству) заставляет браузер распознавать, что тело имеет ширину, которая шире, чем видовое окно. Позиционирование заголовка простое. absolute и добавить padding до body и он на месте. Содержимое теперь плавно перетекает вправо. Исключение составляет footer. Я получил его в правильном положении, он с помощью column-span: all. в Firefox собирается по-своему с этим и на самом деле делает это правильно. хром и IE отобразить столбец inline и только ширина столбца. Вот в чем недостаток такого подхода.

Я надеюсь, что вы можете что-то сделать с ним или кто-то другой может улучшить это, чтобы он фактически добавляет нижний колонтитул в конце страницы, не сокращая его до ширины столбца.

Скрипка:http://jsfiddle.net/5dtq47m3/

решение 2 - работает на Chrome

редактировать работа Grily.

HTML-код

<header>
        <h1>Article Title (width 400)</h1>
</header>

<article>
     ........
</article>
<footer>Footer should be 450px wide and appear to the right of everything else.</footer>

в CSS

* {
    padding: 0;
    margin: 0;
}
body {
    display: flex;
    position: absolute;
    height: 100%;
}
header {
    background: green;
    width: 400px;
    flex: none;
    float: left;
}
article {
    background: #CCC;
    -webkit-columns: 235px auto;
    columns: 235px auto;
    -webkit-column-gap: 0;
    column-gap: 0;
    color: rgba(0, 0, 0, .75);
    flex:none; /*added*/
    width: calc(100% + 10px); /*added*/
    max-width: -webkit-max-content; /*added*/
}
article p {
    padding: .2em 15px;
    text-indent: 1em;
    hyphens: auto;
}
footer {
    background: yellow;
    width: 450px;
    flex: none;
    float: right; /*added*/
}

http://jsfiddle.net/w4wzf9n6/8/

у меня есть основы flex здесь:http://jsfiddle.net/hexalys/w4wzf9n6/16/ который самый чистый теоретической css.

это нижний колонтитул справа от статьи и статья не перекрывается с нижним колонтитулом. Лучше всего видно в Webkit / Blink с проблемами расчета ширины текстового содержимого, интерпретируемого Flex.

на идеальный мир, Flexbox будет знать, что делать с столбцы и вычислить auto ширина article пункт флекс. Но потому что 1. Это еще не specced; 2. Flex все еще имеет существующие проблемы, которые необходимо решить; и 3. Столбцы CSS по-прежнему довольно глючат и нестабильны. Webkit и Firefox обрабатывают его по-разному и неправильно. Для Webkit a flex auto ширина-это <p> элемент на одной строке, и для FF/IE это размер только одного столбца. Так что это довольно тупик, и нужно решить спецификации W3C, прежде чем это сработает. Я пытался wrap article, но это, похоже, не помогает этой причине.

между тем, если вы знаете ограничения высоты просмотра и количество текста на стороне сервера, вы можете использовать резервный JS, чтобы дать article элемент a flex width перед DOMContentLoaded. (См. мой более поздний комментарий для частичный webkit / Blink polyfill)

обновление: многоколонный вопрос знаю еще с 2007 года. Этот случай был добавлен в качестве ссылки на CSS Рабочая группа wiki страница с перечислением текущих проблем с несколькими столбцами

Flexbox действительно работает для этого, но вам нужно добавить еще несколько вещей.

добавьте следующий CSS:

article {
    display: flex;
}

чтобы сделать каждый абзац внутри тега статьи одинаковой ширины, добавьте:

article p {
    flex: 1;
}

быстрое исправление ширины (и высоты) нижнего колонтитула, добавить:

footer {
    display: table;
    height: 100%;
}

Edit:

немного поиграл с ним, но пока не понял. Я просто оставлю код здесь, но это неправильный.

html {
    height: 100vh;
}

body {
    display: -webkit-box;
    height: 100%;
}

header {
    background: green;
    width: 400px;
    flex: none;
}

article {
    background: #CCC;
    -webkit-columns: 235px auto;
    columns: 235px auto;
    -webkit-column-gap: 0;
    column-gap: 0;
    color: rgba(0, 0, 0, .75);
    height: 100%;
}

footer {
    background: yellow;
    width: 450px;
    display: table;
    height: 100%;
}

простой ответ-установить overflow-x и overflow-y на теле, а затем отобразить: встроенный блок элементов внутри. Вот код:

body {
  height: 500px; /* just for demo */
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}

header,
article,
footer,
.box {
  display: inline-block;
  height: 500px; /* just for demo */
}

header,
footer {
  width: 200px;
  background: #666;
}

.box {
  width: 300px; /* just for demo */
  background: #ccc;
}

<header>header</header>
<article>
  <div class="box">stuff</div>
  <div class="box">stuff</div>
  <div class="box">stuff</div>
  <div class="box">stuff</div>
  <div class="box">stuff</div>
  <div class="box">stuff</div>
  <div class="box">stuff</div>
</article>
<footer>footer</footer>

здесь демо

есть много, что можно сказать о flex. Предлагаю закладки по этой ссылке:CSS-трюки Полное руководство по FlexBox

Что касается столбцов-ширина столбца-минимальная ширина, а не принудительное значение, поэтому вы никогда не увидите частичный столбец в <article> теги

Css изменения, как отмечено и скрипка следующее:

article {
    background: #CCC;
    -webkit-columns: 235px auto;
    columns: 235px auto;
    -webkit-column-gap: 0;
    column-gap: 0;
    color: rgba(0, 0, 0, .75);

    /* Added */
    overflow:hidden;
    overflow-x: scroll;
}

footer {
    background: yellow;

    /* Changed */
    min-width: 450px;
    display: block;
}

EDIT: я обновил свою скрипку; есть некоторые ограничения, налагаемые скрипкой в этом результаты отображаются в iframe, которые ограничивают ширину и высоту до 100% квадранта отображения результатов, поэтому вы действительно не видите истинные результаты браузера.

решение в этой отредактированной скрипке не использует Flex, а комбинацию встроенных блоков с некоторым управлением пробелами. Это самое близкое, что я мог сделать за то время, что у меня было. Надеюсь, это поможет.

Обновлено: скрипка

возможное решение.

CSS-код:

<style type="text/css">
* {
    margin:0;
    padding:0;
}
html {
    height:100%;
}
body {
    display:table;
    height:100%;
    width:100%;
}
header {
    background:green;
    display:table-cell;
    vertical-align:top;
    width:400px;
}
article {
    background:#CCC;
    color:rgba(0, 0, 0, .75);
    display:table-cell;
}
article div {
    -moz-column-gap:0;
    -moz-columns:235px auto;
    -webkit-column-gap:0;
    -webkit-columns:235px auto;
    column-gap:0;
    columns:235px auto;
    height:100%;
    max-height:1vh;
    min-height:100%;
    overflow-x:scroll;
}
article p {
    hyphens:auto;
    padding:.2em 15px;
    text-indent:1em;
}
footer {
    background:yellow;
    display:table-cell;
    vertical-align:top;
    width:450px;
}
</style>

HTML:

<header>
    <h1>Article Title (width 400)</h1>
</header>
<article>
    <div>
        <p>Article Text</p>
    </div>
</article>
<footer>
    Footer should be 450px wide and appear to the right of everything else.
</footer>

человек, я думал, что он у меня есть... Он работает, если окно имеет определенную высоту. Если изменить размер панели вывода, содержимое не будет соответствовать равномерно. Работает одинаково как в Firefox, так и в Chrome, хотел поставить его там, чтобы увидеть, помогает ли он кому-то приблизиться к решению.

http://jsfiddle.net/ryanwheale/bbhmkLw5/

HTML-код:

<article>
    <header></header>
    <section></section>
    <footer></footer>
</article>

CSS:

html, body, article, header, section, footer {
    height: 100%;
    margin: 0;
}
html, body {
    background: red;
    width: calc(100% + 850px);
}
article {
    white-space: nowrap;
    background: blue;
}
article > * {
    white-space: normal;
    display: inline-block;
    vertical-align: top;
}
header {
    background: green;
    width: 400px;
}
section {
    background: grey;
    -webkit-columns: 2000 235px;
    -moz-columns: 2000 235px;
    columns: 2000 235px;
    -moz-column-fill: auto;
}
footer {
    background: yellow;
    width: 450px;
} 

зацените!

некоторый код JavaScript необходим для расчета динамической ширины, в противном случае общая структура проста и будет работать почти со всеми основными браузерами (не проверял JS, но это будет легко изменить, "в случае"!).

вы также можете увидеть на JSFiddle здесь.

var header = document.getElementsByTagName('header')[0].offsetWidth;

var article = document.getElementsByTagName('article')[0].children[0].offsetWidth * document.getElementsByTagName('article')[0].children.length;

var footer = document.getElementsByTagName('footer')[0].offsetWidth;

document.getElementsByTagName('html')[0].style.width = header + article + footer + 'px';

html,body,header,article,article p,footer{
  margin:0px;
  padding:0px;
  height:100%;
}
html{ width: 100%; }
body{ width: auto; }
header, footer{
  width: 200px;
  float: left;
}
header{ background-color: green; }
footer{ background-color:yellow; }
article{
  display:block;
  width: auto;
  float: left;
}
article p{
  border:1px solid red;
  width: 200px;
  float: left;
  display:inline-block;
}

<header>
  <h1>Article Title</h1>
</header>
<article>
  <p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
  <p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
  <p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
  <p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
  <p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
  <p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
  <p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
  <p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
  <p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
</article>
<footer>
  Footer should be 450px wide and appear to the right of everything else.
</footer>

вы должны использовать таблицу css, тогда это легко - иначе это боль в заднице

вот рабочий пример:http://jsfiddle.net/y60zy7fp/1/

основное различие заключается в удалении flex, а затем обернуть все в 1 .макет и еще 1 div для таблицы и таблицы-строки, а также первый элемент в div in .макет станет столбцом это css:

.layout {
    display: table;
}

.layout > div {
    display: table-row;
}

.layout > div > * {
    display: table-cell;
}

обновление:

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

пример: http://jsfiddle.net/n3okxq94/7/

почему он должен быть ширины? Потому что ширина абзаца - это размер контейнера. И вы просите контейнер установить ширину в соответствии с абзацем, который имеет ширину: auto

вы можете добавить пробел: nowrap на статью, но это делает весь текст одной строкой http://jsfiddle.net/n3okxq94/10/

закончил? http://jsfiddle.net/n3okxq94/8/

вы можете поместить внутри статьи Что-то вроде хотя бы одного <p style="width: 1000px;">и таким образом вы могли бы иметь ширину на статью

Как насчет этого простого sultion ниже, используя очень простой CSS и HTML?

html, body {width:100%; height:100%; min-height:100%; margin:0; padding:0;}
article {width:100%; height:100%; min-height:100%;}
header {width:400px; float:left; background:red; height:100%; min-height:100%;}
section {width:auto; display:block; background:blue; height:100%; min-height:100%; padding-right:450px;}
footer {width:450px; position:absolute; top:0; right:0; background:green; height:100%; min-height:100%;}

<article>
    <header>content</header>
    <section>content</section>
    <footer>content</footer>
</article>

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

сначала загрузите эту библиотеку jQuery http://manos.malihu.gr/jquery-custom-content-scroller/ и css и js-файл в вашем коде как lik.

<link rel="stylesheet" href="../jquery.mCustomScrollbar.css">
<style>

            * {
                padding: 0;
                margin: 0;
            }
            html, body {
                height: 100%;
                width:auto;
                display:block;
                white-space:nowrap;
            }
            header, article, footer {
                float: left;
                height:100%;
                vertical-align:top;
                white-space:normal;
            }
            header {
                background: green;
                width: 250px;
                padding: 0px 15px;
            }
            article {
                background: #CCC;               
                color: rgba(0, 0, 0, .75);
                width: 100%;
                padding-right: 20px;
            }
            article p {
                padding: .2em 15px;
                text-indent: 1em;
                hyphens: auto;
            }
            footer {
                background: yellow;
                width: 250px; 
                padding: 0px 15px;
            }
            .showcase #content-6.horizontal-images.content{
                padding: 10px 0 5px 0;
                background-color: #444;
                background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQIW2NkYGA4A8QmQAwGjDAGNgGwSgwVAFVOAgV/1mwxAAAAAElFTkSuQmCC");
            }

            .showcase #content-6.horizontal-images.content .mCSB_scrollTools{
                margin-left: 10px;
                margin-right: 10px;
            }
        </style>

<body>
        <header>
            <h1>Article Title (width 400)</h1>

        </header>
        <article>
            <p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b>

            </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo venenatis efficitur. Nam vel ultricies urna, non auctor lorem. Suspendisse sodales, nunc eu pharetra ornare, elit quam scelerisque ex, id congue orci lectus eget turpis. Ut consequat nisi et erat efficitur faucibus. Maecenas laoreet magna nec odio porta, et consequat leo rhoncus. In imperdiet pellentesque justo eu pellentesque. Curabitur ut ante tristique, placerat est porta, porttitor ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed scelerisque est vitae orci elementum, et vehicula quam lacinia. Vivamus vestibulum metus quis dui dictum vehicula. Mauris et tempor libero.</p>
            <p>Sed lorem quam, feugiat sit amet vehicula non, ultricies quis quam. Ut lobortis leo ac ex facilisis, vel elementum ante feugiat. Quisque efficitur tellus sed sodales dictum. Mauris sed justo dictum, finibus velit id, pulvinar mi. Phasellus mi augue, finibus ut vestibulum et, volutpat id sapien. Sed feugiat eleifend augue, ut commodo nulla bibendum ac. Nullam quis posuere lectus. Curabitur dictum quam id massa finibus blandit. Nam malesuada metus ut massa ullamcorper luctus. Curabitur vitae dictum orci, a finibus sapien. Maecenas eget nisl tempus, pharetra enim eget, tempor urna. Suspendisse viverra felis bibendum neque rhoncus, id eleifend tortor sodales. Suspendisse sed magna pulvinar, laoreet turpis nec, ultrices enim. Vivamus at auctor arcu. Nunc vitae suscipit tellus. Etiam ut accumsan arcu.</p>
            <p>Morbi faucibus, mauris sed blandit ultrices, turpis turpis dapibus quam, quis consectetur erat nibh cursus magna. Donec quis ullamcorper quam, a facilisis leo. Phasellus ut mauris eget risus ultrices lobortis. Pellentesque semper ante eu vehicula pharetra. Vestibulum congue orci non felis vehicula volutpat. Praesent vel euismod ligula. Sed vitae placerat ipsum, a hendrerit felis. Mauris vitae fermentum nunc, non tincidunt magna. Fusce nibh ex, porta sed ante ut, dapibus maximus urna. Nulla tristique magna ipsum, at sodales ipsum feugiat a. Mauris convallis mi vel arcu vehicula elementum. Aliquam aliquet hendrerit lectus, congue auctor ipsum sodales vitae. Phasellus congue, ex non viverra cursus, nunc est fermentum dui, ac tincidunt turpis mauris a tellus. Curabitur sollicitudin condimentum mauris consectetur tincidunt. Morbi vulputate ac augue ut maximus.</p>
            <p>Nulla in auctor ligula. In euismod volutpat ex a eleifend. Sed eu elit et nulla faucibus fringilla. Sed posuere metus in elit gravida pharetra. Vivamus a ultricies ipsum. Mauris mollis est nisi, a convallis est iaculis id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam tincidunt blandit metus nec sagittis. Sed faucibus non urna in ullamcorper. Sed feugiat, tellus ut feugiat mollis, ligula neque molestie augue, vitae mattis ligula eros eget augue. Curabitur finibus sodales metus ac finibus. Sed id mollis ante. Phasellus vitae purus vel risus pulvinar aliquet. Vestibulum vitae elementum felis.</p>
            <p>Nam ipsum ipsum, consequat in dictum vitae, malesuada eget est. Phasellus elementum lacinia maximus. Maecenas dictum neque ligula, et congue mauris venenatis eu. Pellentesque pretium tortor nec ligula rutrum, a aliquet eros aliquam. Etiam euismod varius ipsum, id molestie massa. Quisque elementum lacus at ipsum egestas facilisis. Maecenas arcu risus, euismod ac lacus ac, euismod dictum nunc. Aenean non felis aliquet mi tincidunt bibendum. Curabitur ultricies ullamcorper gravida. In pretium nibh non eleifend egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin auctor lacus erat, sit amet vestibulum lorem mattis in. Aenean dapibus at risus ac lacinia. Vivamus fringilla nulla diam, vel facilisis magna mollis maximus. Sed quis dolor tempor magna pharetra scelerisque. Nam velit felis, mollis sit amet risus et, imperdiet interdum nibh.</p>
        </article>
        <footer>Footer should be 450px wide and appear to the right of everything else.</footer>


        <!-- Google CDN jQuery with fallback to local -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


        <!-- custom scrollbar plugin -->
        <script src="../jquery.mCustomScrollbar.concat.min.js"></script>        


        <script>
            (function ($) {
                $(window).load(function () {
                    $.mCustomScrollbar.defaults.theme = "light-2"; //set "light-2" as the default theme
                    $("article").mCustomScrollbar({
                        axis: "x",
                        advanced: {autoExpandHorizontalScroll: true}
                    });

                    jQuery('article').css({'max-width': jQuery(window).width() - 581});
                });

            })(jQuery);
        </script>
    </body>