html 高度怎么根据宽度的变化而变化?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html 高度怎么根据宽度的变化而变化?相关的知识,希望对你有一定的参考价值。

bodywidth:100%;
<div style="width:25%; float:left;">

</div>
<div style="width:25%; float:left;">

</div>
<div style="width:25%; float:left;">

</div>
<div style="width:25%; float:left;">

</div>
这样的连续4个盒子 宽都是自适应屏幕宽度的25%,怎么能让高度跟宽度相等形成4个正方形盒子,并且自适应屏幕宽度的百分之25%呢?

以下例子代码测试通过,满足你的要求:

<div style="width:25%; float:left; background-color:red; height:expression(this.clientWidth)">
1
</div>
<div style="width:25%; float:left; background-color:blue; height:expression(this.clientWidth)">
2
</div>
<div style="width:25%; float:left; background-color:red; height:expression(this.clientWidth)">
3
</div>
<div style="width:25%; float:left; background-color:blue; height:expression(this.clientWidth)">
4
</div>追问

好像不行

追答

什么叫好像?请认真点!稍微尊重一下别人的劳动成果!




请拷屏你不行的代码和效果,不行的唯一原因就是代码粘贴错误。

追问

别激动兄弟,我测是了一下,在ie6下这个确实好使,但在ie8下就显示一条

追答

我拷屏验证的机器IE9

追问

看下ie8吧,主要是针对ie8,手机浏览器

追答<html><body style=\'margin:0 0 0 0\'>
<script language=javascript>
var w=Math.round(document.body.clientWidth/4-1);
alert(w);
var i;
for (i=1;i<=4;i++)
document.write(\'<div style="width:\'+w+\'; height:\'+w+\'; float:left; background-color:\'+(i%2?\'red\':\'blue\')+\';">\'+i+\'</div>\');

</script>
</body></html>

是否支持JS代码,用JS计算出屏幕宽度输出内容可以吗?

参考技术A 你这种全屏的比较简单 ,用 vw ; width = 25vw;height=25vw;
对于居中块只能用jq弄了。
window.onresize = function ()
var rectbox = $("#onlive>.box>ul>li");
var wid = rectbox[0].offsetWidth;
rectbox.css("height":wid+"px");

css怎么使一个div的高随另一个div的高的变化而变化,还有就是怎么使第三个div的位置随它们的高度而变化。

感觉有点没说清。大家可以参见3w.smosz.cn/mosco/(3w变www)。有一个大div,里面有左右下三个div,左边的div的高度随内容的变化而变化(已实现),现在要右边的div的高随左边的变化而变化,同时下面的div的位置在上面div的高度变化后也自动往下变。试了好多方法了,都不行啊!难点:本站已有布局,不能打破原布局。位置的那一个好像要div全是position:static就可以了,但是因美观所以position只能是absolute。当然所谓的美观就是网站现在的样子,如果有其它方法可以实现的也是可以的。求帮助。解决了再加30分。
再帮忙看一下吧。

最常用的办法是:把你<div id="Layer7"></div>的背景颜色改成与此div的父级div的背景颜色一样,这样一来,<div id="Layer7"></div>跟父级div的颜色融为一体,就算<div id="Layer7"></div>高度固定,也看不出其高度会不会变化。这是大部分使用边侧菜单的网页常用的方法。要这么做,你的HTML代码只需要加上一个div,其它不变,修改如下:

<div id="Layercontent">   /*  加上这个div,把6 7 8 9 10div 包起来 */
<div id="Layer6"></div>
    <div id="Layer7">
        <div id="Layer8"></div>
        <div id="Layer9"></div>
    </div>
    <div id="Layer10"></div>
</div>                    /*  加上这个div,把6 7 8 9 10div 包起来 */

CSS代码其他不变,只用以下代码清单更换你相应部分:

#Layercontent 
position:absolute;
margin-top:152px;
margin-left:21px;
width:858px;
background-color: #cccccc;       /* 设置大背景颜色 */

#Layer6 
float: left;
border-right: 1px solid rgb(120, 120, 120);
width:615px;
height:auto!important;
_height:625px;
min-height:625px;
z-index:7;
background-color: #cccccc;      

#Layer7 
float: right;
height:auto!important;
_height:625px;
min-height:625px;
width:234px;
z-index:7;
background-color: #cccccc;  /* 设置此div背景颜色与大背景颜色一样 */

#Layer10 
float: left;
margin-top: 1.5em;
width:858px;
height:88px;
text-align: center;
line-height:44px;
background-color: #cccccc;      

颜色都可以修改,只需保证#Layer7与#Layercontent背景颜色一样,这样看起来#Layer7就像自动增加高度。

参考技术A 容器用height:auto;
左边,也用auto;右边用100%就可以了,

比如左边的auto会随内容高而高,然后外面容器层也会随着左边,或者右边高而高,,,

那么,右边的100%,就是相对于容器的高度,所以。就OK了。。。。

举个粟子:
<style>
#boxheight:auto;width:640px;margin:0 auto;
#box .leftwidth:50%;height:auto;float:left;
#box .rightwidth:50%;height:100%;float:left
<div id="box">
<div class="left">在边的层高度会随着左边的高度。。。</div>
<div class="right"></div>
</div>追问

这个不行吧,我的bodydiv里除了有左右外还有下面的div。当然可以举一反三把100%改百分80等,但是因为bodydiv的高度是变的,所以具体的数据是不能保证左右相等的,当然也可以再加一个层,但是觉得再加一个太麻烦,我前面的布局都要变了,可能会出现新的问题。还有另一个问题,就是下面层的位置怎么设啊?

追答

没看到人代码,什么都不好说。

不知道有没有理解错你意思,,,,最好有代码

追问

css文件可以下载的。你可以去到我提供的网址去看一下。我那不是个论坛吗,左边是内容,内容的多少由用户决定,所以高度是变化的,为了美观,所以右边的层的高度要随左边的变化,同理,下面的版权信息也要下移。贴一些代码吧。代码太多了,贴到补充里去。

追答

以我的代码来说
可以把版权信息放到box下面

#boxheight:auto;width:640px;margin:0 auto;
#box .leftwidth:50%;height:auto;float:left;
#box .rightwidth:50%;height:100%;float:left
#footerwidth:640px;margin:0 auto;

在边的层高度会随着左边的高度。。。

也可以这样:

#boxheight:auto;width:640px;margin:0 auto;
#box .leftwidth:50%;height:auto;float:left;
#box .rightwidth:50%;height:100%;float:left
#box .footerwidth:100%;height:100px
.cleclear:both;

在边的层高度会随着左边的高度。。。

这样布局肯定是可以做到你那样的,至于你的页面就要看你其它的布局,以及其它样式的定义。

参考技术B 这样给你说好了,你现在一共四个div,最上面一个,中间左边一个,右边一个,最下面一个,你无非是想让他们都居中所以用position absolute,但是你可以这样:
在4个div外面加上一个div,设置为居中,高度为100%,宽度你自己用你觉得合适的值,overflow-y设置为auto;
然后对你原本存在的最上面的那个div设置float为top,宽度设置为100%,高度设置你自己觉得合适的值;
然后原本存在的左边div,高度设置auto,设置float为left,宽度比例你自己设置合适的值;
右边的div高度你可以用一点js和jquery来控制,比如你用$("#divLeft").css("height")来获取左边的高度,然后把这个值设给右边就可以实现实时变化了,因为我知道你这个forum的话是左边可能变化比较大,然后右边要随着左边的变化来适应,当然float也要设置为left;
(此处要保证你的左div和右div的宽度之和刚好是最外层的div的宽度)
最下面的div也设置宽度100%,float设置为bottom或者left随便,高度你自己挑合适的值就好了。

关键在于float和获取更改css值。

补充一下,position能不用尽量别用absolute
参考技术C 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>左右自适应高度</title>
<style type="text/css">
.outer,.inner
width:200px;

.outer
margin:10px 0;
background:red;
color:#fff;
display:table;

.inner
float:right;
margin-left:200px;
background:blue;

.right
float:right;width:180px;

.left

float:left;width:180px;
margin-left:-200px;

</style>
</head>
<body>
<div class="outer">
<div class="inner">
<div class="right">
如果这边高于另一边,那另一边也会自适应这边的高度

</div>
<div class="left">

</div></div>
</div>
<div class="outer">
<div class="inner">
<div class="right">


</div>
<div class="left">
如果这边高于另一边,那另一边也会自适应这边的高度
</div></div>
</div>
</body>
</html>

以上是关于html 高度怎么根据宽度的变化而变化?的主要内容,如果未能解决你的问题,请参考以下文章

怎样设置div 高度随宽度变化而变化?比如说height=width*80%?

在CSS网页里设成宽度为100%全屏,但网页里的table里宽度又怎么设置了?table宽度不会随着屏幕变化而变化?

winform中如何让label的宽度固定而长度随着文本的变化而变化???

iframe的高度可以随内容的多少而变化吗

画布的 HTML 属性(宽度、高度)独立变化

jQuery - 检测窗口宽度变化但不检测高度变化