Chr*_*ris 3 html javascript css jquery
我想将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;
});
});
您的代码中断的原因是因为使用百分比作为高度或宽度的值取决于父级的高度.就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;
}
希望这可以帮助.
| 归档时间： |
|
| 查看次数： |
835 次 |
| 最近记录： |