如果父级的div也为100％的宽度/高度，如何给孩子的div的宽度/高度为100％ [英] How to give a child div width/height 100% if the parent's div is also 100% width/height

问题描述

我希望两个div的宽度和高度为100％.我知道孩子的div不会工作，因为父母的div没有特定的身高，但是有办法解决这个问题吗?

I want two divs having the width and height 100%. I know that the child div won't work because the parents div has not a specific height but is there a way to fix this?

HTML:

<div class="container">
      <div class="child-container">
      </div>
</div>

CSS:

body
{
      width: 100%;
      height: 100;
}

.container
{
      position: relative;
      min-width: 100%;
      min-height: 100%;
      background-image: url('http://www.earthbusinessdirectory.com/web/images/london.jpg');
}

.child-container
{
      position: relative;
      min-width: 100%;
      min-height: 100%;
      background-image: url('/images/black.png');
}

推荐答案

您使用视口的相对值，并将元素的min-height设置为100vh. (示例)

You use viewport relative values and give the element a min-height of 100vh. (example)

_{(显然，这是假设您希望该元素是视口的100%而不是父元素)}

_{(This obviously assumes you are wanting the element to be 100% of the viewport and not the parent element)}

.child-container {
    position: relative;
    min-width: 100%;
    min-height: 100vh;
    background-image: url('/images/black.png');
}

5.1.2.视口百分比长度:"vw"，"vh"，"vmin"，"vmax"单位

视口百分比长度相对于初始包含块的大小.更改初始包含块的高度或宽度时，将对其进行相应缩放.

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

或者，您可以将html元素的高度设置为100%，然后将.container元素的min-height更改为height. (示例)

Alternatively, you could set the height of the html element to 100% and change the .container element's min-height to a height. (example)

html, body {
    height: 100%;
}
.container {
    position: relative;
    min-width: 100%;
    /* min-height: 100%; */
    height: 100%;
}

这篇关于如果父级的div也为100％的宽度/高度，如何给孩子的div的宽度/高度为100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！