1. 程式人生 > >讓內層DIV跟著外層DIV變化

讓內層DIV跟著外層DIV變化

群裡有人發問求助,外層DIV的width和height改變,裡面的DIV的大小也改變,相對位置又不變?

這裡可以在內層使用百分比。不用多說,上程式碼:

<!DOCTYPE html>
<head>
    <head>
        <title></title>
        <style type="text/css">
            #siye
            {
                border: 2px solid blue;
                width: 400px;
                height: 500px;
            }
             #siye div
            {
                margin-top: 20px;
                margin-left: 12px;
                width: 80%;
                height: 80%;
                border: 1px solid blue;
            }
        </style>
    </head>
    <body>
        <div id='siye'  ><div ></div></div>
        <button id="btn">dianwo
        </button>
    </body>
    </html>
    <script language="javascript" type="text/javascript">

        document.getElementById("btn").onclick = function () {
            document.getElementById("siye").style.width = "800px";

        };

    </script>