如何让CSS Flex动态填充可用高度而不指定height
或position
(静态)属性?CSS Flex动态填充可用高度(无高度或位置)
在下面的XHTML代码中,我需要浅蓝色框填充空白到浅红色元素。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Flex Vertical Fill Test</title>
<style type="text/css">
#e1, #e2 {float: left; width: 50%;}
#e1 {background-color: #cff;}
#e2 {background-color: #ffc;}
#e3 {background-color: #fcf; clear: both;}
</style>
</head>
<body>
<div id="e1">
<div><p>Needs to use full available height.</p></div>
</div>
<div id="e2">
<p>Automatically generates height from content.</p>
<p>Automatically generates height from content.</p>
<p>Automatically generates height from content.</p>
<p>Automatically generates height from content.</p>
</div>
<div id="e3"><p>Natural content below</p></div>
</body>
</html>
我在Firefox 第一,那么Chrome和IE测试这一点。
如果可以调整标记,您可以创建jsfiddle示例 – 2015-03-31 17:43:01
吗? – Stickers 2015-03-31 17:54:20
@sdcr高度主观,#e1实际上包含多个子div元素(不同的自动生成高度),但除此之外的任何东西都会太复杂以至于可能适用。我试图保持简单。 – John 2015-03-31 17:56:04