Skip to content

Instantly share code, notes, and snippets.

@niccai
Created March 3, 2017 19:05
Show Gist options
  • Save niccai/5fb5c5363ea993002e92a356dc39753f to your computer and use it in GitHub Desktop.
Save niccai/5fb5c5363ea993002e92a356dc39753f to your computer and use it in GitHub Desktop.
Fill Viewport with Relative Child #tags: css
/* http://codepen.io/Mest/pen/oKBIu?editors=1100 */
* {
box-sizing: border-box;
}
html,
body,
.parent-div {
height: 100%;
}
.parent-div {
background: #222226;
max-width: 500px;
margin: 0 auto;
padding: 2em;
}
.child-div {
background: #ccc;
text-align: center;
padding: 2em;
border-left: 5px solid red;
border-right: 5px solid red;
width: 100vw;
position: relative;
left: calc(-50vw + 50%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment