how to make a full screen div, and prevent size to be changed by content?

前端未结

关注

 8  2102

for my web application, i would like the main div to be full screen (both width and height = 100%), and regardless of content, i want it to stay at that size. that means, if

相关标签:

8条回答

無奈伤痛

2020-12-13 13:17
Notice how most of these can only be used WITHOUT a DOCTYPE. I'm looking for the same answer, but I have a DOCTYPE. There is one way to do it with a DOCTYPE however, although it doesn't apply to the style of my site, but it will work on the type of page you want to create:
```
div#full-size{
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    overflow:hidden;
```
Now, this was mentioned earlier but I just wanted to clarify that this is normally used with a DOCTYPE, height:100%; only works without a DOCTYPE
0 讨论(0)
发布评论:

提交评论
- 加载中...

孤独总比滥情好

2020-12-13 13:18

Here is my Solution, I think will better to use vh (viewport height) and vw for (viewport width), units regarding to the height and width of the current viewport

function myFunction() {
  var element = document.getElementById("main");
  element.classList.add("container");
}

.container{
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: #333;
  margin: 0; 
  padding: 0; 
}

<div id="main"></div>
<button onclick="myFunction()">Try it</button>

0 讨论(0)

南旧

2020-12-13 13:23

<html>
<div style="width:100%; height:100%; position:fixed; left:0;top:0;overflow:hidden;">

</div>
</html>

0 讨论(0)

迷失自我

2020-12-13 13:30
I use this approach for drawing a modal overlay.
```
.fullDiv { width:100%; height:100%; position:fixed }
```
I believe the distinction here is the use of position:fixed which may or may not be applicable to your use case.

I also add z-index:1000; background:rgba(50,50,50,.7);

Then, the modal content can live inside that div, and any content that was already on the page remains visible in the background but covered by the overlay fully while scrolling.
0 讨论(0)
发布评论:

提交评论
- 加载中...

时光说笑

2020-12-13 13:31

Use the HTML

<div id="full-size">
    <div id="wrapper">
        Your content goes here.
    </div>
</div>

and use the CSS:

html, body {margin:0;padding:0;height:100%;}
#full-size {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
}
#wrapper {
    /*You can add padding and margins here.*/
    padding:0;
    margin:0;
}

Make sure that the HTML is in the root element.

Hope this helps!

0 讨论(0)

梦毁少年i

2020-12-13 13:34

#fullDiv {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden; /* or auto or scroll */
}

0 讨论(0)

1 2 下一页