html页脚图片大小,html - 当您有不同的高度页面时，如何使页脚位于所有屏幕尺寸的底部？ - 堆栈内存溢出...

我正在尝试使页脚变粘，但是由于某些原因，它正在播放。 当我在其中一个页脚上放置页脚时，会导致其他页面的内容高度不同。 如何为所有页面制作全局样式，以便在页面底部添加页脚，并在不需要滚动条的情况下将其删除，因为某些页面需要滚动才能到达页脚即将有身高。

当我使用一个名为screen-fly的网站来测试我的站点以启用所有屏幕尺寸的测试时，我需要一个可以保证在任何屏幕尺寸上都能做出响应设计的解决方案。

我的代码可以在plunker上找到，但是我进行了大量研究，并尝试了一些样式解决方案。 这是两个

解决方案1：-

/* **************************************************/

/* One solution */

html, body {

height:100%;

min-height:100%;

}

/* navigation style*/

.navbar-brand {

margin: 0 auto;

color:white;

}

.navbar-inverse {

background: rgb(14, 78, 114);

}

.navbar-inverse .navbar-nav>li>a {

color: #8EE8CD;

}

/* Content style*/

.container.content {

margin-top: 100px;

}

/* footer style*/

.wrapper {

position:relative;

min-height:100%;

}

footer {

text-align: center;

position:absolute;

bottom:0px;

width:100%;

color: white;

background-color: rgb(14, 78, 114);

}

溶剂蛋白2：-

/* Another solution */

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;

padding-bottom: 150px;} /* must be same height as the footer */

#footer {position: relative;

margin-top: -150px; /* negative value of footer height */

height: 150px;

clear:both;}

/*Opera Fix*/

body:before {

content:"";

height:100%;

float:left;

width:0;

margin-top:-32767px;

}

这是一些代码形式。

plunker编辑器： Plunker编辑器

全屏柱塞： 全屏柱塞