HTML5灵活的盒子模型高度计算
HTML5灵活的盒子模型高度计算
经过一整天的研究,我必须说我真的很喜欢弹性盒模型。它以一种快速而干净的方式实现了我在JavaScript中实现的功能。然而,有一件事困扰着我:\n我无法通过弹性盒模型将div扩展到由其计算出的完整大小!!!\n为了说明这一点,我将提供一个示例。其中,两个弹性区域采用了完全相同的宽度和高度,但其中的div只采用了\"...\"
元素的高度。对于这个例子来说,这并不重要,但我最初尝试的是将一个\"弹性盒模型\"放置在另一个\"弹性盒模型\"中,我认为这是可能的。\n
html,body { font-family: Helvetica, Arial, sans-serif; width: 100%; height: 100%; margin: 0px; padding: 0px; } #box-1 { background-color: #E8B15B; } #box-2 { background-color: #C1D652; } #main { width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; } .flexbox { display:-moz-box; display:-webkit-box; display: box; text-align: left; overflow: auto; } H1 { width: auto; } #box-1 { height: auto; -moz-box-orient: vertical; -webkit-box-orient: vertical; box-orient: vertical; -moz-box-flex: 3; -webkit-box-flex: 3; box-flex: 3; } #box-2 { height: auto; min-width: 50px; -moz-box-orient: vertical; -webkit-box-orient: vertical; box-orient: vertical; -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; } #fullsize{ background-color: red; height: 100%; }
\n
你好,世界