CSS 100% height + header with static height;

CSS 100% height + header with static height;

反目相谮 发布于 2021-11-24 字数 1001 浏览 833 回复 2 原文

I am building a layout which includes a header, which is 40 px in height. Underneath this header a SWF resides that should take up the rest of the available space.

The best solution untill now has been working with a table, giving the first row 40px height and the second row a 100% height - but these rows still add up in Internet Explorer, resulting in a scrollbar appearing for 40 extra pixels - which should not be the case.

I tried using this: http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/ - it works fine if you have content that pushes down eventually but with a SWF with 100% in it, it will take over the whole page, or half the page (depending on putting the SWF in the content div or the SWF being the content div).

Before I resort to javascript to take care of this business I am wondering if someone else knows a better solution?

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

居里长安 2022-06-07 2 楼

A similar solution to forcing a footer to the bottom of a page might work

    html, body{height:100%;margin:0;padding:0;}
    #head{height:40px;background:blue;}
    #wrapper{min-height: 100%;height: auto !important;height: 100%; margin: 0 auto -40px;background:red;}
    #content{}

<div id="wrapper">
<div id="head">
</div>
<div id="content">
</div>
</div>
感性 2022-06-07 1 楼

Try setting your header as static. So it floats over the main body, and set the main body to 100% height. Then give the body a 40px padding on the top.