调整 div 大小以适应纵向模式答案

【问题标题】：Resize div to fit portrait mode调整 div 大小以适应纵向模式
【发布时间】：2015-07-06 23:25:42
【问题描述】：

您好，我的网站有问题。我正在编写响应式布局，但纵向模式有问题。我的网站在这里 - www.szafortest.pl

您可以在 webbrowser 中查看 css 和 html 代码。如果你愿意，我可以把代码放在这里。我的问题是我有很大的白边。请参考下图。

我想做的是调整“textContent”类的大小。我尝试使用视口，但总能找到显示该网站的设备。

你知道有什么好的解决办法吗？

【问题讨论】：

你看过flexbox吗？

标签： html css layout responsive-design

【解决方案1】：

正如 James Newton 在 cmets 中建议的那样，您可以使用 flexbox 来解决这个问题。我有一个库，它允许我使用 flexbox 将元素放置在行和列中。它们被命名为flex-row 和flex-column。这些名字应该不言自明。还有一个更重要的类叫做autoflex。它允许我均匀地填充 div 或大小 div 的剩余空间。这是您可以尝试的解决方案：
HTML：

<body class="flex-column">
    <div class="yourContent"></div>
    <div class="autoflex"></div> <!--This will fill all whitespace -->
</body>

CSS：

.flex-column {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;  
}

.flex-row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;  
}

.autoflex {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
}

编辑
这些类仅支持标准和 webkit 浏览器。为了使其与其他浏览器更兼容，您应该将-moz-flex 添加到属性中。

【讨论】：