td元素內部的100％高度div

我使用的是ASP，有一個非常簡單的模板，在我的lang中，想把div放在td元素裏面，應該是100％的高度......使用內部DIV很重要，而不是TD本身的設置，casue會有一個母版頁相同的這一個，這一段時間的內容將有背景，有一段時間沒有......td元素內部的100％高度div

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="admin_login.aspx.cs" Inherits="admin_login" %> 

<!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 id="Head1" runat="server"> 
    <title>Admin Section</title> 
    <link href="~/css/admin.css" type="text/css" rel="stylesheet"/> 
    <script type="text/javascript" language="javascript" src="js/height.js"></script> 
    <script type="text/javascript" language="javascript"> 
     function onLoad() { 
      makeInnerOneHundredPercentage("outterMainDivElement", "innerMainDivElement"); 
     } 

     $(document).ready(onLoad()); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div class="main-div"> 
     <table class="main-table"> 
      <tr> 
       <td class="pg-hdr"> 
        ورود<br /> 
        <br /> 
        <div class="main-link-div"> 
         <asp:HyperLink ID="HyperLink1" runat="server">خانه</asp:HyperLink> 
        </div> 
        <div class="main-link-div-alt"> 
         &nbsp;&nbsp; 
         &nbsp;&nbsp;&nbsp; 
         &nbsp;&nbsp;&nbsp; 
         </div> 
       </td> 
      </tr> 
      <tr> 
       <td id="outterMainDivElement"> 
        <div id="innerMainDivElement" class="big-background"> 
         <div align="center"> 
          <asp:Login ID="Login1" runat="server" BackColor="#EFF3FB" BorderColor="#B5C7DE" 
           BorderPadding="4" BorderStyle="Solid" BorderWidth="1px" Font-Names="tahoma" 
           Font-Size="0.8em" ForeColor="#333333" 
           FailureText="تلاش برای ورود موفقیت آمیز نبود، لطفا مجددا تلاش کنید." 
           LoginButtonText="ورود" PasswordLabelText="کلمه عبور:" 
           PasswordRequiredErrorMessage="کلمه عبور ضروری می باشد." 
           RememberMeText="من را به خاطر بسپار" TitleText="ورود" 
           UserNameLabelText="نام کاربری:" 
           UserNameRequiredErrorMessage="نام کاربری ضروری می باشد." RememberMeSet="False" CheckBoxStyle-Wrap="True"> 
           <InstructionTextStyle Font-Italic="True" ForeColor="Black" /> 
           <LoginButtonStyle BackColor="White" BorderColor="#507CD1" BorderStyle="Solid" 
            BorderWidth="1px" Font-Names="Verdana" Font-Size="1em" 
            ForeColor="#284E98" /> 
           <TextBoxStyle Font-Size="0.8em" /> 
           <TitleTextStyle BackColor="#507CD1" Font-Bold="True" Font-Size="1.5em" 
            ForeColor="White" /> 
          </asp:Login> 
         </div> 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td class="pg-ftr"> 
        <p dir="rtl" style="padding: 0px; margin: 0px;"> 
         تمامي حقوق مطالب اين وب سايت براي حسن فقیهی محفوظ است. 
        </p> 
        <p dir="ltr" style="padding: 0px; margin: 0px; font-family: Times new roman;"> 
         © 2011 by Hassan Faghihi.</p> 
       </td> 
      </tr> 
     </table> 
    </div> 
    </form> 
</body> 
</html>

我也試着寫JS ......但它似乎沒有工作，請大家看看....

function makeInnerOneHundredPercentage(outterId, innerId){ 
    var h= Document.getElementById(outterId).height; 
    document.getElementById(innerId).height=h; 
}

這裏是我的CSS文件

body,html { 
    direction: rtl; 
    height: 100%; 
    margin: 0; 
    min-height: 100%; 
    padding: 0; 
} 

body > form{ 
    height: 100%; 
    min-height: 100%; 
} 

* { 
    font-family: tahoma; 
} 

.big-background{ 
    height: 100%; 
    min-height: 100%; 
    margin: auto; 
    padding: 0; 
    background-image: url("../img/style/10.jpg"); 
    background-repeat: repeat; 
} 

.main-div { 
    min-height: 100%; 
    height: 100%; 
    padding: 0px; 
    margin: 0px; 
} 

.main-table { 
    width: 100%; 
    min-height: 100%; 
    height: 100%; 
    padding: 0px; 
    margin: 0px; 
} 

.pg-hdr{ 
    height: 100pt; 
    text-align: center; 
    vertical-align: top; 
    font-family: tahoma,arial; 
    font-size: 36px; 
    font-style: normal; 
    font-weight: bold; 
    color: #f9f6ff; 
    background-color: #a694ff; 
} 

.pg-ftr{ 
    height: 50pt; 
    text-align: center; 
    font-family: tahoma,arial; 
    font-size: 14px; 
    font-style: normal; 
    color: #f9f6ff; 
    background-color: #a694ff; 
} 

.main-link-div , 
.main-link-div-alt{ 
    font-size: 16px; 
} 
.main-link-div { 
    width: 100px; 
    float: left; 
} 
.main-link-div-alt{ 
    width: auto; 
    float: right; 
} 

.main-link-div > a:hover, 
.main-link-div-alt > a:hover { 
    color: red; 
} 

.main-link-div > a:active, 
.main-link-div-alt > a:active { 
    color: #ffd700; 
} 

.content-place-holder-td { 
    text-align: center; 
    vertical-align: top; 
} 

.content-place-holder-td > * { 
    margin: 0 auto; 
}

來源

2012-05-17 deadManN

添加這種風格在你的CSS文件（背景色是僅用於測試，U以後可以刪除）

.big-background{ 
    height: 100%; background-color: #ccc}

來源

2012-05-29 09:17:56 Sowmya

不要使用內聯CSS。只需將該行添加到樣式表。 – Hidde

大概是......嗯...... div {height：100％}' – Brilliand

這就是它： .big-background { height：100％;最小高度：100％; margin：auto; 填充：0; background-image：url（「../ img/style/10.jpg」）; background-repeat：repeat; } – deadManN

td元素內部的100％高度div

回答

相關問題