我知道这个问题:Height equal to dynamic width (CSS fluid layout)
但我想要更多!!我想要一个灵活的容器,它总是具有正方形的纵横比,但最大高度和最大宽度为100%的页面(窗口元素),并且它的顶部始终是垂直和水平居中。
像这样:
// Container matches height of the window
// container-height = 100%; container-width = absolute-container-height
-page/browser-window-
- ####### -
- #cont-# -
- #ainer# -
- ####### -
---------------------
// container matches width of the window
// container-width = 100%; container-height = absolute-container-width
--page---
- -
- -
-#######-
-#######-
-#######-
-#######-
- -
- -
---------
是否可以使用纯css(甚至更好的跨浏览器)来实现这一目标?
修改 我知道css3有calc(),但由于poor mobile browser-support,我不想使用它。
EDIT2: 好像,我没有让自己清楚。我需要包装器的高度和宽度来匹配窗口的高度或宽度,具体取决于哪个更小。方形容器不应超过窗口高度/宽度的较小值。
这是如何用jQuery完成的:
// container/#main-wrapper has top: 50%, left: 50%, position: absolute via css
$(window).resize(function () {
var $ww = $(window).width();
var $wh = $(window).height();
if ($ww > $wh) {
$('#main-wrapper').css({
height: $wh,
width: $wh,
marginTop : ($wh / 2) * -1,
marginLeft : ($wh / 2) * -1
});
} else {
$('#main-wrapper').css({
height: $ww,
width: $ww,
marginTop : ($ww / 2) * -1,
marginLeft : ($ww / 2) * -1
});
}
});
答案 0 :(得分:3)
我终于明白了。神奇的成分是视口单元。
鉴于这个html结构:
.l-table
.l-table-cell
.square
你可以使用这个css(很好地实现它的scss,但你明白了)让它工作
html,
body{
height: 100%
}
l-table{
background: orange;
display: table;
height: 100%;
width: 100%;
}
.l-table-cell{
display: table-cell;
vertical-align: middle;
border: 2px solid black;
}
.square{
background: red;
margin: auto;
@media (orientation:landscape) {
width: 70vh;
height: 70vh;
}
@media screen and (orientation:portrait) {
width: 70vw;
height: 70vw;
}
}
http://codepen.io/johannesjo/pen/rvFxJ
对于需要它的人,有一个polyfill。
答案 1 :(得分:1)
编辑:自从撰写以下内容后,我在Twitter上提出上诉,得到了Brian Johnson的回复。他提出了一种在语义上并非100%完美的解决方案,但它非常好,而且我肯定会使用它。他要求我在这次讨论中分享。 LINK 强>
我现在遇到同样的问题而且我只是输入了这个确切的问题,所以虽然我无法回答它,但我想分享我迄今为止发现的内容,以防它有助于任何人来最后的解决方案。
为了澄清,我需要将我的内容放入一个正方形,如果是肖像,则填充浏览器宽度的60%,如果是横向,则需要60%的高度。
但是,此方块不得超过视口的宽度或高度。
使用找到的技术here我设法创建了流体方块,但在横向时它仍然超过了视口。
width: 60%;
height:0;
padding-bottom: 60%;
我已尝试在landscape
侧面翻转该技术,但这不起作用。 (您可以在上面的示例中看到该代码,注意到。)
我无法使用简单的max-height
属性,因为padding-bottom
属性正在计算高度。
我已经考虑过添加一个额外的div,正如其他人所建议的那样(C-Link的帖子非常有趣),但我无法弄清楚我是如何做到这一点我们想要它做的。
答案 2 :(得分:0)
如果你将早期的概念与类似的div作为容器进一步使用,那该怎么办?容器增加了最大高度&宽度。我尝试了这个,容器没有向我扔一个滚动条。我必须说自己的行为非常有趣。这对你有用吗?
<div id="container">
<div id="centered">A DIV</div>
</div>
#container {
top:0;
bottom:0;
right:0;
left:0;
margin:auto;
position:absolute;
width:200px;
height:200px;
max-width:100%;
max-height:100%;
background:#00f;
padding:0;
}
#centered {
background: green;
bottom: 0;
height: 80px;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 80px;
}
答案 3 :(得分:0)
HTML 的
<div id="outer">
<div id="inner">YOUR CONTENTS HERE
</div>
</div>
CSS
html, body{
height: 100%;
}
#outer{
max-height: 100%;
max-width: 100%;
position: relative;
height: 100%;
}
#inner{
position: relative;
top: 50%;
margin-top: -50% auto auto auto;
background: red;
text-align: center;
color: yellow;
}
请参阅 fiddle 。