Fatal编程技术网
  • css/
  • Css 当正文中没有内容时，如何在底部保留页脚。页脚应该是有响应的

Css 当正文中没有内容时，如何在底部保留页脚。页脚应该是有响应的

css asp.net

Css 当正文中没有内容时，如何在底部保留页脚。页脚应该是有响应的,css,asp.net,Css,Asp.net,这是我没有身体的布局 <!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" con

这是我没有身体的布局

<!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>
我不知道怎么把这个页脚放在底部。当没有正文内容时，它正处于中间位置。

试试这个：

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

#footer {
    position: absolute;
    height: 50px;
    width: 100%;
    bottom: 0px;
    border-top: solid 1px black;
}
使用以下逻辑：

*{
框大小：边框框；
}
正文，html{
身高：100%；
宽度：100%；
保证金：0；
}
身体{
显示器：flex；
弯曲方向：立柱；
}
#容器
{
保证金：0自动；
宽度：80%；
背景色：白色；
边框：0.2米纯黑色；
弹性收缩：0；
柔性生长：1；
显示器：flex；
}
#页脚
{
保证金：0自动；
宽度：100%；
文本对齐：居中；
高度：1.5em；
背景色：白色；
边框：0.2米纯黑色；
弹性收缩：0；
}
上校{
身高：90%；
弹性收缩：0；
柔性生长：1；
利润率：0.2%0.2%；
}

测试列1

废话废话。。。



废话废话。。。



废话废话。。。


测试栏2

废话废话。。。



废话废话。。。



废话废话。。。



废话废话。。。


测试内容
使用以下逻辑：

*{
框大小：边框框；
}
正文，html{
身高：100%；
宽度：100%；
保证金：0；
}
身体{
显示器：flex；
弯曲方向：立柱；
}
#容器
{
保证金：0自动；
宽度：80%；
背景色：白色；
边框：0.2米纯黑色；
弹性收缩：0；
柔性生长：1；
显示器：flex；
}
#页脚
{
保证金：0自动；
宽度：100%；
文本对齐：居中；
高度：1.5em；
背景色：白色；
边框：0.2米纯黑色；
弹性收缩：0；
}
上校{
身高：90%；
弹性收缩：0；
柔性生长：1；
利润率：0.2%0.2%；
}

测试列1

废话废话。。。



废话废话。。。



废话废话。。。


测试栏2

废话废话。。。



废话废话。。。



废话废话。。。



废话废话。。。


测试内容
当没有人在场时，我希望页脚在底部。正文内容为空。此外，页脚必须是响应，并应在底部的任何决议。我希望在底部的页脚时，并没有人在那个里。正文内容为空。此外，页脚必须是响应，并应在底部的任何决议。