css这样写:
这样的话我们的div倒是可以随着窗口的变化进行宽度的缩放,但是高度是不变的,这样肯定不行,我们要达到按比例缩放的话高度肯定也是要写成百分比的。那么怎么写呢?直接写百分比么 height:21%这个就别想了,肯定不行的。
我们可以借用一个不常见的属性,padding-bottom属性。
从手册可以看到,当padding-bottom为百分比的值时,定义的是基于父元素宽度的百分比下内边距。
所以我们的css如果这样写:
我们就会得到一个和我们宽度相等的高度,而且我们的div会随着窗口大小的改变进行等比例的缩放。
但是这个方法有一个问题就是,手册上说我们用的padding-bottom的这个值
感觉像是个雷啊
今天就先到这里,感兴趣的小伙伴可以一起探讨探讨。
实现div层的放大与缩小,参考实例如下:<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.content
{
border: 1px solid #ccc
width: 440px
overflow: hidden
margin: 10px
}
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if ($('#content').height() >400)
$('#content').height(400)
$('#bigger').toggle(function() {
$('#content').height($('#content').height() + 100)
$('#bigger').html('缩小')
}, function() {
$('#content').height($('#content').height() - 100)
$('#bigger').html('放大')
})
})
</script>
</head>
<body>
<div id="content" class="content">
内容1<br />
内容2<br />
</div>
<br />
<span id="bigger">放大</span>
</body>
</html>
head里加入<style>
.要设置大小的class名称/#要设置大小的id名称{width:你要设置的宽度,height:你要设置的高度}
</style>