html - div 之间具有完整高度的垂直线

Question

我有三个 div(左、中、右)，这些 div 没有精确的高度，因为它取决于 div 中文本的行数。现在我想要垂直线(将三个 div 分开)穿过用户监视器的整个高度，无论 div 有多高。

我该怎么做？因为，正如您在 css 代码中看到的那样，border-right/border-left 对我不起作用。

意图 HTML

<div class="content">
    <div class="content_left"></div>
    <div class="content_mid"></div>
    <div class="content_right"></div>
</div>

CSS

.content {  
    line-height: 1.1;
    background-color: #FFF;
    color: #000; 
    position: absolute;
    top: 36px; /* because there is a top-menu which is 36px high */
    left: 70px; /* because there is a side-menu which is 70px wide */
    right: 0px;
    bottom: 0px;
    overflow-x: hidden;
    overflow-y: auto;
}
.content_left {
    position: absolute;
    width: 22.5%;
    left: 0px;
    top: 0px;
    border-right: 1px solid #ccc;
    padding: 10px;
    overflow-x: hidden;
    overflow-y:hidden;
}
.content_mid {
    position: relative;
    width: 50%;
    top: 10px;
    left: 25%;
    float: left;
    padding-left: 10px;
}
.content_right {
    position: absolute;
    width: 22.5%;
    right: 0px;
    top: 0px;
    border-left: 1px solid #ccc;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: hidden;
}

编辑 1: 我希望这些单独的行宽度为 1px，但我不能将 content_left、content_mid、content_right 的高度设置为 100%，因为我在这些 div 中有可调整大小的框。

Answer 1

我认为这可以满足您的需求。

JSFiddle example

HTML 结构比你的复杂一点:

<div class="menu-top">Menu top</div>
<div class="wrapper">
    <div class="menu-left">Menu left</div>
    <div class="content">
        <div class="column">
            <div class="column-content">
                 <h1>Column 1</h1>
            </div>
        </div>
        <div class="column">
            <div class="column-content">
                 <h1>Column 2</h1>
            </div>
        </div>
        <div class="column">
            <div class="column-content">
                <h1>Column 3</h1>
            </div>
        </div>
    </div>
</div>

这是 CSS:

body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}
.menu-top {
    width: 100%;
    height: 36px;
    background-color: #3498DB;
}
.wrapper {
    display: flex;
}
.menu-left {
    height: calc(100vh - 36px);
    width: 70px;
    background-color: #59ABE3;
}
.content {
    width: calc(100vw - 70px);
    height: calc(100vh - 36px);
    background-color: #E4F1FE;
    display: flex;
}
.column {
    flex: 33;
    border-left: 1px solid hotpink;
}
.column:first-of-type {
    border-left: none;
}