javascript - How to position button depending on what content is on the page -

i'm having troubles positioning button on page css. want button fixed @ position when there lot of content on page want button move down.

firstly want button @ bottom of page when there isn't content such code below this:

#button {   position: fixed;   height:90px;   width:220px;   left:16%;   top:70%;   border:none;   background:none; } 

then when there lots of content want button move down such code below:

#button {   position: absolute;   height:90px;   width:220px;   left:16%;   padding-top:10%;   padding-bottom: 13%;   border:none;   background:none; } 

can help? i've looked online cant make sense of it.

if define wrapper block element (a <div> example) around content , put <button> directly under element, possible reach desired result css only.

html:

<div id="wrapper">     <!-- other content goes here -->     <button id="button">sample</button> </div> 

css:

#wrapper {     position: relative;     min-height: 100vh; }  #button {     position: absolute;     bottom: 0; } 

however, have warn fact legacy browsers not support vh unit , others show buggy behavior. take @ here before implement in project.