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 的最小宽度/高度设置为当前宽度/高度（它们都是 100% 的 css）

4

2 回答 2

2

请注意，myDiv.style.height如果通过 CSS 设置，则不会返回元素的高度，但前提是 div 看起来像<div style="height: 10px"></div>. 你应该使用：

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

编辑：哦，您需要在 html 的末尾移动您的脚本标签，否则您将无法选择 wrapper1（或在不同的文件中？）。

这是关于 offsetHeight 和 offsetWidth 的参考资料。这里

假设您执行 document.write 以插入检索到的 css 值，这是我在您的方法中看到的唯一问题。

于 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>

这会将宽度和高度都作为 100% 应用于 wrapper1、wrapper2、wrapper3 中的所有 3 个 div

于 2012-08-12T01:48:45.730 回答