La hauteur est de 100%?

Je vais un style de page web asp.net comme:La hauteur est de 100%?

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; 
    }

J'ai un problème est la hauteur de la page pas 100%. J'ai utilisé min-height ou height est 100% dans corps, mais ne fonctionne pas. Le pied de page changer par le long de contenu centre. Comment réparer? Le html est très 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>

Dans d'autres pages utiliser cette page principale, la div ont ID est centre peut étirer ou réduire appartiennent à la contenir en elle. Alors que l'affichage du pied de page n'est pas exact.

Source

2011-09-13 PhamMinh

Essayez cette http://stackoverflow.com/questions/4954147/css-100-height-in-ie – Nalaka526

J'ai encore un problème le pied de page doit toujours contenir sous le centre, cela peut changer la taille. – PhamMinh

Utiliser 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; 
}

Nous devons donner une hauteur de 100% à la fois le code html et la balise body. Ceci est souvent négligé, mais est d'une importance vitale car aucun élément ne s'ajustera à un pourcentage de hauteur à moins qu'il ne sache ce que la hauteur du parent occupe actuellement. Comme le conteneur est un descendant de l'étiquette de corps qui est un descendant de la balise html, ceci est requis.

100% hauteur est une de ces choses que CSS ne fait pas si facilement. Lorsque vous spécifiez un élément pour avoir une hauteur de 100%, le 100% fait référence à la hauteur de l'élément conteneur. L'élément contenant devra alors avoir 100% de la hauteur de son élément conteneur et ainsi de suite. L'astuce consiste à régler la hauteur des éléments les plus externes à 100%

Source

2011-09-13 09:43:20

Et le pied de page, comment le fixer en bas de l'écran si le centre n'est pas assez long, et le faire glisser pour fixer si le div central est plus long que la hauteur de l'écran ?? – PhamMinh

Vous pouvez jouer avec, en utilisant de nombreuses techniques, par exemple. positionner le pied de page en absolu et en bas: 0px; il y a beaucoup d'autres façons. –

Si le pied de page est défini sur absolu, il ne fonctionne pas correctement lorsque le centre contient plus de l'écran de hauteur. Le pied de page ne peut pas toujours être en dessous du contenu. J'ai utilisé une position fixe, mais ne fonctionne pas aussi. – PhamMinh

Mettez au début html { height: 100% } et voyez si cela aide.

Source

2011-09-13 09:41:58 Leonid

La hauteur est de 100%?

Répondre

Questions connexes