高度是100％？ [英] Height is 100%?
问题描述
我会asp.net网页就像一个风格：
I will a style of asp.net webpage like:
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％的高度。我用最小高度或高度在体 100％，但不起作用。在页脚由长内容的中心的变化。怎么修？
的HTML是非常简单的：
I have a problem is the height of page not 100%. I used min-height or height is 100% in body, but don't work. The footer change by the long of content center. How to fix? The html is very simple:
<%@ 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为中心可拉伸或收缩属于它的遏制。这样页脚的显示不准确。
In other pages use this Master Page, the div have ID is center can stretch or shrink belong to the contain in it. So that the display of footer isn't exact.
推荐答案
使用HTML，身体
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;
}
我们需要给100％的高度为html和body标签都。这是经常被忽略，但是是非常重要的，因为没有元素将调整到一个百分比高度，除非它知道它的父高度目前占据。由于容器是body标签的后代是HTML标记的后代，那么这是必需的。
We need to give 100% height to both the html and the body tag. This is often overlooked but is vitally important as no element will adjust to a percentage height unless it knows what it’s parent height is currently occupying. As the container is a descendant of the body tag which is a descendant of the html tag, then this is required.
100％的高度是那些东西CSS没有这样做很容易的。当指定为具有100％的高度的元件，100％是指含有元素的高度。然后包含元素将需要100％的含元素的高度等。关键是要设置最外层元素的高度为100％
100% height is one of those things CSS doesn’t do so easily. When you specify an element to have a height of 100%, the 100% refers to the containing element’s height. The containing element would then need to be 100% the height of its containing element and so on. The trick is to set the height of the outermost elements to be 100%
这篇关于高度是100％？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
