html – div之间全高的垂直线
发布时间:2020-12-14 18:53:14 所属栏目:资源 来源:网络整理
导读:我有三个div(左,中,右),这些div没有精确的高度,因为它取决于div中文本的行数. 现在我想要垂直线(分隔三个div)穿过用户监视器的整个高度,无论div有多高. 我怎样才能做到这一点?因为,正如你在css-code中看到的那样,border-right / border-left对我来说不起作
我有三个div(左,中,右),这些div没有精确的高度,因为它取决于div中文本的行数.
现在我想要垂直线(分隔三个div)穿过用户监视器的整个高度,无论div有多高. 我怎样才能做到这一点?因为,正如你在css-code中看到的那样,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中有可调整大小的框. 解决方法
我认为这样做你想要的.
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; } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |