我正在开发一个Web应用程序,我希望内容能够填满整个屏幕的高度.
该页面有一个标题,其中包含徽标和帐户信息.这可以是任意高度.我希望内容div将页面的其余部分填充到底部.
我有标题div和内容div.目前我正在使用表格进行布局,如下所示:
CSS和HTML
#page {
height: 100%; width: 100%
}
#tdcontent {
height: 100%;
}
#content {
overflow: auto; /* or overflow: hidden; */
}<table id="page">
<tr>
<td id="tdheader">
<div id="header">...</div>
</td>
</tr>
<tr>
<td id="tdcontent">
<div id="content">...</div>
</td>
</tr>
</table>页面的整个高度都已填满,无需滚动.
对于内容div中的任何内容,设置top: 0;将把它放在标题下面.有时内容将是一个真实的桌子,其高度设置为100%.放在header里面content不会允许这个工作.
有没有办法在不使用的情况下达到相同的效果table？
更新:
内容中的元素div也将高度设置为百分比.因此,100%内部的东西div将填充到底部.两个元素也是50%.
更新2:
例如,如果标题占据屏幕高度的20%,则内部指定为50%的表#content将占用屏幕空间的40%.到目前为止,将整个事物包装在表中是唯一有效的方法.
我想设计一个带有横幅和iframe的网页.我希望iframe可以填充所有剩余的页面高度,并在浏览器调整大小时自动调整大小.是否有可能在没有编写Javascript代码的情况下完成它,只有CSS？
我尝试设置height:100%iframe,结果非常接近,但iframe试图填充整个页面高度,包括30px横幅div元素的高度,所以我得到了不必要的垂直滚动条.这不完美.
更新说明:请原谅我没有好好描述这个问题,我在DIV上尝试了CSS margin,padding属性来成功占据网页的整个提醒高度,但这个技巧对iframe没有用.
<body>
<div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
<iframe src="http: //www.google.com.tw" style="width:100%; height:100%;"></iframe>
</body>任何想法都表示赞赏.