Question

以下是我主题的现状：

Fiddle。我不想要一个fixed页脚，我不想要一个带有position absolute的粘性页脚，我只想用页脚颜色填充这个可怕部分，我认为display:table-row会做的伎俩，但不知道如何使用它。有人可以帮帮我吗？

Answer 1

以下是CSS <?php $link = mysql_connect("******","******","******"); $db= mysql_select_db("******") or die("Cannot select Database."); $response = array(); mysql_query("SET NAMES 'utf8'"); mysql_query("CHARACTER SET utf8 COLLATE utf8_general_ci"); $sql1 = "select p.Name, p.Brand, p.ImageUrl , p.Price, t.Type from Product p inner join Type t on p.Type_ID = t.ID order by StockDate desc "; $result1 = mysql_query($sql1) or die(mysql_error()); if (mysql_num_rows($result1) > 0){ // looping through all results // products node $response["product"] = array(); while (($row = mysql_fetch_array($result1))) { // temp user array $product = array(); $product["Name"] = $row["Name"]; $product["Type"] = $row["Type"]; $product["Price"] = $row["Price"]; $product["Brand"] = $row["Brand"]; $product["ImageUrl"] = $row["ImageUrl"]; $product["StockDate"] = $row["StockDate"]; // push single job into final response array array_push($response["product"], $product); } // success $response["success"] = 1; // echoing JSON response die(json_encode($response)); } else { // no products found $response["success"] = 0; $response["message"] = "No Products found"; // echo no users JSON die(json_encode($response)); + table的简单结构。

table-row

html, body {
    height: 100%;
}
body {
    display: table;
    width: 100%;
    margin: 0;
}
header, main, footer {
    display: table-row;
}
header {background: pink;}
footer {background: lightgreen;}

如果您希望<header>header</header> <main>main</main> <footer>footer</footer>获得最大高度，请将height:100%设置为其中一个。

html, body {
    height: 100%;
}
body {
    display: table;
    width: 100%;
    margin: 0;
}
header, main, footer {
    display: table-row;
}
main {
    height: 100%;
}
header {background: pink;}
footer {background: lightgreen;}

<header>header</header>
<main>main</main>
<footer>footer</footer>

Answer 2

以下是您要找的内容：

.footer{
    background-color:#000;
    color:#fff;
    position:absolute;
    bottom:0px;
    min-width:100%;
}

JSFiddle

Answer 3

我能想到的最简单的解决方案是创建一个内容容器并给它一个背景颜色，然后将body颜色设置为与页脚相同：

body {
    background:#0F0;
}
#header {
    background:#F00;
}
#container {
    background:#FFF;
}
#footer {
    background:#0F0;
}

Fiddle

Answer 4

只需添加

  position:absolute;
  bottom:0px;

到.footer

和

position: relative;
  padding-bottom: (n)px;

到身体

将（n）更改为页脚的高度

body {
  position: relative;
 margin:0;
  padding-bottom: 100px;

  font-family: "Helvetica Neue", Arial, sans-serif;
}

.footer{

  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height:100px;
width:100%;
  background-color: #efefef;
  text-align: center;

}

<html><body><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>


<div class="footer">text</div>
</body></html>

如何在Bootstrap 3中制作粘性页脚？

4 个答案: