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 に答える