css - 使包含 CSS 列的 div 具有无限宽度

Question

想象一个非常常见的 <header><article><footer> 布局，其中页眉和页脚的高度是固定的，并且文章会根据需要变得尽可能高（页面垂直滚动以适应）。这就像大多数网页一样。

我想要得到的是一个这样的布局，但是在它的一侧，所以文章可以根据需要变得尽可能宽，并且页面水平滚动：

我最初的尝试使用了 flexbox：

这是我对 jsFiddle 的第一次尝试。

相关CSS：

body {
    display: flex;
    position: absolute;
    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;
}
footer {
    background: yellow;
    width: 450px;
    flex: none;
}

但是当我尝试其他事情时，我正在远离它，比如在这个 fiddle中，它更接近一点。这种尝试的问题是文章宽度被限制为视口宽度的 100%，即使文本向右流动！columns（我的文章使用了对我的布局绝对重要的CSS 。）

我的要求是：

• 页眉、文章、页脚为 100% 高度（完成）
• 标题为 400px 宽（完成）和内容左侧（完成）
• 页脚宽度为 450 像素（完成）并位于文章的右侧（如何？）
• 文章尽可能宽而不重叠页脚（如何？）

所以，我需要帮助来实现大胆的目标。我能做些什么来防止文章与页脚重叠？是否有其他方法来布局此页面，以便文章宽度随着内容的扩展而扩展？

• 应该在 Chrome、Firefox 和 Safari 中工作（IE 和 Opera 是一个加号，但不是必需的）
• 最好不要使用 JavaScript（或可能从规范中删除的 CSS 功能）
• 简单、干净的 CSS 是理想的

Answer 1

我整个下午都在做这件事，没有 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正在使用它自己的方式，并且实际上正确地呈现它。Chrome和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/

Answer 2

我在这里有 flex 基础知识：http: //jsfiddle.net/hexalys/w4wzf9n6/16/这是最干净的理论css。

这会将页脚放在文章的右侧，并且文章不会与页脚重叠。在 Webkit/Blink 中最明显，Flex 解释的文本内容宽度的计算问题。

在理想情况下，Flexbox 会知道如何处理列并计算flex 项的auto宽度。article但是因为 1. 这还没有指定；2. Flex还有存在的问题需要解决；并且 3. CSS Columns 仍然有很多 bug 和不稳定。Webkit 和 Firefox 处理他的方式不同且错误。对于 Webkit，flexauto宽度是<p>一行元素的宽度，而对于 FF/IE，它仅是一列的大小。所以这是一条死胡同，需要通过 W3C 规范解决，然后才能工作。我试图 wrap article，但它似乎并没有帮助这个原因。

同时，如果您知道视口高度和服务器端文本量的约束，您可以使用 JS 回退在 DOMContentLoaded 之前为article元素赋予弹性。（有关部分 Webkit/Blink polyfillwidth，请参阅我稍后的评论）

更新：多列问题是 2007 年以来的一个已知问题。此案例已作为参考添加到 CSS 工作组 wiki页面上，列出了当前的多列问题

Answer 3

Flexbox 确实适用于此，但您需要添加更多内容。

添加以下 CSS：

article {
    display: flex;
}

要使文章标签内的每个段落具有相同的宽度，请添加：

article p {
    flex: 1;
}

快速修复页脚的宽度（和高度），添加：

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

编辑：

一直在玩它，但还没有弄清楚。我将代码留在这里，但它不正确。

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

Answer 4

这是一个适用于 webkit 浏览器、Firefox 和 IE 的解决方案：

// JS to work around the CSS column bug where the width
// is not properly calculated by the browser. We have a
// float:right marker at the end of the article. Set the
// width of the article to be where the marker is.
function resize()
{
    var article = document.querySelector("article"),
        marker = document.querySelector("endmarker");

    article.style.width = (marker.offsetLeft) + "px";
}

window.addEventListener("resize", resize);
resize();

* { padding: 0; margin: 0; }

holder {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    background: #fed;
    white-space: nowrap;
}

header,
article,
footer {
    position: relative;
	display: inline-block;
	height: 100%;
	vertical-align: top;
    white-space: normal;
}

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

endmarker {
    position: relative;
    display: block;
    float: right;
    width: 10px;
    height: 10px;
    background: red;
}

article {
	background: #CCC;

	-webkit-columns: 235px auto;
    -moz-columns: 235px auto;
	columns: 235px auto;
    
    -webkit-column-fill: auto;
    -moz-column-fill: auto;
    column-fill: auto;
    
	-webkit-column-gap: 0;
	-moz-column-gap: 0;
	column-gap: 0;
}

article p {
	padding: .2em 15px;
	text-indent: 1em;
	hyphens: auto;
}

footer {
	background: yellow;
	width: 450px;
}

<holder>
<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 natoquenatibus 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>
<p>END OF ARTICLE</p>
<endmarker></endmarker>
</article>
<footer>Footer should be 450px wide and appear to the right of everything else.</footer>
</holder>

http://jsfiddle.net/jmhh56g2/2/

所有浏览器都有一个关于列布局的错误，以及它们如何计算带有列的元素的宽度。所以不幸的是，需要一点点 JS 来设置宽度。我知道要求说“最好不要 javascript”，但这相当小，它适用于所有支持 CSS 列的浏览器。

快速概览：

1. 将整个内容放在绝对定位的 div ( <holder>) 中，高度为 100%。这会将内容从主体流中拉出，并防止主体和视口宽度做疯狂的事情。
2. <holder>为所有其他元素设置 white-space: nowrap on和 normal 。这会强制页眉、文章和页脚水平对齐，同时允许其中的文本正常流动。
3. 将所有元素设置为位置：相对（offsetWidth 需要）
4. 在文章中创建一个小标记元素，即 float:right。这用于计算正确的宽度。
5. 一点点 js 来观察窗口调整大小事件并重新计算文章的正确宽度。

Answer 5

简单的答案就是在body上设置overflow-x和overflow-y，然后display:inline-block里面的元素。这是代码：

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>

这是一个演示

Answer 6

flex有很多话要说。我建议将此链接添加为书签：CSS-TRICKS A Complete guide to FlexBox

关于列 - 列宽是最小宽度，而不是强制值，因此您永远不会在<article>标签中看到部分列

Css Changes as note and fiddle 以下内容：

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

编辑：我更新了我的小提琴；Fiddle 施加了一些限制，因为结果显示在 iframe 中，将宽度和高度限制为结果显示象限的 100%，因此您无法真正看到真实的浏览器结果。

这个编辑过的小提琴中的解决方案不使用 Flex，而是结合了内联块和一些空白管理。这是我所拥有的尽可能接近的时间。希望能帮助到你。

更新：小提琴

Answer 7

可能的解决方案。

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>

Answer 8

伙计，我以为我拥有它...如果窗户是特定的高度，它就可以工作。如果您更改输出窗格的大小，则内容将不均匀。在 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;
} 

Answer 9

看一下这个！

需要一些 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>

Answer 10

你应该使用 table css 那么它很容易 - 否则它会很痛苦

这是一个工作示例：http: //jsfiddle.net/y60zy7fp/1/

主要区别是删除 flex，然后将所有内容包装在 1 个 .layout 和 1 个表格和表格行的 div 中，并且 .layout 中 div 中的第一个元素将成为列，这是 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;">，这样你就可以有每篇文章的宽度

Answer 11

下面这个简单的使用非常简单的 CSS 和 HTML 的 sultion 怎么样？

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>

Answer 12

嗨，马特，请尝试一下，对我无法进行现场演示非常抱歉。

首先在您的代码中下载这个 jQuery 库http://manos.malihu.gr/jquery-custom-content-scroller/和 css 和 js 文件。

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