CSS 3 col模板100％高度相同 [英] CSS 3 col template 100% same height

问题描述

我想尝试下一个：

html>身体> div-wrapper> div-content

1. 三个div将具有相同的高度

1. The three div will have the same height
2. If they are empty ( or no overflow), the height will be the 100% of the page (without scrolls).
3. If some of they overflows, I will have only 1 scroll that scrolls down/up the three divs at the same time (scrolling the wrapper i think).

这是可能吗？我花了7个小时思考它，但我不能只使用HTML + CSS（不使用flexbox）解决。

It's this possible? I spent 7 hours thinking about it but I can't solve only with HTML + CSS (without using flexbox).

谢谢，

推荐答案

这是一个很好的问题！

That's a great question! It took me quite a while to create a graceful solution for you.

您需要的是 pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/rel =nofollow>动态粘滞页脚技术以及一个用于列的额外容器。

What you need is the dynamic sticky footer technique with an extra container for columns.

<div id="container">
    <header class="section">
      foo
    </header>

    <div class="section expand">
        <div class="columns-container">
            <div class="column" id="a">
                <p>Contents A</p>
            </div><div class="column" id="b">
                <p>Contents B</p>
            </div><div class="column" id="c">
                <p>Contents C</p>
            </div>
        </div>
    </div>

    <footer class="section">
        bar
    </footer>
</div>

CSS

CSS

/*************************
 * Sticky footer hack
 * Source: http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
 ************************/

/* Stretching all container's parents to full height */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Setting the container to be a table with maximum width and height */
#container {
    display: table;
    height: 100%;
    width: 100%;
}

/* All sections (container's children) should be table rows with minimal height */
.section {
    display: table-row;
    height: 1px;
}

/* The last-but-one section should be stretched to automatic height */
.section.expand {
    height: auto;
}


/*************************
 * Full height columns
 ************************/

/* We need one extra container, setting it to full width */
.columns-container {
    display: table-cell;
    height: 100%;
}

/* Creating columns */
.column {
    /* The float:left won't work for Chrome for some reason, so inline-block */
    display: inline-block; /* for this to work, the .column elements should have NO SPACE BETWEEN THEM */
    vertical-align: top;
    height: 100%;
    width: 33.3333%;
}


/****************************************************************
 * Just some coloring so that we're able to see height of columns
 ****************************************************************/
header { background-color: yellow; }
#a { background-color: pink; }
#b { background-color: lightgreen; }
#c { background-color: lightblue; }
footer { background-color: purple; }

演示

• 紧凑列的内容： http://jsfiddle.net/hsX5q/19/


• 列的内容溢出窗口高度之一： http://jsfiddle.net/hsX5q / 20 /



Demo

• Compact columns content: http://jsfiddle.net/hsX5q/19/
• One of the column's content overflows window height: http://jsfiddle.net/hsX5q/20/

一个错误的CSS选择器在你的问题。正确的是：

You've got a wrong CSS selector in your question. The correct would be:

html > body > div-wrapper > div-left, 
html > body > div-wrapper > div-separator,
html > body > div-wrapper > div-content {

这篇关于CSS 3 col模板100％高度相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！