使用jQuery调整大小时，为什么我不能使用CSS类指定div高度百分比？

Question

我想将div设为窗口高度的30％，然后单击使其为90％。 问题是，我只允许以百分比指定宽度，但是除非它的px，否则它会断开。 有什么想法吗？ 这是一个链接：

http://codepen.io/chris86/pen/avvWwJ

这是html：

<head>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>

<div id="button" class="banner" value="Switch Class"></div>

这是CSS：

.banner {
  background-color: #c3c3c3;
  height: 100px;
  width: 50%;
  padding: 0;
  margin:0 auto;
}

.bannerbig {
  background-color: #000000;
  height: 200px;
  width: 80%;
  padding: 0;
  margin:0 auto;
}

和jQuery：

$(function() {
    $('#button').click(function(){
        $(".banner").switchClass("banner","bannerbig",'fast');
        $(".bannerbig").switchClass("bannerbig","banner",'fast');
        return false;
    });
});

Answer 1

您的代码中断的原因是因为使用百分比作为高度或宽度的值取决于父级的高度。 就DOM而言，默认情况下唯一具有绝对高度/宽度的元素是文档对象。

因此，您必须指定默认情况下不具有绝对高度的第一个DOM元素作为文档高度的百分比，如下所示：

html, body {
    height: 100%;
}

然后在CSS中使用适当的百分比高度为.banner和.bannerbig类：

.banner {
  background-color: #c3c3c3;
  height: 30%;
  width: 50%;
  padding: 0;
  margin:0 auto;
}

.bannerbig {
  background-color: #000000;
  height: 90%;
  width: 80%;
  padding: 0;
  margin:0 auto;
}

希望这可以帮助。

使用jQuery调整大小时，为什么我不能使用CSS类指定div高度百分比？

问题描述

1 个解决方案

解决方案1
7 已采纳 2015-09-10 20:40:40

使用jQuery调整大小时，为什么我不能使用CSS类指定div高度百分比？

问题描述

1 个解决方案

解决方案1 7 已采纳 2015-09-10 20:40:40

解决方案1
7 已采纳 2015-09-10 20:40:40