首页 > 解决方案 > 将细分高度设置为未指定高度的父 div 的 33%

问题描述

我有一个由图像和图像下方的描述框组成的 div。图片应该占父母身高的2/3,而描述占身高的三分之一。整个 div 占据了屏幕宽度的 30%,并且两个子元素都跨越了它们父元素的宽度。图像的高度,但图像的尺寸不会改变,而且由于宽度始终为 30%,因此可以计算高度。

图像在重新调整大小方面做得很好,但它下面的描述并没有改变大小。我需要下面的描述是图像高度的 1/2,或者是父级高度的 1/3。

CSS & HTML

html, body {
	height: 100%;
}

.frontPageIssue {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 30%;
    margin-left: 35%;
    margin-top: 50px;
    margin-bottom: 50px;
    height: auto;
}

.IssueImg {
    max-height: 67%;
    max-width: 100%;
}

.IconBox {
    width: 100%;
    height: 33%;
    background-color: red;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex-wrap: none;
    bottom: 0;
}

.IconBox > span {
    font-size: 12px;
    font-family: Roboto;
    font-weight: 600;
}
<div class="frontPageIssue">
        <a href="Reading/Issues/who.pdf" class="IssueImg">
            <img src="data:image/jpeg;base64,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" style="max-height: 100%; width: 100%;">
        </a>
        <div class="IconBox">
            <h2 style="margin: 0px;">Issue#</h2>
            <span>Name</span>
        </div>
    </div>

标签: htmlcsswebflexbox

解决方案


我做了一个回答。核实。
问题是您没有为主 div(.frontPageIssue) 分配任何固定高度。这就是为什么您的标题框不能占据主 div 的 33% 高度的原因。
希望这对您有所帮助。

.frontPageIssue {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 30%;
    margin-left: 35%;
    margin-top: 50px;
    margin-bottom: 50px;
    height: 51vw;
}

.IssueImg {
    max-height: 67%;
    max-width: 100%;
}

.IssueImg img {
  width: 100%;
  height: 34vw;
  object-fit: cover;
}

.IconBox {
    width: 100%;
    height: 17vw;
    background-color: #fff;
    border: 1px solid #252525;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: none;
    bottom: 0;
}

.IconBox > span {
    font-size: 12px;
    font-family: Roboto;
    font-weight: 600;
}
<div class="frontPageIssue">
        <a href="Reading/Issues/who.pdf" class="IssueImg">
            <img src="https://i.imgur.com/mdqBxVE.jpg">
        </a>
        <div class="IconBox">
            <h2 style="margin: 0px;">Issue#</h2>
            <span>Name</span>
        </div>
    </div>


推荐阅读