Question

我将使用asp.net网页的样式：

body
    {
        font-family: Times New Roman, Serif;
        color: #000000;
        text-align: center;
        min-height:100%;
        height:auto;
    }
    #container
    {
        /*background-color: #00CCFF; */
        margin: auto;
        width: 100%;
    }
    #header
    {
        /* background-color: #FF00FF; */
        width: 100%;
        height: 95px;
        background-image:url('../Images/Back_logo.png');
        background-repeat:repeat-x;
        background-color:Transparent;
    }
    #menu
    {
        /*background-color: #FFFF00; */
        height:40px;
    }
    #left
    {
        /* background-color: #00FF00; */
        width: 20%;
        float: left;
    text-align:left;
        border:1px solid #C8E3F1;
        background-color:#EEFFFF;
        overflow:hidden;
    }
    #center
    {
        width: 79%;
        float: right;
        /* background-color: #FF0000; */
    }
    #footer
    {
        /*background-color: #008000; */
        clear: both;
        height:70px;
        margin-top:10px;
        background-image: url('../Images/footer.png');
        background-repeat:repeat-x;
        background-color:Transparent;
    }

我遇到的问题是页面的高度不是100％。我在身体中使用了min-height或height是100％，但是不起作用。页脚会因内容长中心而发生变化。怎么修？ html非常简单：

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="layout.master.cs" Inherits="layout" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
    <title>Layout</title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="App_Themes/theme1/custom.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <form id="form1" runat="server">
        <div id="container">
        <div id="header">HEADER</div>
        <div id="menu">MENU</div>
        <div id="left">LEFT</div>
        <div id="center">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server"</asp:ContentPlaceHolder>
        </div>
        <div id="footer">FOOTER</div></div>
    </form>
  </body>
</html>

在其他页面中使用此母版页，div的ID为 center 可以拉伸或缩小属于其中的包含。因此页脚的显示不准确。

Answer 1

使用HTML，Body

html, body {
height: 100%;

}

 #footer
{
    /*background-color: #008000; */
    clear: both;
    height:70px;
    position:absolute;
    bottom:0px;      
    margin-top:10px;
    background-image: url('../Images/footer.png');
    background-repeat:repeat-x;
    background-color:Transparent;
}

我们需要为html和body标签提供100％的高度。这往往被忽视，但是非常重要，因为没有元素会调整到百分比高度，除非它知道它的父高当前占用了什么。由于容器是body标签的后代，而body标签是html标签的后代，因此这是必需的。

100％的高度是CSS不容易做到的事情之一。指定高度为100％的元素时，100％指的是包含元素的高度。然后，包含元素必须是其包含元素的高度的100％，依此类推。诀窍是将最外层元素的高度设置为100％

Answer 2

将html { height: 100% }放在开头，看看是否有帮助。

Answer 3

确保在Xpath布局层次结构的每个点上将高度设置为100％。那就是html-> body-> form-> div id =“ center”

style =“ height：100％”

然后，您可以继续在将从继承的内容占位符的ContentPlaceHolder2继承的子页面中使用style =“ height：100％”。

某些区域可能需要调整（降低）高度百分比，以使其他元素适合该区域，例如其他div。

身高是100％？

3 个答案: