Question

这是我没有身体的布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Shop | E-Shopper</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet">
    <link href="~/Content/font-awesome.min.css" rel="stylesheet">
    <link href="~/Content/prettyPhoto.css" rel="stylesheet">
    <link href="~/Content/price-range.css" rel="stylesheet">
    <link href="~/Content/animate.css" rel="stylesheet">
    <link href="~/Content/main.css" rel="stylesheet">
    <link href="~/Content/responsive.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="~/Content/images/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="~/Content/images/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="~/Content/images/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="~/Content/images/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="~/Content/images/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
    <header id="header">
        <!--header-->
        <div class="header-middle">
            <!--header-middle-->
            <div class="container">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="logo pull-left">
                            <a href="@Url.Action("Index", "Home")">
                                <img src="~/Content/images/home/logo.png" alt="" />
                            </a>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <div class="shop-menu pull-right">
                            <ul class="nav navbar-nav">
                                @if (Session["Name"] != null)
                                {
                                    <li style="margin-top:10px">
                                        <p>
                                            Welcome
                                            @Session["UserName"].ToString()
                                        </p>
                                    </li>
                                    <li><a href="@Url.Action("EditProfile", "Home",new {id=Session["UserID"] })"><i class="fa fa-user"></i> Account</a></li>
                                    <li>
                                        <a href="@Url.Action("Logout", "Account")">
                                            Logout
                                        </a>
                                    </li>
                                }
                                else
                                {
                                    <li>
                                        <a href="@Url.Action("Login", "Account")">
                                            Login
                                        </a>
                                    </li>
                                }
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--/header-middle-->
        <div class="header-bottom">
            <!--header-bottom-->
            <div class="container">
                <div class="row">
                    <div class="col-sm-9">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>
                        <div class="mainmenu pull-left">
                            <ul class="nav navbar-nav collapse navbar-collapse">
                                <li>
                                    <a href="@Url.Action("ListOfProductCategory", "ProductCategory")" class="elements">
                                        <span>Manage Product categories</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="@Url.Action("ListOfProducts", "Product")" class="elements">
                                        <span>Manage Products</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="@Url.Action("ShowUsers", "Home")" class="elements">
                                        <span>Manage Customers</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="@Url.Action("ViewOrders", "Home")" class="elements">
                                        <span>View Orders</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <section>
        <div class="container">
            <div class="row">
                @RenderBody()
            </div>
        </div>
        <footer id="footer">
            <!--Footer-->
            <div class="footer-bottom">
                <div class="container">
                    <div class="row">
                        <p class="pull-left">Copyright © 2016 Shopping cart. All rights reserved.</p>
                        <p class="pull-right">Designed by <span><a target="_blank" href="http://www.atdrive.com">AtDrive</a></span></p>
                    </div>
                </div>
            </div>
        </footer><!--/Footer-->
        @RenderSection("scripts", required: false)
    </section>
    <script src="~/Scripts/jquery.js"></script>
    <script src="~/Scripts/price-range.js"></script>
    <script src="~/Scripts/jquery.scrollUp.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/jquery.prettyPhoto.js"></script>
    <script src="~/Scripts/main.js"></script>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
</body>
</html>

这是我的main.css，具有用于页脚的id页脚。

#footer {
  background: #F0F0E9;
}

我不知道如何将这个页脚保持在底部。当没有身体内容时，它正处于中间位置。

Answer 1

试试这个：

#footer {
    position: absolute;
    height: 50px;
    width: 100%;
    bottom: 0px;
    border-top: solid 1px black;
}

Answer 2

使用此逻辑：

*{
  box-sizing: border-box;
}
body, html{
  height: 100%;
  width: 100%;
  margin: 0;
}
body{
  display:flex;
  flex-direction: column;
}
#container
{
    margin: 0 auto;
    width:80%;
    background-color: white;
    border: 0.2em solid black;
    flex-shrink:0;
    flex-grow:1;
    display:flex;
}
#footer
{
    margin: 0 auto;
    width:100%;
    text-align: center;
    height:1.5em;
    background-color: white;
    border: 0.2em solid black;
    flex-shrink:0;
}
.col {
    height:90%;
    flex-shrink:0;
    flex-grow:1;
    margin:0 2% 0 2%;
}

<div id="container">
  <div class="col">
    test column 1
    <p>
    blah blah blah...
    </p>
    <p>
    blah blah blah...
    </p>
    <p>
    blah blah blah...
    </p>
  </div>
  <div class="col">
    test column 2
    <p>
    blah blah blah...
    </p>
    <p>
    blah blah blah...
    </p>
    <p>
    blah blah blah...
    </p>
    <p>
    blah blah blah...
    </p>
  </div>
</div>
<div id="footer">
test content
</div>

如果身体里没有任何内容，如何将页脚保持在底部。页脚应该响应

2 个答案: