使包含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;
}

但是,当我尝试其他东西时,我正在远离这一点,就像在这个小提琴中,它更近一点.此尝试的问题是文章宽度被限制为视口宽度的100%,即使文本向右流动!(我的文章使用CSS columns,这对我的布局非常重要.)

我的要求是:

• 标题,文章,页脚高度为100%(已完成)
• 标题为400px宽(已完成)和左侧内容(已完成)
• 页脚宽度为450px(完成)和文章右侧(如何？)
• 文章要尽可能宽,没有重叠页脚(怎么样？)

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

• 应该适用于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

以下是适用于 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>对所有其他元素启用并正常。这会强制页眉、文章和页脚水平对齐，同时允许其中的文本正常流动。
3. 将所有元素设置为position:relative（offsetWidth需要）
4. 在文章中创建一个小标记元素，即 float:right。这用于计算正确的宽度。
5. 一点点 js 来观察窗口大小调整事件并重新计算文章的正确宽度。