Question

我有三个div（左，中，右），这些div没有精确的高度，因为它取决于div中文本的行数。现在我希望垂直线（分隔三个div）穿过用户监视器的整个高度，无论div有多高。

我该怎么做？因为，正如你在css-code中看到的那样，border-right / border-left不适合我。

意图 enter image description here 的 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中有可调整大小的框。

Answer 1

您实际上可以使用background-color为父母伪造它。

/* Start Praveen's Reset for Fiddle ;) */
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/* End Praveen's Reset for Fiddle ;) */

.parent {background-color: #f99; height: 100%; overflow: hidden; position: relative;}
.parent .col {float: left; background-color: #fff; height: 100%; margin: 0.5%; width: 32.25%; position: relative;}

<div class="parent">
  <div class="col">
    <p>I am one line!</p>
  </div>
  <div class="col">
    <p>I am three lines!</p>
    <p>I am three lines!</p>
    <p>I am three lines!</p>
  </div>
  <div class="col">
    <p>I am two lines!</p>
    <p>I am two lines!</p>
  </div>
</div>

小提琴：http://output.jsbin.com/hefefawilu/1

Answer 2

我认为这可以满足您的需求。

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;
}

Answer 3

使用您的代码创建一个小提琴。如果这解决了您的问题，请参阅并告诉我。

http://jsfiddle.net/knxd0htm/

添加此部分代码以使其正常工作

**HTML:**

<div class="content">
    <div class="content_left">a</div>
    <div class="full-height one"></div>
    <div class="content_mid">b</div>
    <div class="full-height two"></div>
    <div class="content_right">c</div>
</div>

**CSS**

/**** CODE ****/
* {
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
    padding: 0;
    margin: 0;
}
.content {
    height: calc(100%-36px);
    min-height: calc(100%-36px);
}
.full-height {
    position: absolute;
    height: 100%;
    border-left: 1px solid red;
}

.full-height.one {
    left: 22.5%;
}
.full-height.two {
    right: 22.5%;
}
/**** CODE ****/

Answer 4

您可以通过使用伪选择器添加额外的HTML来实现此目的。我还整理了一些可以解决宽度问题的代码：）。

＆＃13;

* {
  box-sizing:border-box;  
}
html, body {  
  height:100%;
  width:100%;
}
body {
  position:relative;  
  margin:0;
  padding:0;
}
.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: calc(25% - 35px);
  left: 0px;
  top: 0px;
  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: calc(25% - 35px);
  right: 0px;
  top: 0px;
  padding: 10px;
  overflow-x: hidden;
  overflow-y: hidden;
}
.content:before {
  content: '';
  border-left:1px solid #ccc;
  width:0;
  position:absolute;
  top:0;
  left:25%;
  bottom:0;
}
.content:after {
  content: '';
  border-right:1px solid #ccc;
  width:0;
  position:absolute;
  top:0;
  right:25%;
  bottom:0;
}

＆＃13;

<div class="content">
  <div class="content_left"></div>
  <div class="content_mid"></div>
  <div class="content_right"></div>
</div>

＆＃13;

div之间全高的垂直线

4 个答案: