Question

我想使用flexbox使用全高应用。我在此链接中使用旧的flexbox（显示：框;以及其他内容）找到了我想要的内容：CSS3 Flexbox full-height app and overflow

这是旧版flexbox css属性的正确解决方案。

如果我想尝试使用较新的flexbox属性，我会尝试在同一个链接中使用第二个解决方案，但是＆＃34; hacking＆＃34; flexbox 使用高度为0px的容器; 它显示垂直滚动。

我不太喜欢它，因为它引入了其他问题而且它更像是一个解决方案而非解决方案。

我准备了一个基本示例的jsfiddle：http://jsfiddle.net/ch7n6/

#container {
    display: -webkit-flex;
    -webkit-flex-direction: column;
    height: 100%;
}
#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: scroll;
}

这是一个＆＃34;全高html网络＆＃34;由于内容元素的弹性框，页脚位于底部。我建议你在css代码和结果之间移动吧来模拟不同的高度。

Answer 1

感谢https://stackoverflow.com/users/1652962/cimmanon给了我答案。

解决方案是为垂直可滚动元素设置高度。例如：

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    height: 0px;
}

元素将具有高度，因为flexbox会重新计算它，除非您需要 min-height ，这样您就可以使用 height：100px; 它与 min-height：100px;

完全相同

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    height: 100px; /* == min-height: 100px*/
}

如果你想在垂直滚动中找到 min-height ，那么这是最好的解决方案：

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 100px;
}

如果你只想要完整的垂直滚动，以防没有足够的空间来看文章：

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}

最终代码：http://jsfiddle.net/ch7n6/867/

Answer 2

Flexbox规范编辑器。

鼓励使用flexbox，但有一些事情你应该调整以获得最佳行为。

不要使用前缀。大多数浏览器都支持未加固定的flexbox。始终以无前缀开头，只在必要时添加前缀以支持它。
由于您的页眉和页脚不适合弯曲，因此它们都应设置flex:0 1 auto。由于一些重叠的效果，你现在有类似的行为，但你不应该依赖它，除非你想在以后偶然混淆自己。（默认为overflow:visible，因此它们从自动高度开始并且可以缩小但不会增长，但默认情况下它们也是min-height:auto，这会触发默认overflow以防止它们如果你在min-height:auto上设置<article>，<article>的行为会发生变化（切换到零而不是最小内容），他们会突然被额外的高flex元素。）
您也可以简化flex: 1; <p><a ng-click="getPdf()">Show PDF</a></p> - 只需设置angular.module('message', ['auth']).controller('message', function($scope, $http, $sce, auth) { $scope.authenticated = function() { return auth.authenticated; } $scope.getPdf = function(){ $http.get('/api/some-pdfr', {responseType: 'arraybuffer'}) .success(function (data) { var file = new Blob([data], {type: 'application/pdf'}); var fileURL = URL.createObjectURL(file); window.open(fileURL); }); } });，您就可以了。尽量使用https://drafts.csswg.org/css-flexbox/#flex-common中的常用值，除非你有充分的理由去做更复杂的事情 - 它们更容易阅读并涵盖了你想要调用的大多数行为。

Answer 3

目前的规范是关于flex: 1 1 auto：

的

根据width / height属性调整项目大小，但会生成它们完全灵活，因此它们可以吸收主要部分的任何自由空间轴。如果所有项目都是flex: auto，flex: initial或flex: none，那么项目大小后的任何正空闲空间都将是使用flex: auto均匀分配到项目。

http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex-common

听起来好像你说一个元素是100px高，它被视为更像“建议”的大小，而不是绝对的。因为它允许缩小和增长，所以它占用的空间比允许的多。这就是为什么将此行添加到“main”元素的工作原理：height: 0（或任何其他小数字）。

使用NEWER flexbox api在全高应用程序中进行Flexbox和垂直滚动

3 个答案: