我希望网站在高度方面适合屏幕，以使其适合整个屏幕。这是代码 [英] I want the website to fit in the screen in terms of height.how to make it to fit entire screen. This is the code
本文介绍了我希望网站在高度方面适合屏幕，以使其适合整个屏幕。这是代码的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<！DOCTYPE html>
< html>
< head>
< title>带标题< / title>的基本列布局
< / head>
< body style =margin：0px>
< table width =100％height =100％border =0cellspacing =0cellpadding =10>
< tr>
< td bgcolor =limecolspan =2> < H1>网站徽标< / h1>< / td>< / tr>
< tr>
< td colspan =2bgcolor =pinkvalign =middle>< a href =http://www.facebook.com>家庭及LT; / A> < / TD>
< / tr>
< tr>
< td bgcolor =graywidth =20％valign =top>
< a href =http://www.google.com> Google< / a>< / br>
< a href =http://www.gmail.com> Gmail< / a>< / br>
< a href =http://www.yahoo.com>雅虎< / a>< / br>
< a href =http://www.facebook.com> Facebook< / a>< / br>
< a href =http://www.ebn.com> EBN< / a>< / br>
< / td>
< td bgcolor =silverwidth =80％valign =top> < H3>页面标题< / h3>
带有标题，导航栏和页脚部分的三列布局。第一个，第二个和第四个表格行分别创建标题导航栏和页脚，每个行包含单个表格单元格。所有这些表格单元格都使用colspan =3属性值对。< / br>
第三个表行包含三个表单元格，它们创建菜单列（左），内容列（中间）和额外列（右）。第三个表行包含两个表单元格，用于创建菜单栏（左）和内容栏（右）。 colspan属性未设置为任何一个，因此它们默认为colspan =1。< / br>
< / tr>
< tr>
< td bgcolor =navybluecolspan =2> < center>版权所有©< / center>< / td>
< / tr>
< / table>
< / body>
< / html>
我的尝试：
我尝试高度100％仍然高度网站只显示半页高度
解决方案
Google搜索有大量答案： html适合显示区域的高度 [ ^ ]
查看此
请参考 Window innerWidth和innerHeight Property [ ^ ]
<！DOCTYPE html>
< html>
< head>
< title>带标题< / title>的基本列布局
< script>
function sizeit（）{
document.getElementById（'div1'）。style.height = window.innerHeight +'px';
}
< / script>
< / head>
< body style =margin：0pxonload =sizeit（）>
< div id =div1>
< table width =100％height =100％border =0cellspacing =0cellpadding =10>
< tr>
< td bgcolor =limecolspan =2> < H1>网站徽标< / h1>< / td>
< / tr>
< tr>
< td colspan =2bgcolor =pinkvalign =middle>< a href =http://www.facebook.com>家庭及LT; / A> < / TD>
< / tr>
< tr>
< td bgcolor =graywidth =20％valign =top>
< a href =http://www.google.com> Google< / a>< / br>
< a href =http://www.gmail.com> Gmail< / a>< / br>
< a href =http://www.yahoo.com>雅虎< / a>< / br>
< a href =http://www.facebook.com> Facebook< / a>< / br>
< a href =http://www.ebn.com> EBN< / a>< / br>
< / td>
< td bgcolor =silverwidth =80％valign =top>
< h3>页面标题< / h3>
带有标题，导航栏和页脚部分的三列布局。第一个，第二个和第四个表格行分别创建标题导航栏和页脚，每个行包含单个表格单元格。所有这些表格单元格都使用colspan =3属性值对。< / br>
第三个表行包含三个表单元格，它们创建菜单列（左），内容列（中间）和额外列（右）。第三个表行包含两个表单元格，用于创建菜单栏（左）和内容栏（右）。 colspan属性未设置为任何一个，因此它们默认为colspan =1。< / br>
< / tr>
< tr>
< td bgcolor =navybluecolspan =2> < center>版权所有©< / center>< / td>
< / tr>
< / table>
< / div>
< / body>
< / html>
< / html>
<!DOCTYPE html> <html> <head> <title> Basic column layout with header </title> </head> <body style="margin:0px"> <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="10"> <tr> <td bgcolor="lime" colspan="2"> <h1> Website logo </h1></td></tr> <tr> <td colspan="2"bgcolor="pink" valign="middle"><a href="http://www.facebook.com"> Home</a> </td> </tr> <tr> <td bgcolor="grey" width="20%" valign="top"> <a href="http://www.google.com"> Google </a></br> <a href="http://www.gmail.com"> Gmail </a></br> <a href="http://www.yahoo.com"> Yahoo </a></br> <a href="http://www.facebook.com"> Facebook </a></br> <a href="http://www.ebn.com"> EBN </a></br> </td> <td bgcolor="silver"width="80%"valign="top"> <h3> Page heading </h3> A three column layout with header,navigation bar and footer sections. The first, second and fourth tabel rows create the header navigation bar and footer respectively and containa single table cell each. All these table cells use colspan="3" attribute value pair.</br> The third table row contains three table cells which create the menu column(left), the content column(middle) and the extra column(right).The third table row contains two table cells which create the menu column (left) and the content column (right). The colspan attribute is not set in either so they default to colspan="1".</br> </tr> <tr> <td bgcolor="navyblue" colspan="2"> <center>Copyright © </center></td> </tr> </table> </body> </html>
What I have tried:
I tried putting height 100% still the website only appears half page in terms of height
解决方案
Google Search has tonnes of answers: html fit height of display area[^]
check this
refer Window innerWidth and innerHeight Property[^]
<!DOCTYPE html> <html> <head> <title> Basic column layout with header </title> <script> function sizeit() { document.getElementById('div1').style.height = window.innerHeight + 'px'; } </script> </head> <body style="margin:0px" onload="sizeit()"> <div id="div1"> <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="10"> <tr> <td bgcolor="lime" colspan="2"> <h1> Website logo </h1></td> </tr> <tr> <td colspan="2" bgcolor="pink" valign="middle"><a href="http://www.facebook.com"> Home</a> </td> </tr> <tr> <td bgcolor="grey" width="20%" valign="top"> <a href="http://www.google.com"> Google </a></br> <a href="http://www.gmail.com"> Gmail </a></br> <a href="http://www.yahoo.com"> Yahoo </a></br> <a href="http://www.facebook.com"> Facebook </a></br> <a href="http://www.ebn.com"> EBN </a></br> </td> <td bgcolor="silver" width="80%" valign="top"> <h3> Page heading </h3> A three column layout with header,navigation bar and footer sections. The first, second and fourth tabel rows create the header navigation bar and footer respectively and containa single table cell each. All these table cells use colspan="3" attribute value pair.</br> The third table row contains three table cells which create the menu column(left), the content column(middle) and the extra column(right).The third table row contains two table cells which create the menu column (left) and the content column (right). The colspan attribute is not set in either so they default to colspan="1".</br> </tr> <tr> <td bgcolor="navyblue" colspan="2"> <center>Copyright © </center></td> </tr> </table> </div> </body> </html> </html>
这篇关于我希望网站在高度方面适合屏幕，以使其适合整个屏幕。这是代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
