linee verticali a piena altezza tra i div

Question

Ho tre div (sinistra, metà e destra) e questi div non hanno un'altezza esatta, perché dipende dal numero di righe del testo all'interno del div. Ora voglio le linee verticali (che separano i tre div) attraverso l'intera altezza del monitor degli utenti, non importa quanto siano alti i div.

Come posso fare questo? Perché, come puoi vedere nel codice css, border-right/border-left non funzionano per me.

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

Edit 1: Vorrei avere questi separate linee di 1px di larghezza e non riesco a impostare l'altezza di cont ent_left, content_mid, content_right al 100% perché ho scatole ridimensionabili in questi div.

Answer 1

Penso che questo fa ciò che si vuole.

JSFiddle example

La struttura HTML è un po 'più complicato di vostra:

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

Ed ecco il 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

Si può effettivamente simulare utilizzando background-color per il genitore.

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

appena creato un violino utilizzando il codice. Vedere e fammi sapere se questo risolve il problema.

http://jsfiddle.net/knxd0htm/

Aggiungi questa parte del codice per farlo funzionare

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

si può raggiungere questo senza l'aggiunta di un HTML in più utilizzando Pseudo selettori. Ho anche riordinato parte del codice che risolve le larghezze :).

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