0

現在の幅/高さ (どちらもパーセンテージ 100% で指定) を最小幅/高さとして使用するにはどうすればよいですか?

ここに試してみてください：

<!doctype html>
<html>
    <head>
        <title>Layout</title>
        <script>
            var myDiv = document.body;
            var curWidth = myDiv.style.width;
            var curHeight = myDiv.style.height;
            myDiv.style.minWidth = curWidth;
            myDiv.style.minHeight = curHeight;

            myDiv = document.getElementById('wrapper1');
            var curWidth = myDiv.style.width;
            var curHeight = myDiv.style.height;
            myDiv.style.minWidth = curWidth;
            myDiv.style.minHeight = curHeight;
        </script>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            html {
                height: 100%;
            }
            body {
                height: 100%;
            }
            #wrapper1 {
                width: 100%;
                height: 100%;
            }
            #wrapper2 {
                width: 8%;
                height: 100%;
                float: left;
            }
            #wrapper3 {
                width: 92%;
                height: 100%;
                float: left;
            }
        </style>
    </head>
    <body>
        <div id="wrapper1">
            <div id="wrapper2">
                Wrapper
            </div>
            <div id="wrapper3">
                Wrapper
            </div>
        </div>
    </body>
</html>

Javascriptを使用して（または可能であればcssのみを使用して）、すべてのdivの最小幅/高さを現在の幅/高さ（どちらもCSSで100％）に設定しようとしています

4

2 に答える 2

2

要素の高さが CSS で設定されている場合、 は要素の高さを返さないことに注意してくださいmyDiv.style.height。ただし、div が<div style="height: 10px"></div>. 以下を使用する必要があります。

var curHeight = myDiv.offsetHeight;
var curWidth = myDiv.offsetWidth;

編集：ああ、スクリプトタグをhtmlの最後に移動する必要があります。そうしないと、wrapper1を選択できなくなります（または別のファイルで？）。

ここでは、offsetHeight と offsetWidth に関するリファレンスを示します。ここ

取得したcss値を挿入するためにdocument.writeを実行すると仮定すると、これがあなたのアプローチで見られる唯一の問題です。

于 2012-08-12T01:45:35.337 に答える
0

私が理解している限り、デフォルトでdivの幅と高さを指定しない場合、常にそれを囲むdivから取得されます。例：

<body>
        <div id="wrapper1">
            <div id="wrapper2">
                Wrapper
            </div>
            <div id="wrapper3">
                Wrapper
            </div>
        </div>
</body>

<style>
         #wrapper1 {
                width: 100%;
                height: 100%;
            }
</style>

これにより、wrapper1、wrapper2、wrapper3 の 3 つの div すべてに幅と高さの両方が 100% として適用されます。

于 2012-08-12T01:48:45.730 に答える