Question

我今天问了一个关于CSS / HTML / jQuery中的好坏做法以及何时使用jQuery设置容器尺寸的问题。我得到了一些好answers

所以，了解jQuery不是最好的选择，我决定问一些你可能会对这个“问题”给出一些意见

所以，我有一个页面放在一起的PHP。我的所有页面都有一个标题，并且正在使用php更改内容（我这样说只是为了让你们知道在一个容器中包装标题和div不是一个选项）：

include ("header.php");
include ("$lang/$section.php");
include ("footer.php");

我有一个固定高度的标题（100px + 100px margin-bottom），然后我有一个div，在小于768px（高度）的屏幕上，我想不会超过剩余的空间。如果屏幕较大，我希望我的div为

max-height: 420px;

带

padding: 100px 0;

在这个div内部我有3个浮动列。我需要它们来填充父div中的空格。

我通常会做的是 - 使用jQuery并计算屏幕高度并减去标题高度以及所有边距和填充。但正如我今天所了解的那样，这不是一个好习惯。

所以，把它包起来：我需要DIV来填充屏幕的头部和底部之间的空间，以便观看高度小于768px的景观。这个DIV的最大高度是420px。使用jQuery它非常容易，但我无法弄清楚干净的css方式。

也许有些人有想法？这是我的fiddle，所以你们不必输入所有的代码。

提前谢谢！

Answer 1

您可以使用calc()和vh（视口高度）。

calc()浏览器支持：http://caniuse.com/#search=calc

vh浏览器支持：http://caniuse.com/#search=vh

因此，我们使用calc(100vh - 200px) 100vh视口的高度和200px标题的高度。

此外，我们添加了一个媒体查询，以便当屏幕大于768px高度时，我们将高度限制为420px。

试试这个：

＆＃13;

header { height: 100px; background: #ccc; margin-bottom: 100px;  box-sizing: border-box; }

section { width: 100%; height: calc(100vh - 200px); padding: 50px 0; background: yellow; box-sizing: border-box; }

.col1, .col2, .col3 { float: left; width: 33%; }

.colPadding { padding: 25px; background: blue; }

.cb { width: 100%; height: 1px; clear: both; }

body {
  margin: 0;
}

@media screen and (min-height: 768px) {
  section {
    max-height: 420px;
  }
}

＆＃13;

<header>
    This is my header with 100px bottom margin
</header>
<section>
    <div class="col1">
        <div class="colPadding">
            section with padding: 50px 0; and max-height: 420px;
        </div>
    </div>
    <div class="col2">
        <div class="colPadding">
            Column 2
        </div>
    </div>
    <div class="col3">
        <div class="colPadding">
            Column 3
        </div>
    </div>
    <div class="cb"></div>
</section>

＆＃13;

Answer 2

使用CSS3 flex-box模型和屏幕媒体查询。这是setOffscreenPageLimit。

我使用300px而不是764px作为小提琴。（如果你愿意，你可以改变它，我只使用300px以便它更容易测试）

应用CSS

{{1}}

有关CSS3 flex-box my fiddle的更多信息。

容器高度不超过屏幕标题

2 个答案: