顶杆连接到左侧栏

Question

我想将我的顶栏连接到我的左侧边栏，我不知道该怎么做，我没有使用任何引导程序或任何框架，我是从头开始做的。

<header id="header">

</header>
<div id="left_col" class="column fixed open">

</div>

#left_col {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:240px;
    z-index:3;
}

#header {
    width: 85.5%;
    float:right;
    position:relative;
    background-color:black;
    height:50px;
}

#left_col:before {
   content:"";
   display:block;
   position:absolute;
   top:0;
   right:0;
   bottom:0;
   width:1px;
   z-index:4;
   background: #000;
}

JSFiddle：https://jsfiddle.net/z4axLrbo/

无论窗口的宽度如何减小，我都希望将顶部黑条连接到垂直线上，黑色顶部条始终连接到垂直线。

Answer 1

#left_col {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:240px;
    z-index:3;
    border-left:1px solid #000;
}

#left_col:before {
   content:"";
   display:block;
   position:absolute;
   top:0;
   right:0;
   bottom:0;
   width:1px;
   z-index:4;
   background: #000;
}

#header {
    top:0px;
    position:absolute;
    width: 100%;
    left:240px;
    background-color:black;
    height:50px;

}

使用此css：）

演示https://jsfiddle.net/Im_Saajan/w8fr9f9g/

更新：这是没有::before伪元素的代码

#left_col {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:240px;
    z-index:3;
    border-right:1px solid #000;
    height:500px;
}

#header {
    top:0px;
    position:absolute;
    width: 100%;
    left:240px;
    background-color:black;
    height:50px;
}

演示2：https://jsfiddle.net/Im_Saajan/L4po61sk/

Answer 2

只需更改float:right;

到

float:left;

参见演示Here