Question

我正在尝试弄清楚如何使用javascript设置列宽和高度，以便我可以根据浏览器窗口设置它们。我想到了以下代码。但它不起作用。请帮忙

<script type="javascript">
function size()
{
                    document.getElementById("body").style.width=window.innerWidth;
document.getElementById("body").style.height=window.innerHeight;
var width=document.getElementById("body").style.width;
var height=document.getElementById("body").style.height;

document.getElementById("header").style.height=(.15*height);
document.getElementById("loginbox").style.height=(.15*height);
document.getElementById("navigation").style.height=(.05*height);
document.getElementById("leftpanel").style.height=(.70*height);
document.getElementById("contentarea").style.height=(.75*height);
document.getElementById("addcolumn").style.height=(.75*height);
document.getElementById("footer").style.height=(.10*height);

document.getElementById("header").style.width=(.75*width);
document.getElementById("loginbox").style.width=(.25*width);
document.getElementById("navigation").style.width=(width);
document.getElementById("leftpanel").style.width=(.20*width);
document.getElementById("contentare").style.width=(.65*width);
document.getElementById("addcolumn").style.width=(.15*width);
document.getElementById("footer").style.width=(width);
}    
</script>

我使用css根据需要浮动列。然后我调用body中的函数size（）（onload = size（））

但没有工作

Answer 1

样式属性是字符串，最后需要一个单元：

document.getElementById("addcolumn").style.width=(width + "px");

您可能还需要将宽度和高度设置为：

var width = window.innerWidth;
var height = window.innerHeight

Answer 2

我建议采用不同的方法来实现这一点，这很容易维护：

function size() {
    var props = {
        header: {
            width: .75,
            height: .15
        },
        loginbox: {
            width: .25,
            height: .15
        },
        navigation: {
            width: 1,
            height: .05
        },
        leftpanel: {
            width: .2,
            height: .7
        },
        contentarea: {
            width: .65,
            height: .75
        },
        addcolumn: {
            width: .15,
            height: .75
        },
        footer: {
            width: 1,
            height: .1
        }
    },
        bodyElement = document.getElementById('body'),
        width = bodyElement.style.width = window.innerWidth,
        height = bodyElement.style.height = window.innerHeight;

    for (var id in props) {
        if (!props.hasOwnProperty(id)) continue;
        var element = document.getElementById(id),
            prop = props[id];
        element.width = (width * prop.width) + "px";
        element.height = (height * prop.height) + "px";
    }
}

注意：我没有测试过，但应该可以使用。

Answer 3

为什么不使用简单的CSS，使宽度为百分比，

width: 75%;

使用Javascript设置列宽

3 个答案: