css - CSS 列を含む div の幅を無制限にする

Question

非常に一般的な <header><article><footer> レイアウトを想像してみてください。ヘッダーとフッターは固定の高さで、記事は必要に応じて縦に表示されます (ページは縦方向にスクロールして表示されます)。これは、ほとんどの Web ページと同じです。

私が取得しようとしているのは、そのようなレイアウトですが、その横にあるため、記事は必要なだけ広くなり、ページは水平にスクロールします:

横スクロール

私の最初の試みはフレックスボックスを使用しました：

これが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% にする (完了)
ヘッダーは幅 400 ピクセル (完了) で、コンテンツの左側 (完了)
フッターの幅を 450px にして (完了) 、記事の右側に配置 (方法は?)
フッターが重ならないように記事を必要なだけ広くする (方法は?)

だから、私は太字の目標について助けが必要です. 記事がフッターの右側に重ならないようにするにはどうすればよいですか? このページをレイアウトして、コンテンツの幅に合わせて記事の幅を広げる方法はありますか?

Chrome、Firefox、および Safari で動作するはずです (IE と Opera はプラスですが、必須ではありません)。
JavaScript がないことが望ましい (または、仕様から削除される可能性が高い CSS 機能)
シンプルでクリーンな CSS が理想的

score 3 · Accepted Answer

ここにフレックスの基本があります: http://jsfiddle.net/hexalys/w4wzf9n6/16/これは最もクリーンな理論上のCSS です。

これにより、フッターが記事の右側に配置され、記事がフッターと重ならなくなります。Flex によって解釈されるテキストコンテンツの幅に関する計算の問題がある Webkit/Blink で最もよく表示されます。

理想的な世界では、Flexbox は列の処理方法を認識し、フレックスアイテムのauto幅を計算します。articleただし、1. これはまだ仕様が定められていないためです。2. Flex にはまだ解決すべき問題があります。そして 3. CSS 列はまだかなりバグが多く、不安定です。Webkit と Firefox では、彼の扱いが異なり、間違っています。Webkit の場合、フレックスauto幅は<p>1 行の要素の幅であり、FF/IE の場合は 1 列のみのサイズです。したがって、これはかなり行き止まりであり、これが機能する前に W3C 仕様で解決する必要があります。をラップしようとしましarticleたが、その原因を解決していないようです。

一方、ビューポートの高さとサーバー側のテキスト量の制約がわかっている場合は、JS フォールバックを使用して、DOMContentLoaded の前にarticle要素にフレックスを与えることができます。(部分的な Webkit/Blink polyfillwidthについては、私の後のコメントを参照してください)

更新: 複数列の問題は、2007 年からの既知の問題です。このケースは、現在の複数列の問題をリストしている CSS ワーキンググループの wiki ページに参照として追加されました。

score 2 · Accepted Answer

Flexbox は確かにこれで機能しますが、さらにいくつか追加する必要があります。

次の CSS を追加します。

article {
    display: flex;
}

article タグ内の各段落を同じ幅にするには、次を追加します。

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

score 2 · Accepted Answer

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列をサポートするすべてのブラウザーで機能します。

簡単な概要:

<holder>高さ 100%の絶対位置の div ( ) にコンテンツ全体を配置します。これにより、本体フローからコンテンツが引き出され、本体とビューポートの幅が異常なことをするのを防ぎます。
white-space: nowrap をオンに設定<holder>し、他のすべての要素を通常に設定します。これにより、ヘッダー、記事、およびフッターが水平方向に配置され、それらの内部のテキストが正常に流れるようになります。
すべての要素を position: relative に設定します (offsetWidth に必要)
float:right という小さなマーカー要素を記事に作成します。これは、正しい幅を計算するために使用されます。
ウィンドウのサイズ変更イベントを監視し、記事の適切な幅を再計算するための小さな js。

score 1 · Accepted Answer

簡単な答えは、本体に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>

ここにデモがあります

score 0 · Accepted Answer

可能な解決策。

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>

score 0 · Accepted Answer

テーブル css を使用する必要があります。そうすれば簡単です。そうしないと、お尻が痛くなります。

これが実際の例です: http://jsfiddle.net/y60zy7fp/1/

主な違いは、フレックスを削除してから、すべてを 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/

なぜ幅が必要なのですか？段落の幅はコンテナのサイズだからです。そして、 width: auto を持つ段落に従って幅を設定するようにコンテナーに要求しています。

空白を追加できます: 記事に nowrap を追加できますが、これによりすべてのテキストが 1 行になりますhttp://jsfiddle.net/n3okxq94/10/

終了した？http://jsfiddle.net/n3okxq94/8/

記事の中に少なくとも1つのようなものを入れることができ<p style="width: 1000px;">、そのようにして記事ごとに幅を持たせることができます

score 0 · Accepted Answer

非常に単純な 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>

score 0 · Accepted Answer

フレックスについては、言いたいことがたくさんあります。このリンクをブックマークすることをお勧めします: 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;
}

編集:フィドルを更新しました。結果が iframe に表示され、幅と高さが結果表示象限の 100% に制限されているという点で、Fiddle によって課されている制限がいくつかあります。そのため、実際のブラウザーの結果を実際に表示することはできません。

この編集されたフィドルのソリューションでは、Flex は使用されませんが、インラインブロックとホワイトスペース管理の組み合わせが使用されます。これは、私が持っていた時間で来ることができる限り近いです。それが役に立てば幸い。

更新：フィドル

score 0 · Accepted Answer

私はそれを持っていると思った男... ウィンドウが特定の高さである場合に機能します。出力ペインのサイズを変更すると、コンテンツが均等に収まりません。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;
}

score 0 · Accepted Answer

これをチェックしてください！

動的な幅を計算するには、いくつかの 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>

score -1 · Accepted Answer

やあ、Matt 試してみてください。ライブデモを作成できなくてすみません。

最初に、この 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>

ここに画像の説明を入力

css - CSS 列を含む div の幅を無制限にする

12 に答える 12

Related

Reference