Question

我有一个布局，有时边栏可能比页面正文高很多。当它超出屏幕高度时，侧边栏会继续垂直扩展。

我的代码看起来有点像：

<div class="fb-col">
    <!-- Headers, etc. -->
    <div class="fb-row">
        <div class="sidebar">
            <!-- Lots of content -->
        </div>
        <div class="main">
            <!-- Less content -->
        </div>
     </div>
     <!-- Footers -->
</div>

使用以下CSS：

.fb-col {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.fb-row {
    flex-grow: 1;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
.sidebar {
    width: 25%;
    flex-grow: 0;
}
.main {
    flex-grow: 1;
}

这会导致两个元素不垂直生长（因此主要元素不会变得太高），但是当内容太短时，我无法通过侧边栏将其高度限制为文档高度

Answer 1

如果我理解你的目标，我不相信flexbox（或任何CSS）可以解决这个问题 - 不使用绝对尺寸; flexbox可用于使较小的元素更大，但反之亦然。

flex-gorw和flex-shrink根据主轴调整项目的大小 - 对于flex-direction: row，它的水平

我能想到的唯一解决方案是使用一些JS / jQuery：

＆＃13;

$(document).ready(function() {
	$(".sidebar").height($(".main").height());
});

＆＃13;

.fb-col {
	display: flex;
	flex-direction: column;
}

.fb-row {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

.sidebar {
	min-width: 25%;
	width: 25%;
	overflow: auto;
}

.main {
}





/* For illustrative purposes */
.fb-row {
	background-color: #FDD;
}

.sidebar {
	background-color: #DFD;
}

.main {
	background-color: #DDF;
}

＆＃13;

<div class="fb-col">
	<header><h1>Header</h1></header>
	<div class="fb-row">
		<div class="sidebar">
			<h2>Sidebar</h2>
			<nav>
				<ul>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
				</ul>
        <ul>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
				</ul>
        <ul>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
				</ul>
			</nav>
		</div>
		<div class="main">
			<h2>Content</h2>
			<p>Bacon ipsum dolor amet strip steak pork chop porchetta spare ribs ribeye biltong salami tongue. Sirloin ham ball tip, tongue filet mignon cow kielbasa hamburger doner chicken. Pancetta bresaola chuck corned beef hamburger, tenderloin leberkas swine buffalo beef ribs. Filet mignon ball tip t-bone ground round beef ribs. Biltong burgdoggen venison tail hamburger spare ribs buffalo flank meatball tri-tip leberkas.</p>
			<p>Ribeye porchetta kevin, pork sausage strip steak ham chicken pork chop buffalo ground round t-bone cupim pork belly. Fatback flank prosciutto kevin pork chop, pork loin pig. T-bone landjaeger ball tip fatback, shank ribeye picanha pork ground round filet mignon meatball tri-tip jowl. Shoulder meatloaf pork loin meatball ball tip, hamburger kielbasa. Andouille strip steak alcatra ham hock chuck. Cupim chicken buffalo, picanha biltong landjaeger t-bone. Jowl sirloin meatloaf short ribs tongue ground round bacon chuck fatback meatball hamburger picanha turkey kevin pork.</p>
		</div>
	</div>
	<footer><h2>Footer</h2><small>legal and stuff</small></footer>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

如果我了解您的问题，您可以尝试这种方式：

.fb-col {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.fb-row {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    min-height: 100%;
}
.sidebar {
    width: 25%;
    flex-grow: 0;
    min-height: 100%;
}
.main {
    flex-grow: 1;
    min-height: 100%;
}

这样.sidebar和.main将始终具有相同的高度，最小高度为100％。

如果不起作用，请尝试添加此规则：

html, body {
  height: 100%;
  margin: 0;
}

Flexbox将侧边栏缩小到内容高度

2 个答案: