Div height 100% excluding header

后端未结

关注

 5  1032

Ok so I know this topic has many questions, but I still haven\'t been able to figure exactly how to make this work. This is close to the problem, but its not working for m

相关标签:

5条回答

抹茶落季

2021-01-02 09:47

Just script it:

<script type="text/javascript">
function contentSize()
{
    document.getElementById('content').style.height=(window.availHeight-40)+"px";
}
onload=contentSize;
onresize=contentSize;
<script>

0 讨论(0)

长情又很酷

2021-01-02 09:50
This should work:

http://jsfiddle.net/94JNZ/1/
```
#content
{
    height: auto;
    width: 100%;
    position: absolute;
    top: 40px;
    bottom: 0;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
無奈伤痛

2021-01-02 09:51

Here is an article about this problem. CSS 100% height problem

You can see the example page has a perfect 100% layout what header and footer. It uses relative position and not absolute.

0 讨论(0)
发布评论:

提交评论
- 加载中...

执笔经年

2021-01-02 09:59

Use flex:1;

html, body
{
     height: 100%;
     margin: 0px;
}

#page
{
    min-height: 100%;      
    display: flex;
  flex-direction: column;
}

#header
{
display: flex;
    height: 40px;
    background-color:red;
} 

#content
{
    display: flex;
  flex: 1;    
  background-color:blue;
}

<body>
     <div id="page">
          <div id="header">
             header
          </div>
          <div id="content">
             content
          </div>
      </div>
 </body>

0 讨论(0)

迷失自我

2021-01-02 10:01

You can use box-sizing property for this

Check this:

http://jsfiddle.net/Gn8zN/1/

Another simple & best solution

Check this:

http://jsfiddle.net/B8J2H/

0 讨论(0)
发布评论:

提交评论
- 加载中...

Div height 100% excluding header

http://jsfiddle.net/Gn8zN/1/

http://jsfiddle.net/B8J2H/