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

Question

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

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

我该怎么做才能解决这个问题？如果你在你的答案中添加工作的JSFiddle，那将是非常好的。

提前谢谢。

JSFiddle，下面的代码段：

＆＃13;

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

<强> Fiddle demo