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

Question

How can I use the current width/height (which are both specified in percentage 100%) as the minimum width/height? 如何使用当前宽度/高度（均以百分比100％指定）作为最小宽度/高度？

Here is a try: 这是一个尝试：

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

Trying to set min width/height of all divs to be the current width/height (which are both 100% by css) using Javascript (or using only css if possible) 尝试使用Javascript将所有div的最小宽度/高度设置为当前宽度/高度（均为100％css）（如果可能，仅使用css）

Answer 1

Be aware of the fact that myDiv.style.height does not return the height of an element if that was set through CSS, but only if the div looked something like <div style="height: 10px"></div> . 请注意，如果通过CSS设置， myDiv.style.height不会返回元素的高度，但只有当div看起来像<div style="height: 10px"></div>才会返回。 You should use: 你应该使用：

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

Edit: Oh, and you need to move your script tag at the end of your html, or you won't be able to select wrapper1 (or in a different file?). 编辑：哦，你需要在你的html末尾移动脚本标签，否则你将无法选择wrapper1（或在另一个文件中？）。

Here is references on offsetHeight and offsetWidth. 这是对offsetHeight和offsetWidth的引用。 Here 这里

That is the only problem I see with your approach assuming you do a document.write to insert the retrieved css values. 这是我在您的方法中看到的唯一问题，假设您执行document.write以插入检索到的css值。

Answer 2

As far as I understand, If you dont specify the width and height of a div by default it will always take it from its enclosing div. 据我所知，如果你没有默认指定div的宽度和高度，它总是从它的封闭div中取出它。 example: 例：

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

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

This will apply width and height both as 100% to all 3 divs in wrapper1, wrapper2, wrapper3 这将对wrapper1，wrapper2，wrapper3中的所有3个div应用宽度和高度均为100％

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

问题描述

2 个解决方案

解决方案1
2 2012-08-12 01:45:35

解决方案2
0 2012-08-12 01:48:45

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

问题描述

2 个解决方案

解决方案1 2 2012-08-12 01:45:35

解决方案2 0 2012-08-12 01:48:45

解决方案1
2 2012-08-12 01:45:35

解决方案2
0 2012-08-12 01:48:45