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

时间：2014-12-29 19:41:26

标签： css html5 flexbox css-multicolumn-layout

想象一个非常常见的＆lt; header＆gt;＆lt; article＆gt;＆lt; footer＆gt;布局，页眉和页脚是固定的高度，文章根据需要高（页面垂直滚动以容纳）。这和大多数网页一样。

我想要获得的是一个类似的布局，但就其本身而言，文章根据需要获得 wide ，并且页面水平滚动：

Horizontal scrolling

我最初的尝试使用了flexbox：

Here is my first attempt on 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;
}

但是，当我尝试其他事情时，我会离开它，例如in this fiddle，它更接近。此尝试的问题是文章宽度被限制为视口宽度的100％，即使文本向右流动！ （我的文章使用CSS columns，这对我的布局非常重要。）

我的要求是：

  • 标题，文章，页脚高度为100％（已完成）
  • 标题为400px宽（已完成）和左侧内容（已完成）
  • 页脚宽度为450px（完成），文章右侧（如何？）
  • 文章在没有重叠页脚的情况下需要广泛（如何？）

所以，我需要大胆目标的帮助。我该怎么做才能防止文章与页脚重叠到右边？是否有其他方式来布置此页面，以便文章宽度随内容扩展？

  • 应该适用于Chrome，Firefox和Safari（IE和Opera加分，但不是必需的）
  • 最好不要使用JavaScript（或可能从规范中删除CSS功能）
  • 简单，干净的CSS非常理想

12 个答案:

答案 0 :(得分：5)

我整个下午一直在努力，没有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/

答案 1 :(得分：3)

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

这会将页脚放在文章的右侧，文章不会与页脚重叠。 Webkit / Blink中最佳可见，包含Flex解​​释的文本内容宽度的计算问题。

在理想世界中，Flexbox会知道如何处理列并计算auto弹性项目的article宽度。但是因为1.这还没有说明; 2. Flex仍然存在待解决的问题; 3. CSS Columns仍然非常多而且不稳定。 Webkit和Firefox处理他的两种不同和错误。对于Webkit，flex auto宽度是一行<p>元素的宽度，对于FF / IE，它只是一列的大小。所以这是一个相当死胡同，需要通过W3C规范解决才能实现。我试图包裹article，但这似乎没有帮助。

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

更新：多列问题是从2007年开始的know problem。此案例已作为参考添加到CSS工作组维基page listing current multicolumn issues

答案 2 :(得分：2)

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

答案 3 :(得分：2)

这是一个适用于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. 将整个内容放在100％高度的绝对定位的div（<holder>）中。这会将内容从主体流中拉出，并防止身体和视口宽度做出疯狂的事情。
  2. 设置白色空间：nowrap在<holder>上，并且正常用于所有其他元素。这会强制页眉，文章和页脚水平对齐，同时允许其中的文本正常流动。
  3. 将所有元素设置为position：relative（offsetWidth所需）
  4. 在文章中创建一个小标记元素：float：right。这用于计算正确的宽度。
  5. 观看窗口调整大小事件的一小部分js，并重新计算文章的正确宽度。

答案 4 :(得分：1)

简单的答案是在body上设置overflow-x和overflow-y，然后显示：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>

这是demo

答案 5 :(得分：0)

flex有很多话要说。我建议为此链接添加书签：CSS-TRICKS A Complete guide to 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;
}

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

此编辑小提琴中的解决方案不使用Flex，而是使用内联块和一些空白空间管理的组合。这和我的时间一样接近。希望它有所帮助。

Updated: FIDDLE

答案 6 :(得分：0)

可能的解决方案。

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>

答案 7 :(得分：0)

男人我以为我拥有它...如果窗户是特定的高度，它会起作用。如果更改输出窗格的大小，则内容不均匀。在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;
}

答案 8 :(得分：0)

看看这个！

需要一些JavaScript代码来计算动态宽度，否则整体结构很简单，几乎适用于所有主流浏览器（没有检查过JS，但这很容易改变，＆＃34;以防＃34; ;！）

您还可以查看JSFiddle here.

＆＃13;
＆＃13; 
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';
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 9 :(得分：0)

你应该使用表css然后它很容易 - 否则它很痛苦

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

主要区别在于删除flex，然后将1 .layout和1个div中的所有内容包装在table和table-row中，而.layout中div中的第一个元素将成为列，这是css：

.layout {
    display: table;
}

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

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

更新：

文章需要将滚动的宽度设置为水平。 在我的例子中它是200％。

示例：http://jsfiddle.net/n3okxq94/7/

为什么它必须有宽度？因为段落的宽度是容器的大小。并且您要求容器根据宽度为auto的段落设置宽度：auto

您可以在文章中添加white-space：nowrap，但这会使所有文字成为一行http://jsfiddle.net/n3okxq94/10/

完成了吗？ http://jsfiddle.net/n3okxq94/8/

您可以在文章内部添加至少一个<p style="width: 1000px;">，这样您就可以拥有每篇文章的宽度

答案 10 :(得分：0)

使用非常简单的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>

答案 11 :(得分：-1)

嗨Matt试试吧，对不起，我无法进行现场演示。

首先在你的代码中下载这个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>

enter image description here

相关问题
最新问题