Make Div 100％的祖父母容器？ [英] Make Div 100% of grandparent container?

问题描述

这里是我遇到的问题： -

Here's the problem I have:-

我有一个div设置为960px的最大宽度。

I have one div that is set to a max width of 960px.

div内部div的宽度设置为100％，但是100％意味着最大为960px

The width of the div inside the div is set to 100%, but 100% means a max of 960px

如何使div在960px div成为用户屏幕的100％，而不将子div（100％）移出父div（960像素）？

How can I make the div inside the 960px div become 100% of the user's screen, without moving the child div(100%) out of the parent div(960px)?

编辑进一步澄清。
以下是结构： -

 gParentDiv
    parentDiv
       myDiv

我希望myDiv与gParentDiv具有相同的宽度，但将其保留在parentDiv

I want myDiv to be the same width as gParentDiv, but keep it within parentDiv

我希望你能帮助

推荐答案

您可以使用视口的高度和宽度。

You can use the viewport's height and width.

例如，以下类将使元素成为视口的大小。

For example, the following class will make the element the size of the viewport.

.fullscreen {
    width: 100vw;
    height: 100vh;
}

jsFiddle Demo

这是一种纯CSS3 解决方案，某些浏览器支持问题。

This is a pure CSS3 solution, but it has some browser support issues.

如果你只想在整个屏幕上使用一个元素，你可以使用不同的方法。

If you just want to strech an element on the entire screen you can use a different approach.

jsFiddle演示

.fullscreen {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

这篇关于Make Div 100％的祖父母容器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！