Question

我在这里看到很多例子声称只使用......

height: 100%;

...应将div的高度设置为其容器的高度。那没有发生，所以我意识到还有其他一些问题;我想知道那个问题是什么。

我的目标是让嵌套图像显示在.container div的相同高度，理想情况下拉伸以适合高度和宽度。

目前，在某些分辨率下，图像不会占据.container div的整个高度，这意味着p元素可能会溢出。

我意识到它可能看起来像我应该为.container div设置一个背景图像（我已经尝试过）但是，由于AngularJS引擎的设置方式，背景图像的url值被打破，所以这不是一个选择。

#container {
    	background-color: transparent;
    	border-radius: 0px 0px 0px 0px;
    	font-size: 0.8em;
    	font-family: Courier;
    	padding: 0px;
    	overflow: hidden;
    	margin: 40px 0px;
    	height: 100%;
    	width: 100%;
    	border: solid 4px green;
    }
    #container > div:first-child {
    	display: block;
    	border: solid 2px red;
    	height: 100%;
    }
    #container > div:first-child > div {
    	display: block;
    	height: 100%;
    }
    #container > div:first-child > div > img {
    	position: absolute;
    	z-index: 1;
    	margin: 0px;
    }
    #container p {
    	margin: 20px 40px 20px 40px;
	position: relative;
	z-index: 2;
    }

<div id="container">
        <div>
            <div>
                <img src="path/to/image.png"/>
            </div>
        </div>
        <div>
            <div>
                <p>Correctly displaying text here.</p>
            </div>
        </div>
        <div>
            <div>
                <p>More correctly displaying text here.</p>
            </div>
        </div>
    </div>

我已经尝试了各种各样的东西，包括在所有div上设置min-height或max-height为100％（这也没有用）

我添加了边框颜色以确定div的高度，实际上不是其容器高度的100％。当我将它设置为一个明确的像素高度时，它显示在那个高度 - 但我希望它具有响应性，所以100％的高度可以很好地工作。我也试过改变各种div的显示属性，但是'inline'或'inline-block'只是使边框向左侧折叠，看起来像是'line-height的高度。

关于这里发生了什么的任何指示？肯定设置一些实际上100％的容器的高度应该是简单的？感谢。

修改我应该指出，我（我认为）需要绝对定位图像，以便文本元素在图像上显示。如上所述，这是不能简单地使用背景图像的精心设计的替代方案。再次感谢。

Answer 1

我对您的编码的看法是：

1 - 如果您希望第一个div具有红色边框并且高度可以是，则容器应该具有相对位置strong>重叠容器你必须让第一个 div 位置绝对，我在这里为jsfiddle提供了一个例子 img < / strong> div内部应该从父级中取height 100%; and width 100%;，您可以使用object-fit: cover;使其高度和宽度与容器的比例相同

https://jsfiddle.net/Letwug7t/

＆＃13;
＆＃13;
#container { background-color: transparent; border-radius: 0px 0px 0px 0px; font-size: 0.8em; font-family: Courier; padding: 0px; /* overflow: hidden; */ margin: 40px 0px; height: 100%; width: 100%; border: solid 4px green; position: relative; } #container > div:first-child { display: block; border: solid 2px red; height: 100%; width: 100%; position: absolute; } #container > div:first-child > div { display: block; height: 100%; } #container > div:first-child > div > img { position: absolute; z-index: 1; margin: 0px; height: 100%; width: 100%; object-fit: cover; } #container p { margin: 20px 40px 20px 40px; position: relative; z-index: 2; }
＆＃13;
<div id="container"> <div> <div> <img src="http://placehold.it/300x300"/> </div> </div> <div> <div> <p>Correctly displaying text here.</p> </div> </div> <div> <div> <p>More correctly displaying text here.</p> </div> </div> </div>
＆＃13;
＆＃13;
＆＃13;

当高度：100％不起作用时，将div设置为100％高度

1 个答案: