Full Height with fixed height solution - Border HACK

by marakoss

HTML

<div class="wrapper">
    <div class="header">
        Header Header Header Header        
    </div>
    <div class="values">
Lorem  ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ipsum nibh,  tempor quis tempor ac, pharetra a nisl. Praesent ut tortor ipsum. Proin  pellentesque, dolor sit amet egestas fringilla, eros justo tincidunt  dolor, ac faucibus dui urna elementum urna. Vestibulum vel arcu ac mi  venenatis ultrices a et velit. Duis sit amet magna nunc. Aenean est  massa, vestibulum nec cursus convallis, dignissim ut dui. Fusce luctus  ipsum vitae sapien viverra dictum. Donec vitae turpis sed ipsum mattis  sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris erat risus, gravida tempus dictum nec, sodales sit amet justo. Ut  pellentesque orci nec velit volutpat dignissim et vitae velit. Aliquam  tempus tincidunt arcu, eget dictum sem posuere at. Ut sed massa dolor,  eu tempor leo. Donec eget augue metus. Nulla at orci ante, vitae iaculis  urna.
            
            Donec tempor tincidunt  iaculis. Fusce et justo justo, id dictum elit. Suspendisse est augue,  placerat a laoreet ut, ultricies et augue. Class aptent taciti sociosqu  ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam  erat volutpat. In elementum tempus neque, non vestibulum nisi fringilla  sit amet. Nam in tellus justo, nec laoreet justo. Nullam ligula nisl,  facilisis ullamcorper ultricies eget, aliquet a leo. Nunc eu neque sed  neque hendrerit ornare ac non felis. Donec accumsan erat vel dolor  ullamcorper nec interdum risus feugiat. Etiam elementum porttitor ligula  in fermentum. Aenean placerat tortor mi, eu aliquet sem. Sed nec tortor  ante, quis facilisis justo. Curabitur odio erat, varius a volutpat eu,  vestibulum vel diam. In hac habitasse platea dictumst. Nullam sed tortor  sit amet sem accumsan lacinia non et tellus.
            
            Sed  posuere sagittis ipsum, nec auctor nulla feugiat et. Mauris eu elit mi.  Vivamus...

CSS

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    height: 100%;
}

.wrapper{
    width:50%;
    height:100%;
    background-color:orange;
    padding: 20px;
}

.header {
    background-color: green;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 30px;
    position: relative;
    z-index: 2;
}

.values {
    border-top: 30px solid black;
    margin: -30px 0 0 0;
    background-color: red;
    height: 100%;
    overflow: auto;
}