我有三个div(左,中,右),这些div没有精确的高度,因为它取决于div中文本的行数.
现在我想要垂直线(分隔三个div)穿过用户监视器的整个高度,无论div有多高.
现在我想要垂直线(分隔三个div)穿过用户监视器的整个高度,无论div有多高.
我怎样才能做到这一点？因为,正如你在css-code中看到的那样,border-right / border-left对我来说不起作用.
意向
<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中有可调整大小的框.
解决方法
我认为这样做你想要的.
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;
}
