td元素内部的100%高度div

时间:2022-11-03 11:59:40

i'm using ASP, having one very simple template, in my lang, wanna put div inside of td cell which should be 100% of height... it's important to use inner DIV, and not setting on TD itself, casue there will be a master page same to this one, which some time content will have background and some time not...

我正在使用ASP,有一个非常简单的模板,在我的lang中,想把div放在td单元格中,这应该是100%的高度...使用内部DIV很重要,而不是设置TD本身,casue会有是一个与此相同的母版页,有些时候内容会有背景,有些时候不会......

<%@ 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>

i also tried to write JS... but it seem not to work, please take a look....

我也试着写JS ......但似乎没有用,请看看....

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

here's my CSS file

这是我的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;
}

1 个解决方案

#1


0  

Add this style in your css file (background color is only for testing, u can delete it later)

在css文件中添加此样式(背景颜色仅用于测试,您可以稍后删除)

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

#1


0  

Add this style in your css file (background color is only for testing, u can delete it later)

在css文件中添加此样式(背景颜色仅用于测试,您可以稍后删除)

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