html – div之间全高的垂直线

概述我有三个div(左,中,右),这些div没有精确的高度,因为它取决于div中文本的行数. 现在我想要垂直线(分隔三个div)穿过用户监视器的整个高度,无论div有多高. 我怎样才能做到这一点？因为,正如你在css-code中看到的那样,border-right / border-left对我来说不起作用. 意向 HTML <div class="content"> <div class=" 我有三个div(左,中,右),这些div没有精确的高度,因为它取决于div中文本的行数.
现在我想要垂直线(分隔三个div)穿过用户监视器的整个高度,无论div有多高.

我怎样才能做到这一点？因为,正如你在css-code中看到的那样,border-right / border-left对我来说不起作用.

意向

HTML

<div >    <div ></div>    <div ></div>    <div ></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中有可调整大小的框.

解决方法 我认为这样做你想要的.

JSFiddle example

HTML结构比你的更复杂：

<div >Menu top</div><div >    <div >Menu left</div>    <div >        <div >            <div >                 <h1>Column 1</h1>            </div>        </div>        <div >            <div >                 <h1>Column 2</h1>            </div>        </div>        <div >            <div >                <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;}

总结

以上是内存溢出为你收集整理的html – div之间全高的垂直线全部内容，希望文章能够帮你解决html – div之间全高的垂直线所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。