Question

如何使用当前宽度/高度（均以百分比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将所有div的最小宽度/高度设置为当前宽度/高度（均为100％css）（或者如果可能，仅使用css）

Answer 1

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

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

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

这是对offsetHeight和offsetWidth的引用。 Here

这是我用你的方法看到的唯一问题，假设你做了一个document.write来插入检索到的css值。

Answer 2

据我了解，如果你没有默认指定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％

如何使用当前div宽度/高度作为最小宽度/高度？

2 个答案: