Question

努力帮助学生完成他的项目，试图让他的Div填满整个页面。

我已尝试按照HTML和BODY标记设置为100％的各种示例，但是当我设置Div的最小高度时，它不会填充页面的完整高度。这是我的代码。当它呈现绿色应该填充页面但它没有。

谢谢KT

<html>
<center>
<head>

    <link href="styles.css"  rel="stylesheet" type="text/css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>

    <div class="tblwrap" height="100%">    
    <table  class="scndtable" >
            <tr class="headerrow">
                <td height=100%><a href="summary.html">Summary</a> </td>
                <td><a href="map.html">Map</a> </td>
                <td><a href="videos.html">Videos</a> </td>
            </tr>
        </table> 
    </div>
    <p style="font-weight: bold;text-align: center;"> </p>

</body>
</center>

这是我的CSS

html
{
height:100%;
}
body
{
margin:0;
padding:0;


vertical-align: middle;
height: 100%;
border: 20px solid skyblue;
}
body table
{
margin-left:auto;
margin-right:auto;
height:100%;

}
.tblwrap
{
background-color:green;
min-height: 100%;

    vertical-align: middle;
border:solid 3px red;
}
.headerrow{
text-align: center;

}
.scndtable
{
border-spacing:20px;
height: 100%;

}
.headerrow td{
font-size: 20pt;


background-color:silver;

}
.headerrow td a{
text-decoration: none;
color: black;
}
.headerrow td a:hover{
text-decoration: none;
color: gray;
}
.selectednav
{   
font-size: 72px;
font-weight: bold;
color:navy;
}

Answer 1

  .tblwrap{position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-color:green;
    vertical-align: middle;
    border:solid 3px red;
    oveflow:auto;
    }

这对你有用： - ）

Answer 2

在您在StackOverflow上提出问题之前，在JSFiddle中重新创建问题总是有帮助的。我试图重新创建你的特定问题，但在我的情况下，div很容易拉伸视口的高度：

http://jsfiddle.net/hWGVr/

但与Ankit Gautam的解决方案一样，这将始终覆盖视口的高度，从不进一步拉伸

Div没有填充高度

2 个答案: