JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="menu" onclick="menu();">X</div>

<div class="nav">
<p>With no height value provided for the HTML element, setting the height and/or min-height of the body element to 100% results in no height (before you add content).</p>
<p>However, with no width value provided for the HTML element, setting the width of the body element to 100% results in full page width.</p>
<p>This can be counterintuitive and confusing.</p>
<p>For a responsive full page height, set the body element min-height to 100vh.</p>
<p>If you set a page width, choose 100% over 100vw to avoid surprise horizontal scrollbars.</p>
<p>I'll leave you with a tutorial from my YouTube channel demonstrating the CSS height and width settings for an HTML page that is full screen size and grows with the content it contains:</p>
<p>With no height value provided for the HTML element, setting the height and/or min-height of the body element to 100% results in no height (before you add content).</p>
<p>However, with no width value provided for the HTML element, setting the width of the body element to 100% results in full page width.</p>
<p>This can be counterintuitive and confusing.</p>
<p>For a responsive full page height, set the body element min-height to 100vh.</p>
<p>If you set a page width, choose 100% over 100vw to avoid surprise horizontal scrollbars.</p>
<p>I'll leave you with a tutorial from my YouTube channel demonstrating the CSS height and width settings for an HTML page that is full screen size and grows with the content it contains:</p>
</div>

<div>
<p>With no height value provided for the HTML element, setting the height and/or min-height of the body element to 100% results in no height (before you add content).</p>
<p>However, with no width value provided for the HTML element, setting the width of the body element to 100% results in full page width.</p>
<p>This can be counterintuitive and confusing.</p>
<p>For a responsive full page height, set the body element min-height to...

CSS

* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {position:relative;background-color:#222222;}

.menu {text-align:right;padding:20px;}

.bod_show {margin:0;background-color:#dedede;position:absolute;width:100%;min-height: 100vh;overflow-X:hidden;right:0%;
transition:all 0.5s ease;}

.bod_hide {margin:0;background-color:#dedede;position:absolute;width:100%;min-height: 100vh;overflow-X:hidden;right:90%;
transition:all 0.5s ease;}

.nav {position:absolute;width:90%;height:100%;top:0;left:100%;overflow-Y:auto;}

JavaScript

function menu() {
  var bod = document.getElementById('bod');
  if(bod.className== "bod_show") {bod.className= "bod_hide";} else {bod.className= "bod_show";}

}