Making a div fit the initial screen

后端未结

关注

 10  947

谎友^

I want to make a div fit the initial height and width of a users screen.

I think the following crudely drawn diagram explain this better:

相关标签:

10条回答

陌清茗

2020-12-04 18:43
If I understand correctly (there's some room for confusion here):

http://jsfiddle.net/zRpNp/
```
#screenFiller {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border: 15px solid orange
}
```
You might be after the position: fixed version: http://jsfiddle.net/zRpNp/1/
0 讨论(0)
发布评论:

提交评论
- 加载中...
不知归路

2020-12-04 18:45
Personally I like the pure CSS solution. Just use the vh unit.
```
#filldiv
{
    height: 100vh;
}
```
That will make the div fill the height of the browser window.

In addition, you can also make it fill the width of the browser window, this only uses the vw unit.
```
#filldiv
{
    width: 100vw;
}
```
Both are shown in this fiddle

I personally really like both of these units because they can be used for dynamic resizing of things such as font sizes.
0 讨论(0)
发布评论:

提交评论
- 加载中...
情话喂你

2020-12-04 18:49
Your css style is looking for an id="div" not a div tag. This should work assuming your div in parented by the <body> or another 100%, 100% html element:
```
<div id="fullViewPort">
    My Content
</div>

#fullViewPort {
    width: 100%;
    height: 100%;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

醉话见心

2020-12-04 18:53

another way to do this with CSS only...

http://jsfiddle.net/pxfunc/qQ45K/

html, body {height:100%;} /* explicitly set html & body height */

#fillScreen {
    position:relative;
    top:0;
    left:0;
    height:100%;
    width:100%;
}

0 讨论(0)

上一页 1 2