Resize the form as hidden fields are displayed

Navigation
1

The form has a white part at the end because it is considering the hidden fields. the scroll bar should drop down to the orange div and not exceed. 

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="lolkittens" />

    <title>Untitled 1</title>
</head>

<script language="javascript">

    function Mudarestado() {

          document.getElementById("ts1").style.visibility = "visible";
          document.getElementById("ts2").style.visibility = "visible";
          document.getElementById("ts3").style.visibility = "visible";
          document.getElementById("ts4").style.visibility = "visible";
          document.getElementById("ts5").style.visibility = "visible";
          document.getElementById("ts6").style.visibility = "visible";
          document.getElementById("ts7").style.visibility = "visible";
          document.getElementById("ts8").style.visibility = "visible";
          document.getElementById("bt1").style.visibility = "visible";

    }

    function Mudarestado2() {

          document.getElementById("ts11").style.visibility = "visible";
          document.getElementById("ts12").style.visibility = "visible";
          document.getElementById("ts13").style.visibility = "visible";
          document.getElementById("ts14").style.visibility = "visible";
          document.getElementById("ts15").style.visibility = "visible";
          document.getElementById("ts16").style.visibility = "visible";
          document.getElementById("ts17").style.visibility = "visible";
          document.getElementById("ts18").style.visibility = "visible";
          document.getElementById("ts19").style.visibility = "visible";
          document.getElementById("ts20").style.visibility = "visible";
          document.getElementById("ts21").style.visibility = "visible";
          document.getElementById("ts22").style.visibility = "visible";
          document.getElementById("bt2").style.visibility = "visible";

    }

</script>

<body>

<div style="width:100%; height: 200px; background-color: #8080FF;">


</div >

<div style="width:100%; height: 700px; background-color: gray;">

    <div><label>cargo</label><input type="text"></div><br />
    <div><label>cargo</label><input type="text"></div><br />
    <div><label>cargo</label><input type="text"></div><br />
    <div><label>cargo</label><input type="text"></div><br />
    <div><label>cargo</label><input type="text"></div><br />
    <div><label>cargo</label><input type="text"></div><br />
    <div><input type="button" value="mudar estado" onclick="Mudarestado()"></div>

    <div id="ts1" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts2" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts3" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts4" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts5" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts6" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts7" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts8" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="bt1" style="visibility: hidden"><label>cargo</label><input value="mudar estado 2" type="button" onclick="Mudarestado2()"></div><br />
    <div id="ts11" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts12" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts13" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts14" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts15" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts16" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts17" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts18" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts19" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts20" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts21" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts22" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />


</div>

<div style="width:100%; height: 200px; background-color: #FF8000;">
    <div><label>os 700 pixels acaba no fim da tarja laranja</label></div>
</div>

</body>
</html>
    
asked by anonymous 11.07.2016 / 05:21

1 answer

0

Put an overflow-y on the gray background div. 

<div style="width:100%; height: 700px; background-color: gray; overflow-y: auto;">
    
11.07.2016 / 19:47
NullReferenceException: Object reference not set to an instance of an object Gulp Watch, SASS does not change you