đường thẳng đứng có chiều cao đầy đủ giữa các div

Question

Tôi có ba div (trái, giữa và phải) và các div này không có chiều cao chính xác bởi vì nó phụ thuộc vào số lượng văn bản hàng bên trong div. Bây giờ tôi muốn các đường thẳng đứng (tách biệt ba div) thông qua toàn bộ chiều cao của màn hình người dùng, bất kể số lượng div cao bao nhiêu.

Tôi làm cách nào để thực hiện việc này? Bởi vì, như bạn có thể thấy trong css-code, border-right/border-left không làm việc cho tôi.

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

Sửa 1: Tôi muốn có những riêng biệt-dòng 1px rộng và tôi không thể thiết lập chiều cao tiếp theo ent_left, content_mid, content_right đến 100% vì tôi có các hộp có thể định lại trong các div này.

Answer 1

Tôi nghĩ rằng đây có phải những gì bạn muốn.

JSFiddle example

Cấu trúc HTML là phức tạp hơn một chút hơn của bạn:

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

Và đây là 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 2

Bạn thực sự có thể giả mạo nó bằng cách sử dụng background-color cho phụ huynh.

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

Fiddle: http://output.jsbin.com/hefefawilu/1

Answer 3

Chỉ cần tạo một fiddle sử dụng mã của bạn. Xem và cho tôi biết nếu điều này giải quyết được vấn đề của bạn.

http://jsfiddle.net/knxd0htm/

Thêm phần này của mã để làm cho nó hoạt

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

Bạn có thể đạt được điều này mà không cần thêm một HTML thêm bằng cách sử dụng Bộ chọn giả. Tôi cũng đã dọn dẹp một số mã hoạt động trên bề rộng :).

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

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