5

我知道这个问题：高度等于动态宽度（CSS 流体布局）

但我想要更多！！我想要一个灵活的容器，它始终具有正方形的纵横比，但最大高度和最大宽度为页面（窗口元素）的 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()，但由于移动浏览器支持不佳，我不想使用它。

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

        });
    }
});
4

4 回答 4

3

我终于弄明白了。神奇的成分是视口单元。

鉴于此 html 结构：

.l-table
  .l-table-cell
    .square

您可以使用这个 css（实际上是它的 css，但你明白了）让它工作

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。

于 2014-02-28T03:36:33.397 回答
1

编辑：自从写下以下内容后，我在 Twitter 上提出了上诉，并得到了 Brian Johnson 的回复。他提出了一个在语义上不是 100% 完美的解决方案，但它非常好，我肯定会使用它。他要求我在这次讨论中分享它。关联

我现在有同样的问题，我只是在输入几乎这个确切的问题，所以虽然我无法回答，但我想分享我到目前为止发现的内容，以防它帮助任何人想出最终解决方案。

为了澄清，我需要我的内容适合一个正方形，如果纵向填充浏览器宽度的 60%，如果横向填充浏览器宽度的 60%。

但是，这个正方形绝不能超过视口的宽度或高度。

使用此处找到的技术，我设法创建了流体正方形，但在横向时它仍然超出了视口。

width: 60%;
height:0;
padding-bottom: 60%;

链接到 Codepen 示例

我曾尝试将这种技术翻转过来，landscape但这不起作用。（您可以在上面的示例中看到该代码，并注明。）

我不能使用简单的max-height属性，因为高度是由padding-bottom属性计算出来的。

我曾考虑像其他人建议的那样添加一个额外的 div（C-Link 的帖子真的很有趣），但我不知道如何让它做我们希望它在这里做的事情。

于 2013-04-05T18:32:49.300 回答
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;
}

更新小提琴：http: //jsfiddle.net/djwave28/mBBJM/96/

于 2013-04-05T02:34:36.283 回答
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;
}

看到这个小提琴。

于 2013-04-05T02:59:38.333 回答