Блог

Я пробовал метод Мэтью Джеймса Тейлора, используя три столбца, но проблема в том, что я хочу, чтобы средний столбец был ультиматумом по высоте; то есть, если высота центрального раздела составляет 500 пикселей, высота div справа будет 500 пикселей, даже если он имеетпереполнение: прокрутка.

Вот код в jsfiddle, с немного лучшим описанием

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

Я пытался сделать код как можно более минимальным, но это часть работы.

Спасибо!

Вам нужно будет поместить 2-й раздел внутри первого и расположить его абсолютно

Демонстрация JSfiddle

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