1

私は次のことをしようとしています：

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

  1. 3 つの div は同じ高さになります
  2. それらが空の場合 (またはオーバーフローがない場合)、高さはページの 100% になります (スクロールなし)。
  3. それらのいくつかがオーバーフローした場合、3つのdivを同時に上下にスクロールするスクロールは1つだけになります(ラッパーをスクロールすると思います)。

これは可能ですか？7時間かけて考えたのですが、HTML+CSSだけでは(flexboxを使わずに)解けません。

ありがとう、

4

3 に答える 3

1

それは素晴らしい質問です！あなたのために優雅な解決策を作成するのにかなりの時間がかかりました.

必要なのは、列用の追加コンテナーを使用した動的スティッキー フッター テクニックです。

HTML

<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

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

デモ

PS

質問の CSS セレクターが間違っています。正しいのは次のとおりです。

html > body > div-wrapper > div-left, 
html > body > div-wrapper > div-separator,
html > body > div-wrapper > div-content {
于 2013-03-29T08:28:25.777 に答える
0

それをするだけです：

.col{
   display:block;
   height:100%;
}

シンプルで、高速で、css です。

于 2014-03-12T11:52:06.693 に答える
0 
<style type="text/css">
.wrap {
    border: 1px solid #f00;
    height: 100%;
    width: 100%;
}
.wrap div {
    border: 1px solid #00f;
    overflow: auto;
    height: 100%;
    width: 33%;
    float: left;
    margin: 0px;
}
</style>
<div class="wrap">
    <div>Contents A</div>
    <div>Contents B</div>
    <div>Contents C</div>
</div>

また

<frameset cols="33%,*,33%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
   <frame src="frame_c.htm">
 </frameset>
于 2013-03-28T23:34:16.277 に答える