了解自舉容器流體的工作原理，以及如何使容器內的部分填充整個寬度

Question

我正在研究引導程序，我想擁有一個包含頁眉，頁腳和三個中間列的網站。 到目前為止，我已經有了頁眉和列，但是我還沒有完全理解如何制作頁腳，而且我很確定自己做錯了方法，但是我希望得到一些幫助。 我嘗試將其放在div中並將寬度更改為100 vw，但我只是不完全了解它。 頁眉基本上只是頂部的容器流體部分，我為頁腳做了一個div，但是邊緣仍然是容器的顏色，所以我想我的問題是：容器和容器流體的確切用途是什么？我如何使頁腳div占用整個空間？ 謝謝，代碼是：

  .div1 { background-color:red; } .div2 { background-color:gray; } .div3 { background-color:blue; } .row { height: calc(100vh - 200px); } #main { background-color: lime; } #main_head { height: 200px; color: red; margin: 0; } #main_foot { height: 200px; background-color: pink; margin: 0; color: red; }

  <!DOCTYPE html> <html> <html lang="en"> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> </head> <body> <link rel="stylesheet" href="test.css"> <script src="test.js"></script> <div class="container-fluid" id="main"> <h1 id="main_head">This is a heading</h1> <div class="row"> <div class="col-sm-2 div1"> </div> <div class="col-sm-8 div2"> </div> <div class="col-sm-2 div3"> </div> </div> <div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div> </div> </body> </html>

Answer 1

container-fluid占據屏幕的整個寬度，而container對於每種分辨率都有固定的大小。

 .div1 { background-color:red; } .div2 { background-color:gray; } .div3 { background-color:blue; } .row { height: calc(100vh - 200px); } #main { background-color: lime; } #main_head { height: 200px; color: red; margin: 0; } #main_foot { height: 200px; background-color: pink; margin: 0; color: red; position: absolute; left: 0; right: 0; }

 <!DOCTYPE html> <html> <html lang="en"> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> </head> <body> <link rel="stylesheet" href="test.css"> <script src="test.js"></script> <div class="container-fluid" id="main"> <h1 id="main_head">This is a heading</h1> <div class="row"> <div class="col-sm-2 div1"> </div> <div class="col-sm-8 div2"> </div> <div class="col-sm-2 div3"> </div> </div> <div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div> </div> </body> </html>

了解自舉容器流體的工作原理，以及如何使容器內的部分填充整個寬度

問題描述

1 個解決方案

解決方案1
0 已采納 2017-11-12 01:00:42

了解自舉容器流體的工作原理，以及如何使容器內的部分填充整個寬度

問題描述

1 個解決方案

解決方案1 0 已采納 2017-11-12 01:00:42

解決方案1
0 已采納 2017-11-12 01:00:42