Html boostrap粘性页脚和两个响应列
我的页脚有问题 在侧面我有两列。这些列设置为“自动上边距” 例如，此处： 如果您更改分辨率，使列落在她的脚下，则会与图片重叠，而不是一直位于页面底部 例如： 正常视图：Html boostrap粘性页脚和两个响应列,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我的页脚有问题 在侧面我有两列。这些列设置为“自动上边距” 例如，此处： 如果您更改分辨率，使列落在她的脚下，则会与图片重叠，而不是一直位于页面底部 例如： 正常视图： $.backstretch（“img/bg.jpg”）； h1{ 文本对齐：居中； 字体系列：“先锋派”； 字体大小：70px； } 标题p{ 字体系列：“先锋派”； 文本对齐：居中； 字体大小：20px； } @字体{ 字体系列：“先锋派”； src:url（'font/font2.ttf'）； } 以上校为中心{ 文本对
$.backstretch（“img/bg.jpg”）；
h1{
文本对齐：居中；
字体系列：“先锋派”；
字体大小：70px；
}
标题p{
字体系列：“先锋派”；
文本对齐：居中；
字体大小：20px；
}
@字体{
字体系列：“先锋派”；
src:url（'font/font2.ttf'）；
}
以上校为中心{
文本对齐：居中；
保证金：0自动；
}
.页脚{
位置：绝对位置；
底部：0；
宽度：100%；
/*在此处设置页脚的固定高度*/
高度：60px；
文本对齐：居中；
字体系列：“先锋派”；
}
吴先生{
颜色：#3a8c03；
字体系列：“先锋派”；
字体大小：40px；
边际上限：0；
}
html{
身高：100%；
宽度：100%；
最小宽度：100%；
最小高度：100%；
位置：相对位置；
}
身体{
身高：100%；
宽度：100%；
填充：0；
保证金：0；
边缘底部：60px；
}
.容器液体{
身高：60%；
显示：表格；
宽度：100%；
填充：0；
}
.row流体{高度：100%；显示：表格单元格；垂直对齐：中间；}
.定心{
浮动：无；
保证金：0自动；
}
标题{
利润底部：2%；
}
F.P.H.U达蒙
KOMINKI-OCZYSZCZALNIE-DORADZTWO-SERWIS
oczyszczalnie
科明基
你的产品是什么
电话：924 456 256电邮：aaa@sga.com
您的JSFIDLE引用指向的问题与上面提到的不同。是的，JSFIDLE仅指向两个图像始终具有自动边距，不影响页脚如果您希望页脚始终位于页面底部（而不是屏幕），请执行以下操作：1。从.footer规则中删除
位置：绝对..<!DOCTYPE html>
<html>
<head lang="pl">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.backstretch.js"></script>
</head>
<body>
<script>
$.backstretch("img/bg.jpg");
</script>
<style>
h1 {
text-align: center;
font-family: "AvanteGarde";
font-size: 70px;
}
header p{
font-family: "AvanteGarde";
text-align: center;
font-size: 20px;
}
@font-face{
font-family:"AvanteGarde";
src: url('font/font2.ttf');
}
.col-centered{
text-align: center;
margin: 0 auto;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
text-align: center;
font-family:"AvanteGarde";
}
.ng{
color: #3a8c03;
font-family: "AvanteGarde";
font-size: 40px;
margin-top: 0;
}
html {
height: 100%;
width: 100%;
min-width: 100%;
min-height: 100%;
position: relative;
}
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
margin-bottom: 60px;
}
.container-fluid{
height:60%;
display:table;
width: 100%;
padding: 0;
}
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
.centering {
float:none;
margin:0 auto;
}
header{
margin-bottom: 2%;
}
</style>
<header>
<h1><label style="color: #3a8c03"> F.P.H.U </label> <label style="color: #254c0b"> Darmont</label></h1>
<p style="color: #3a8c03">KOMINKI - OCZYSZCZALNIE - DORADZTWO - SERWIS</p>
</header>
<div class="container-fluid" style="width: 900px; margin: auto;">
<div class="row-fluid">
<div class="col-sm-6 col-centered">
<img src="img/oczyszczalnie.png" class="img-responsive center-block">
<p class="ng">oczyszczalnie</p>
</div>
<div class="col-sm-6 col-centered" style="padding-left: 120px">
<img src="img/kominki.png" class="img-responsive center-block">
<p class="ng">kominki</p>
</div>
</div>
</div>
<footer class="footer">
<p>Skontaktuj sie z nami i zapytaj o produkty</p>
<p>nr. tel: 924 456 256 e-mail: aaa@sga.com</p>
</footer>
</body>
</html>