Skip to content

Instantly share code, notes, and snippets.

@kenaniah

kenaniah/absolute-dialog-positioning.html

Created January 3, 2016 19:19
Show Gist options
  • Save kenaniah/7b18a663072124df72e7 to your computer and use it in GitHub Desktop.
Save kenaniah/7b18a663072124df72e7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
absolute-dialog-positioning.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
</head>
<style>
HTML, BODY, MAIN {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
MAIN {
position: relative;
}
DIV {
background-color: rgb(255, 200, 200);
padding: 4em;
border: 1px solid black;
/* positioning */
position: absolute;
/* centering */
margin: auto;
}
DIV.second {
/* Only grow to the width / height we need */
width: max-content;
height: max-content;
/* sizing constraints */
max-width: -webkit-fill-available;
max-width: fill-available;
max-height: -webkit-fill-available;
max-height: fill-available;
/* minimum margins (specify both opposing to center) */
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
}
</style>
<body>
<main>
<div class="first">First</div>
<div class="second">
Second
<h1>Div</h1>
<h1>With more content. This one will <b>grow</b> to it's maximum size, thanks to <code>fill-content</code></h1>
</div>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment