Question

我正在尝试创建一个flexbox，它有一个标题，然后是一个左窗格（可滚动）和右窗格（可滚动）。他们需要能够彼此分开滚动。最重要的是，父框架必须占据宽度和高度的100％。

以下是我想要实现的目标

我还有一个我到目前为止尝试过的片段。

http://codepen.io/anon/pen/KdJgBN?editors=110

我可以捏造它并且不使用flexbox但是当我如此接近时（单独的可滚动区域和粘性标题当前不起作用）似乎是浪费而不使用它。

body {
    font: caption;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/**
 * The main flex container
 */
div.flex-main-container {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;

    display: flex;
    flex-direction: column;
}

/**
 * The fixed header
 */
div.flex-header {
    background-color: #FF0000;
}

/**
 * The container under header to hold the 2 rows
 */
div.flex-content {
    background-color: #E0E0E0;
    display: flex;
    flex-direction: row;
}

/**
 * Left flex container
 */
div.flex-files {
    flex: 3;
    overflow-y: auto;
    background-color: #00DD00;
}

/**
 * Right flex container
 */
div.flex-insert {
    flex: 7;
    background-color: #00FFDD;
}

<body>
	<div class="flex-main-container">
		<div class="flex-header">
			Header content here<br/>
			Header content here<br/>
			Header content here<br/>
			Header content here<br/>
		</div>
		<div class="flex-content">
			<div class="flex-files">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed lacus felis. Suspendisse euismod neque eu est consequat facilisis. Fusce efficitur est sem, nec posuere neque iaculis quis. Curabitur euismod massa sit amet mauris porttitor, vel vulputate ipsum vehicula. Nulla ut erat ut leo mollis mattis at sit amet urna. Nam condimentum a lectus in lacinia. Suspendisse at diam non felis lobortis placerat. Donec faucibus non arcu vel fringilla. Mauris nec porta dolor, at hendrerit justo. Phasellus ut est maximus nulla efficitur malesuada consequat eu felis. Etiam et ipsum in tellus vestibulum ornare feugiat in augue. Vestibulum luctus erat a nulla sollicitudin auctor. Integer erat leo, semper in tempor ac, elementum ac sapien.</p>

	            <p>Nunc dignissim tristique nisi eu consequat. Curabitur ornare ornare nunc a condimentum. Mauris tempus nisl sit amet nunc feugiat, sit amet ullamcorper tortor faucibus. Curabitur nisl leo, porta luctus leo sit amet, lobortis sodales lectus. Quisque fringilla at nunc quis sodales. Phasellus eget dapibus velit, nec aliquam sem. Nam a nisl ex. Morbi quis faucibus nisi. Curabitur fermentum porttitor orci eget venenatis. Phasellus ac dui eros. Maecenas sodales, justo non dignissim pharetra, libero sapien scelerisque magna, ultrices viverra sem libero nec nisl. Curabitur a nisi porttitor, eleifend mi imperdiet, vehicula quam. Donec porta nibh nec semper tempor.</p>

	            <p>Nam elementum sem non turpis dictum, ut placerat nunc posuere. Duis sed nisl at leo tempor hendrerit vitae et enim. Quisque vel urna sed quam convallis rhoncus vitae nec nibh. Ut a nibh id eros interdum consequat. Nulla efficitur at libero nec ultrices. Ut ut lectus sit amet arcu molestie viverra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis elit sodales ultricies sodales. Ut tempus auctor est in bibendum. Proin enim ipsum, venenatis vel blandit et, dictum in massa. Donec augue purus, egestas sed enim et, pretium gravida diam. Morbi tincidunt cursus augue id condimentum. Mauris congue libero turpis, quis laoreet augue gravida nec.</p>

	            <p>Nullam fermentum laoreet ipsum sit amet egestas. Maecenas non diam eget nisi faucibus sollicitudin. Sed semper ipsum sit amet arcu pulvinar, eget rhoncus nunc egestas. Proin aliquet faucibus purus, in aliquam urna posuere at. Duis fringilla at magna ac condimentum. Fusce eu nibh orci. Praesent dictum facilisis eros, non tincidunt sem ullamcorper in.</p>

	            <!-- <p>Vestibulum at volutpat nibh. Nam semper at tortor ut tempus. Nunc bibendum urna sit amet quam suscipit tempus. Curabitur facilisis sagittis efficitur. Etiam ultrices nulla vel leo dictum posuere. Ut sed erat sed velit vehicula porta. Proin sagittis pulvinar lacus et sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean congue lobortis erat nec malesuada.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed lacus felis. Suspendisse euismod neque eu est consequat facilisis. Fusce efficitur est sem, nec posuere neque iaculis quis. Curabitur euismod massa sit amet mauris porttitor, vel vulputate ipsum vehicula. Nulla ut erat ut leo mollis mattis at sit amet urna. Nam condimentum a lectus in lacinia. Suspendisse at diam non felis lobortis placerat. Donec faucibus non arcu vel fringilla. Mauris nec porta dolor, at hendrerit justo. Phasellus ut est maximus nulla efficitur malesuada consequat eu felis. Etiam et ipsum in tellus vestibulum ornare feugiat in augue. Vestibulum luctus erat a nulla sollicitudin auctor. Integer erat leo, semper in tempor ac, elementum ac sapien.</p>

	            <p>Nunc dignissim tristique nisi eu consequat. Curabitur ornare ornare nunc a condimentum. Mauris tempus nisl sit amet nunc feugiat, sit amet ullamcorper tortor faucibus. Curabitur nisl leo, porta luctus leo sit amet, lobortis sodales lectus. Quisque fringilla at nunc quis sodales. Phasellus eget dapibus velit, nec aliquam sem. Nam a nisl ex. Morbi quis faucibus nisi. Curabitur fermentum porttitor orci eget venenatis. Phasellus ac dui eros. Maecenas sodales, justo non dignissim pharetra, libero sapien scelerisque magna, ultrices viverra sem libero nec nisl. Curabitur a nisi porttitor, eleifend mi imperdiet, vehicula quam. Donec porta nibh nec semper tempor.</p> -->
			</div>
			<div class="flex-insert">
				Insert data
			</div>
		</div>
	</div>
</body>
</html>

Answer 1

HTML

<body>
    <div class="flex-header">
        Header content here
        <br/> Header content here
        <br/> Header content here
        <br/> Header content here
        <br/>
    </div>
    <div class="flex-main-container">
        <div class="flex-content">
            <div class="flex-files">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
            </div>
            <div class="flex-insert">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
            </div>
        </div>
    </div>
</body>

注意：

已从Flex容器中删除固定标头。这使我们能够使用CSS将Flex容器定位在标题下方。
由于从normal flow取出position: fixed的元素，而does not participate in flex layout没有理由将它存在于Flex容器中，删除它会对整体有帮助布局。
标题如果保存在flex容器中，仍然可以参与reordering（即使用flex order属性），但作为一个固定元素，假设是这使得它不太可能被重新定位。

<强> CSS

html {
  height: 100%; /* full height of viewport */
}

body {
  height: calc(100% - 80px); /* prevent vertical scrollbar on browser; see below */
  font: caption;
  margin: 0;
  padding: 0;
}

div.flex-header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px; /* height for header; adjustable; can be fixed or relative units */
  background-color: #FF0000;
}

div.flex-main-container {
  /* position: absolute;  <-- Removed. Not necessary. */
  margin-top: 80px; /* compensate for header height */
  display: flex;
  flex-direction: column;
  height: 100%;
}

div.flex-content {
  background-color: #E0E0E0;
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0; /* addresses FF vertical scroll bug */
  min-width: 0; /* addresses FF vertical scroll bug */
}

div.flex-files {
  flex: 3;
  overflow-y: auto;
  background-color: #00DD00;
}

div.flex-insert {
  overflow-y: auto;
  flex: 7;
  background-color: #00FFDD;
}

注意：

您写道：

最重要的是，父框架必须占据宽度和高度的100％。

可以使用html, body { height: 100%; }完成此操作。您不需要position: absolute。
固定标题被赋予一个定义的高度，这使得flex容器可以使用margin-top缓冲区将自己定位在标题下方。
如果您不想为标题定义高度，请参阅此处：Placing a scrollable div below a fixed div of variable height
添加到min-height: 0的{{1}}和min-width: 0是解决Firefox中垂直滚动错误所必需的。详情请参阅：Vertical scroll rendering issue in Flexbox in Firefox

上面调整的代码呈现了一个带有两个可滚动区域的固定标头：

在Chrome，Firefox和IE11上测试过。

Modified Codepen Demo

CSS Flexbox具有多个可滚动区域

1 个答案: