Height is 100%?
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;
}
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/th开发者_运维问答eme1/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>
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.
Use 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;
}
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% 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%
Put html { height: 100% } at the beginning and see if it helps.
Make sure that the height is set to 100% in every point of your Xpath layout hierarchy. That is html->body->form->div id="center"
style="height:100% "
You can then continue using style="height:100% " in the child pages that will inherit from ContentPlaceHolder2 at the inheriting content place holder.
There are areas you might need to adjust(lower) the % height to allow other elements to fit in the area e.g. the other div s.
加载中,请稍侯......
精彩评论