html - 顶栏附加到左侧栏

Question

我想将顶部栏附加到左侧栏，我不知道该怎么做，我没有使用任何 Bootstrap 或任何框架，我都是从头开始。

<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/