Question

我正在尝试连续显示两个图像，所以我使用的是flexbox。我将盒子的高度设置为500px，但它几乎*总是计算为0px。它让我想起浮动元素的问题，但是我已经尝试使用img {display：block}并将img标签嵌套在容器div中，但似乎都没有用。

=我说“差不多”是因为在Chrome 49.0.2623.112（但不是我的小提琴）的测试页面上查看并调整视口宽度时，媒体查询从最小宽度：737px样式翻转到最大值-width：736px风格，flexbox突然有高度。

这是一个小提琴：https://jsfiddle.net/territorylit/6v4euuwL/

CSS

.popup_background {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:rgba(255,255,255,0.8);
    z-index:100000000;
}

@media screen and (min-width:737px) {

}

@media screen and (max-width:736px) {

}

.popup_background img.button {
    position:fixed;
    right:0;
    top:0;
    width:50px;
    height:50px;
    border: none;
    z-index:100000001;
    transition:all 0.1s linear;
}

.popup_background img.button:hover {
    border-right-style:solid;
    border-right-color:rgba(175,0,175,1);
    border-top-style:solid;
    border-top-color:rgba(175,0,175,1);
}

    @media screen and (min-width:737px) {
        .popup_background img.button {
            margin-right: calc(5% + 3px);
            margin-top: calc(5% + 3px);
            padding-top:5px;
        }
        .popup_background img.button:hover {
            margin-right: calc(5% + 3px);
            margin-top: calc(5% + 3px);
            border-right-width:3px;
            border-top-width:3px;
            padding-right:3px;
            padding-top:8px;
        }
    }

    @media screen and (max-width:736px) {
        .popup_background img.button {
            padding-top:5px;
        }
        .popup_background img.button:hover {

        }
    }

.popup_container {
    position:fixed;
    top:0;
    left:0; 
    bottom:0;
    right:0;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-box;
        display: -webkit-flex;
    display: flex;
    justify-content:center;
    align-items:center;
    align-content:center;
    flex-direction:column;
    overflow-y:scroll;
    background-color:rgba(255,255,255,0.9);
}

    @media screen and (min-width:737px) {
        .popup_container {

            margin-left:5%;
            margin-right:5%;
            margin-top:5%;
            margin-bottom:5%;
            border-width:3px;
            border-style:solid;
            border-color:rgba(0,0,0,0.6); /* grey */
            box-shadow: 0px 0px 3px 2px rgba(10,123,167,0.2); /* cerulean */
        }

    }

    @media screen and (max-width:736px) {
        .popup_container {
            margin-left:3%;
            margin-right:3%;
            margin-top:3%;
            margin-bottom:3%;
            border-width:2px;
            box-shadow: 0px 0px 3px 2px rgba(255,255,255,0.9); /* white transparent */
        }
    }

.popup_container.top_heavy {
    justify-content:flex-start;
}


p.chelsea {
    font-family:garamond,serif;
    font-size:1.3em;
}

    @media screen and (min-width:737px) {
        p.chelsea {
            max-width:70%;
            line-height:140%;
        }
    }

    @media screen and (max-width:736px) {
        p.chelsea {
            height:auto;
            max-width:90%;
            line-height:130%;
        }
    }

p.chelsea.footnote {
    font-family:garamond,serif;
    font-size:1rem;
    text-align:right;
    margin-bottom:1.5rem;
}

    @media screen and (min-width:737px) {
        p.chelsea.footnote {
            width:50%;
        }
    }

    @media screen and (max-width:736px) {
        p.chelsea.footnote {
            width:90%;
        }
    }

p.chelsea.translation {
    font-size:1.2rem;
    line-height:150%;
}

p.chelsea img {
    width:100%;

}

.milky {
    height:500px;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-box;
        display: -webkit-flex;
    display: flex;
    flex-direction:row;
    justify-content:center;
    align-items:flex-start;
    align-content:center;
    flex-wrap:nowrap;
    overflow:hidden;
}

    @media screen and (min-width:737px) {
        .milky {
            width:70%;
        }
    }

    @media screen and (max-width:736px) {
        .milky {
            width:90%;
        }
    }

#rotation-01 {
    flex:0.6;
}

#rotation-02 {
    flex:1.5686;
}

HTML

<div id="section_04" class="section">

    <div class="popup_background">

        <img class="button" src="http://res.cloudinary.com/territory/image/upload/v1461522074/general/hr_grey_50x50.png" onclick="talkPopUpOff(this.id)" id="section_04_off" />

        <div class="popup_container top_heavy">

            <p class="chelsea">&nbsp;</p>

            <div class="milky">
                <img id="rotation-01" src="https://static1.squarespace.com/static/557a4c2ee4b0fe5a537746b5/t/58b76175bf629a06758f0e2c/1488413284637/milky-way-rotation-1.jpg" />
                <img id="rotation-02" src="https://static1.squarespace.com/static/557a4c2ee4b0fe5a537746b5/t/58b7618b8419c2a168e77ac6/1488413330003/milky-way-rotation-2.jpg" />
            </div>

            <p class="chelsea">“...in the absence of a bright star near the celestial south pole, Quechua peoples and their ancestors organized the sky by reference to the Milky Way, called Mayu or the “celestial river,” and its apparent cruciform rotations. In a twenty-four-hour period, the Milky Way forms two intersecting intercardinal axes that divide the heavens into quarters. Since the plane of the Milky Way is inclined in relation to the earth’s axis, the stars of one quarter will rise as those of the opposite quarter set as the earth rotates. Astronomical phenomena can be tracked with respect to these quarters, which create a systematic means for the spatial and temporal reckoning of the world and its natural and social rhythms. This principle is central to pre-Columbian spatial reckoning.”</p>

            <p class="chelsea footnote">Gartner, William Gustav. "6· Mapmaking in the Central Andes." <em>Americas</em> 169 (1970): 647-54.</p>

            <p class="chelsea">&nbsp;</p>

        </div>

    </div>

</div>

Answer 1

您的问题是.popup_container是一个弹性箱。

只需将.popup_container更改为display: block，将height从.milky移开，我相信它会按照您的意愿行事。

<强>为什么吗

.popup_container弹性框中的项目（例如您的内容，图片和脚注）会自动尝试共享所有垂直空间，即显示高度的100％，因为 {{1} }是.popup_container的后代，其.popup_background。然而，有一个例外。出于某种原因（如果有人知道为什么我很乐意将其包括在内），文本内容优先于带有图像的flexbox。虽然文本占用了它所需的所有空间，但是flexbox几乎没有任何东西。 Flexbox上的height: 100%属性已过时，因为它本身就是一个flexbox项。

另请注意：将固定元素作为固定元素的子元素是一种不好的做法，这是您目前拥有的元素。内部元素根本不需要固定。

Flexbox高度显示为0px，包含img标签

1 个答案: