html - 两个并排的div，一个居中，另一个的高度取决于第一个

Question

我试过 Matthew James Taylor method ，使用三列，但问题是我希望中间列成为高度的最后通;也就是说，如果中心 div 的高度恰好为 500px，则右侧高度的 div 将为 500px，即使它有 overflow:scroll。

Here's the code in jsfiddle, with a bit better of description

HTML:

<div class="colmask threecol">
<div class="colmid">
    <div class="colleft">
        <div class="col1">
            <!-- Column 1 start -->
            <p>Column 1</p>
            <p>This is the middle (main) column.</p>
        </div>
            <!-- Column 1 end -->

        <div class="col2">
            <p>Column 2</p>
            <p>This is the second column. Ideally, there would be no second column and the center div would be centered without it.</p>
        </div>
        <div class="col3">
            <!-- Column 3 start -->
                <p>Column 3</p>
                <p>This is the right column. I would like its height to be dependant on the middle column's height. Instead of seeing it flow past, as it does now, I would like, somehow, for its height to be the height of the middle column and the overflow to be scrollable.</p>
            <!-- Column 3 end -->
        </div>
    </div>
</div>

CSS:

    body {
    margin:0;
    padding:0;
    width:100%;
}
/* column container */
.colmask {
    clear:both;
    float:left;
    width:100%;
    /* width of whole page */
    overflow:hidden;
    /* This chops off any overhanging divs */
}
/* common column settings */
.colright, .colmid, .colleft {
    float:left;
    width:100%;
    /* width of page */
    position:relative;
}
.col1, .col2, .col3 {
    float:left;
    position:relative;
    overflow:hidden;
}
/* 3 Column settings */
.threecol {
    background:#eee;
    /* right column background colour */
}
.threecol .colmid {
    right:25%;
    /* width of the right column */
    background:#fff;
    /* center column background colour */
}
.threecol .colleft {
    right:50%;
    /* width of the middle column */
    background:#aaa;
    /* left column background colour */
}
.threecol .col1 {
    width:46%;
    /* width of center column content (column width minus padding on either side) */
    left:102%;
    /* 100% plus left padding of center column */
}
.threecol .col2 {
    width:21%;
    /* Width of left column content (column width minus padding on either side) */
    left:31%;
    /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
    width:21%;
    /* Width of right column content (column width minus padding on either side) */
    left:85%;
    /* Please make note of the brackets here:
                (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}

我试图使代码尽可能少，但这是一项工作。

谢谢!

Answer 1

您需要将第一个 div 内的第二个 div 放在绝对位置

JSfiddle Demo

HTML

<div class="main">
    <div class="sidebar"></div>
</div>

CSS

.main {
    width:50%;
    margin:0 auto;
    background-color: lightblue;
    position: relative;
    height:250px;
}

.sidebar {
    position: relative;
    width: 100px;
    top:0;
    left:100%;
    height:100%;
    background-color: lightgreen;
}