身高是100％？

我會asp.net網頁就像一個風格：身高是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; 
    }

我有一個問題是頁面並非100％的高度。我在身體使用最小高度或高度是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爲中心可以拉伸或收縮屬於它的包含。因此頁腳的顯示不準確。

來源

2011-09-13 PhamMinh

試試這個 http://stackoverflow.com/questions/4954147/css-100-height-in-ie – Nalaka526

我仍然有一個問題，頁腳必須始終位於中心下方，這可以改變尺寸。 – PhamMinh

使用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標籤的後代，因此這是必需的。

100％的高度是CSS不那麼容易做到的事情之一。當指定一個元素的高度爲100％時，100％指的是包含元素的高度。那麼包含元素將需要是其包含元素的高度的100％，等等。訣竅是設置最外層元素的高度爲100％

來源

2011-09-13 09:43:20

頁腳，如果中心不夠長，如何將它固定在屏幕底部，如果中心div長於屏幕高度，則拖動它以修復它？ – PhamMinh

例如，您可以使用許多技巧進行遊戲。將頁腳的位置設置爲絕對和底部：0px;還有很多其他的方法。 –

如果將頁腳設置爲絕對值，當中心點包含的長度高於屏幕高度時，它不起作用。頁腳不能總是在頁面下方。我使用固定位置，但不工作。 – PhamMinh

把html { height: 100% }放在開頭，看看它是否有幫助。

來源

2011-09-13 09:41:58 Leonid

身高是100％？

回答

相關問題