带有粘性页脚和动态内容的侧边栏

Question

我从另一个 stackoverflow-question 得到了这个布局（jsfiddle 链接在最后），它可以工作（页脚粘在底部并在内容变大时向下移动）： working sidebar

但是有一个大问题： 我的侧边栏不会有固定大小，并且大部分会高于整个页面。但是，如果我将内容添加到侧边栏，小提琴就不再起作用了： buggy sidebar

我能做些什么来解决这个问题？如果您将有效的 JSFiddle 添加到您的答案中，那就太好了。

提前谢谢你。

JSFiddle，片段如下：

html, body {
	margin: 0px;
	padding: 0px;
	min-height: 100%;
	height: 100%;
}
#wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
	position: relative
}
#footer {
	height: 50px;
}
#footer-content {
	border: 1px solid magenta;
	height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
	padding: 8px;
}
.push {
	height: 50px;
	clear: both;
}

#header {
	height: 50px;
}
#header-content {
	border: 1px solid magenta;
	height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
	padding: 8px;
}
#content {
	height: 100%;
}
#sidebar {
	border: 1px solid skyblue;
	width: 100px;
	position: absolute;
	left: 0;
	top: 50px;
	bottom: 50px;
}
#main {
	margin-left: 102px
}

<div id="wrapper">
	<div id="header"><div id="header-content">Header</div></div>
	<div id="content">
		<div id="sidebar">Sidebar<br/>Sidebar<br/>Sidebar<br/>
		</div>
		<div id="main">
			Main<br />
			Main<br />
		</div>
	</div>
	<div class="push"></div>
</div>
<div id="footer"><div id="footer-content">Footer</div></div>

Answer 1

我认为这段代码可以解决您的问题。我的代码基于table display 和100vh height 与calc 小于页眉和页脚高度。

现在您有了一个动态侧边栏：

html, body {
margin: 0px;
padding: 0px;
min-height: 100%;
height: 100%;
}

#wrapper {
height: auto !important;
}

#footer {
z-index: 1;
height: 50px;
}

#footer-content {
background: magenta;
height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
padding: 8px;
}

#header {
height: 48px;
}

#header-content {
background: magenta;
height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
padding: 8px;
}

#content {
display: table;
width: 100%;
min-height: calc(100vh - 98px);
}

#sidebar {
z-index: -1;
display: table-cell;
background: skyblue;
width: 100px;
}

#main {
display: table-cell;
}

<div id="wrapper">
<div id="header"><div id="header-content">Header</div></div>
<div id="content">
    <div id="sidebar">
      Sidebar<br/>
      Sidebar<br/>
      Sidebar<br/>
      Sidebar<br/>
      Sidebar<br/>
      Sidebar<br/>
      Sidebar<br/>
      Sidebar<br/>
      Sidebar<br/>
      Sidebar<br/>
      Sidebar<br/>
      Sidebar<br/>
      Sidebar<br/>
      Sidebar<br/>
      Sidebar<br/>
      Sidebar<br/>
      Sidebar<br/>
      Sidebar<br/>
      Sidebar<br/>
      Sidebar<br/>
      Sidebar<br/>
      Sidebar<br/>
      Sidebar<br/>
      Sidebar<br/>
    </div>
    <div id="main">
        Main<br />
        Main<br />
    </div>
</div>
</div>
<div id="footer"><div id="footer-content">Footer</div></div>

Fiddle demo