-
-
Save nmccready/397bf70f2450b492232af275c3e33801 to your computer and use it in GitHub Desktop.
textarea fill height // source http://jsbin.com/siyene
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
<style id="jsbin-css"> | |
html, | |
body { | |
height: 100%; | |
} | |
html div, | |
body div { | |
width: 100%; | |
height: 100%; | |
} | |
html div .text, | |
body div .text { | |
width: 100%; | |
height: 100%; | |
-webkit-box-sizing: border-box; | |
/* Safari/Chrome, other WebKit */ | |
-moz-box-sizing: border-box; | |
/* Firefox, other Gecko */ | |
box-sizing: border-box; | |
} | |
</style> | |
</head> | |
<body> | |
<div> | |
<textarea class="text">Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</textarea> | |
</div> | |
<script id="jsbin-source-html" type="text/html">doctype html | |
html | |
head | |
meta(charset='utf-8') | |
meta(name='viewport', content='width=device-width') | |
title JS Bin | |
body | |
div | |
textarea.text Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends. | |
</script> | |
<script id="jsbin-source-css" type="text/css">html | |
body | |
height 100% | |
div | |
width 100% | |
height 100% | |
.text | |
width 100% | |
height 100% | |
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ | |
-moz-box-sizing: border-box; /* Firefox, other Gecko */ | |
box-sizing: border-box; </script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html, | |
body { | |
height: 100%; | |
} | |
html div, | |
body div { | |
width: 100%; | |
height: 100%; | |
} | |
html div .text, | |
body div .text { | |
width: 100%; | |
height: 100%; | |
-webkit-box-sizing: border-box; | |
/* Safari/Chrome, other WebKit */ | |
-moz-box-sizing: border-box; | |
/* Firefox, other Gecko */ | |
box-sizing: border-box; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment