我需要创建一个DIV,其中width=height和视口的height=100%(显然,视口是可变的)。换句话说,一个完全正方形的DIV,它根据视口的高度计算尺寸。DIV中的元素将把它们的尺寸作为父DIV的高度和宽度的百分比。在我看来,这应该是很简单的做在CSS,但我已经卡住了!任何指针将非常感谢。
width=height
height=100%
2izufjch1#
我偶然发现了一个使用纯css的小窍门:
#square { width: 100%; height: 0; padding-bottom: 100%; }
http://blog.brianjohnsondesign.com/2013/maintain-aspect-ratio-for-html-element-using-only-css-in-a-responsive-design/
dm7nw8vv2#
vh
要使元素根据视口高度调整大小,可以使用vh单位:
body{margin:0;} div{ background:gold; height:100vh; width:100vh; }
<div></div>
这将使元素的宽度和高度等于视口的高度。Bowser支持的vh单位是ie9+。更多信息在这里
ztyzrc3y3#
你可以用jquery(或者如果你喜欢的话,也可以用纯javascript)来实现。使用jquery:
<div id="square"> </div> $(document).ready(function(){ var height = $(window).height(); $('#square').css('height', height); $('#square').css('width', height); });
e7arh2l64#
CSS3有一种使用vw(viewport width)和vh(viewport height)的方法。使用这些度量,100vw是viewport的整个宽度,100vh是整个高度。关于相对css3值和单位的更多信息,请点击此处。然而,在撰写本文时,唯一的支持是Internet Explorer 9,因此这可能不是您正在寻找的,但在未来支持到来时,这是一个值得记住的东西。
dgjrabp25#
我想出了一个额外的技巧来帮助部分解决这个问题,对于任何偶然发现这个页面的人来说......在页面的onload事件中运行以下代码:
$('body').css('font-size',$(window).height()/100)
这意味着css的“em”单位等于页面高度的100分之一--你现在可以在css文件中任意使用这个单位来调整任何项目相对于 windows 高度的大小。这比这里列出的其他解决方案更通用--而且最有可能的是,你想调整页面的所有元素来考虑 windows 高度。例如,如果你想创建一个正方形,你可以写:
#square{width:100em;height:100em}
当然,你也必须考虑到你页面上的任何文本(因为这个技巧会影响字体大小)
w1e3prcc6#
对于那些可能正在寻找一种纯CSS方式来包含具有最大维度的squarediv的人:这里的关键要点是,设置max-width和max-height时,将width和height设置为相反的值。
div
max-width
max-height
width
height
超文本标记语言
<div> </div>
中央支助组
html, body { margin: 0; padding: 0; width: 100vw; height: 100vh; display: flex; flex-direction: row; align-items: center; justify-content: center; } div { background-color: red; width: 100vh; height: 100vw; max-width: 100vw; max-height: 100vh; }
实时运行示例:https://jsfiddle.net/resistdesign/szrv5o19/
pbossiut7#
你可以用Javascript得到屏幕大小,然后你可以相应地设置宽度和高度。
然后,您可以使用这些信息并为要相应显示的页面生成少量CSS。
ldioqlga8#
我不知道我是否理解正确,但是如果你想把它设置为视口高度的100%,你可以很容易地在css中做到这一点:
.stuff { background:#DDD; display:inline-block; height: 100vh; width : 100vh; }
你可以查一下here
8条答案
按热度按时间2izufjch1#
我偶然发现了一个使用纯css的小窍门:
http://blog.brianjohnsondesign.com/2013/maintain-aspect-ratio-for-html-element-using-only-css-in-a-responsive-design/
dm7nw8vv2#
仅CSS解决方案:
vh
单位要使元素根据视口高度调整大小,可以使用vh单位:
这将使元素的宽度和高度等于视口的高度。
Bowser支持的vh单位是ie9+。更多信息在这里
ztyzrc3y3#
你可以用jquery(或者如果你喜欢的话,也可以用纯javascript)来实现。
使用jquery:
e7arh2l64#
CSS3有一种使用vw(viewport width)和vh(viewport height)的方法。使用这些度量,100vw是viewport的整个宽度,100vh是整个高度。关于相对css3值和单位的更多信息,请点击此处。
然而,在撰写本文时,唯一的支持是Internet Explorer 9,因此这可能不是您正在寻找的,但在未来支持到来时,这是一个值得记住的东西。
dgjrabp25#
我想出了一个额外的技巧来帮助部分解决这个问题,对于任何偶然发现这个页面的人来说......在页面的onload事件中运行以下代码:
这意味着css的“em”单位等于页面高度的100分之一--你现在可以在css文件中任意使用这个单位来调整任何项目相对于 windows 高度的大小。这比这里列出的其他解决方案更通用--而且最有可能的是,你想调整页面的所有元素来考虑 windows 高度。例如,如果你想创建一个正方形,你可以写:
当然,你也必须考虑到你页面上的任何文本(因为这个技巧会影响字体大小)
w1e3prcc6#
这很有趣...
对于那些可能正在寻找一种纯CSS方式来包含具有最大维度的square
div
的人:这里的关键要点是,设置
max-width
和max-height
时,将width
和height
设置为相反的值。超文本标记语言
中央支助组
实时运行示例:https://jsfiddle.net/resistdesign/szrv5o19/
pbossiut7#
你可以用Javascript得到屏幕大小,然后你可以相应地设置宽度和高度。
然后,您可以使用这些信息并为要相应显示的页面生成少量CSS。
ldioqlga8#
我不知道我是否理解正确,但是如果你想把它设置为视口高度的100%,你可以很容易地在css中做到这一点:
你可以查一下here