1

努力帮助一名学生完成他的项目，试图让他的 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;
}
4

2 回答 2

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

这对你有用:-)

于 2012-05-11T06:30:35.323 回答
0

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

http://jsfiddle.net/hWGVr/

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

于 2012-05-11T06:34:23.170 回答