为 <div> 设置固定的高度和宽度答案

【问题标题】：Setting a fixed height and width for a <div>为 <div> 设置固定的高度和宽度
【发布时间】：2013-01-15 05:02:48
【问题描述】：

function scrollfun()
{
    var ob = document.getElementById('rowScroll');
    ob.style.height ="300px";
    ob.style.width = "200px";               
}

这里的rowScroll 是<div> id。上面的代码工作正常。但是下面的代码不起作用：

function scrollfun()
{
    var ob = document.getElementById('rowScroll');
    ob.style.height ="30%";
    ob.style.width = "20%";             
}

我怎样才能使用百分比？

【问题讨论】：

百分比的工作方式与 px 的工作方式相同。
'Not working' 没有说明问题；一般来说，解释你期望发生的事情，以及实际发生的事情。在这种情况下，后者可能就足够了。
我能问一下你为什么用JS函数而不是CSS来做这个吗？

标签： javascript html css

【解决方案1】：

仅供参考，基于百分比的宽度高度取决于元素“rowScroll”的父容器。尝试将高度、宽度信息提供给父级本身...

更新：

为了使高度宽度为屏幕的 50%，如下所示：

function windowHW() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return [myHeight,myWidth];
}
function scrollfun()
    {
        var ob = document.getElementById('rowScroll');
        document_dimension = windowHW();
        ob.style.height =document_dimension[0]/2;
        ob.style.width =document_dimension[1]/2;
    }

请注意，windowHW函数是对以下解决方案的轻微修改：

stackoverflow question: JavaScript - Get Browser Height meder回答了

【讨论】：

div 的高度应该是屏幕或窗口高度的 50% 或 60%
这不是答案。要请求更多信息或提出修改建议，请在原始帖子下方发布评论。 Answer 部分保留用于回答（或至少尝试回答）问题中提出的问题。
我将其保留为答案：'基于百分比的宽度高度取决于元素'rowScroll'的父容器。尝试为父级本身提供高度、宽度信息。'

【解决方案2】：

只需使用来自 javascript 的属性 className

function scrollfun()
{
   document.getElementById("rowScroll").className = "MyClass";      
}

在你的 CSS 中

.MyClass{height:30%;width:20%;}

【讨论】：

这样做和他在做什么没有区别
您可以使用其 ID 定位元素，无需添加类。 #rowScroll{height:30%; width:20%;}
@HeHui：在CSS的支持下做，因为OP不能用javascript的值实现

【解决方案3】：

如果你“告诉”它这些百分比的来源会怎样。喜欢

function scrollfun()
{
    var ob = document.getElementById('rowScroll');
    ob.style.height = (container-width * 30)/100 + "px"
    ob.style.width = (container-width * 20)/100 + "px"             
}

【讨论】：

【解决方案4】：

您需要使用 div 标签来实现这一点。请参阅下面的工作代码：

<!DOCTYPE html>
<html>
<head>
<script>
function displayResult()
{
document.getElementById("b1").style.height="200%";
}
</script>
</head>
<body>

<div style="height:25px;">
<input type="button" id="b1" onclick="displayResult()" value="Change height of button" >

</body>
</html>

【讨论】：