css 怎样定义屏幕高度的一半

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 怎样定义屏幕高度的一半相关的知识,希望对你有一定的参考价值。

CSS搞定不了,设定百分比是不能兼容所有浏览器的,所有高度不要使用%
你试着调用后台脚本吧,通过后台获取屏幕或者浏览器高度,然后给标签赋值
因为公司项目需要赋值的情况很多,这方面的事情都是交给程序员做的,我们做设计的一般不考虑怎么获取的
参考技术A 用百分百吧 ,height:50%; 参考技术B 这不同的浏览器浏览的效果不一样,还有不同版本的浏览器也有可能不一样的。设定百分比是不能兼容所有浏览器的

将 div 的高度设置为宽度的一半

【中文标题】将 div 的高度设置为宽度的一半【英文标题】:Set the height of a div to be half of whatever the width is 【发布时间】:2013-07-14 08:47:39 【问题描述】:

当宽度会根据用户的屏幕尺寸而变化时,如何?

我在 div 上设置了以下内容...

#div1 
    min-width:400px;
    width:100%;
    max-width:1200px;
    height:400px;
    background-color:red;  

宽度可以正常工作,如果屏幕太窄,它会锁定在 400 像素,如果屏幕太大,它也会停止扩展到 1200 像素。但是,我也希望在任何给定时间将高度更改为宽度的一半。比如……

#div1 
    min-width:400px;
    width:100%;
    max-width:1200px;
    height:width/2;
    background-color:red;  

这没有奏效(我没想到会这样)。

如果可能的话,我更喜欢使用 CSS,但如果用户也手动调整 Internet 窗口的大小,我也希望改变高度(就像目前宽度发生的情况一样)。我不确定 CSS 是否可行,但是,如果 Jquery 有办法实现这一点,我也很乐意使用它。

jsFiddle of the above for reference.

谁能帮帮我?

【问题讨论】:

【参考方案1】:

如果您可以只支持现代浏览器,您可以这样做:http://jsfiddle.net/kNPfh/

vw 度量是视口宽度的 1/100,因此 50vw 是屏幕宽度的 50%。

<div class='halfwidth'></div>

.halfwidth 
    width: 100%;
    height: 50vw;
    background-color: #e0e0e0;

如果没有,你可以使用:http://jsfiddle.net/ff7WC/

$(window).on( 'resize', function () 
    $('.halfwidth').height( $(this).width() / 2 );
).resize();

【讨论】:

对此进行了一些编辑,它完全符合我的要求。 jsfiddle.net/R5WqL 谢谢!出于好奇,哪个版本的 IE 支持第一个选项? np,vw 在 IE v9.0+ 中受支持 ...这是support chart @DomDay:您能否提供此类值的文档链接? @MichaelWalter 这里是 w2c link 如果你想要权威定义,这里是 browser compatability ...除此之外,谷歌是你的朋友 太酷了!还有hv用来玩身高。太棒了,我很长一段时间都没有处理前端。向好的方向改变了很多。我记得曾经唯一可能的方法是编写长行 ojf java 脚本!【参考方案2】:

确保你有一个 js 文件然后使用它

$(window).load(function()
    $('.element').height($('.element').width() / 2);
    $(window).resize(function()
        $('.element').height($('.element').width() / 2);
    );
);

http://jsfiddle.net/Hive7/8CNtU/2/

【讨论】:

【参考方案3】:

您可以借助父项的内边距来做到这一点,因为相对内边距(甚至是高度)基于元素的宽度。

CSS:

.imageContainer 
    position: relative;
    width: 25%;
    padding-bottom: 25%;
    float: left;
    height: 0;


img 
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;

有关详细信息,请参阅有关该主题的这篇文章 http://wemadeyoulook.at/how-we-think-about/proportional-scaling-responsive-boxes

您也可以为此使用 jquery,例如:

$('.ss').css('height',width()/2);

如果它解决了您的疑问,请选择此作为正确答案,请点击左侧的勾号。

【讨论】:

以上是关于css 怎样定义屏幕高度的一半的主要内容,如果未能解决你的问题,请参考以下文章

CSS 设置的高度超出屏幕高度为啥没出现滚动条

用javascript 怎样才能很好的获取手机的屏幕宽度和高度

前端面试 CSS— 实现布局:div垂直居中,左右10px,高度始终为宽度一半

python测试开发django-135.CSS如何让左侧浮动(float)元素占满屏幕高度

如何将最小高度设置为查看屏幕的 100% 和页面的一半?

css怎样才能设置高度为100%,就是里面的div跟着外面的大div增高。