为什么最小高度不覆盖高度?

发布于 01-16 00:01 字数 3399 浏览 3 评论 0原文

这是我关于堆栈溢出的第一篇文章,所以我希望我做得正确,但是我在我正在创建的网站的主页上遇到了这个 css 问题,该网站有不同的部分,我想这样做各部分的高度为 80vh,但将具有 fit-content 的最小高度,以便内容在超过 80vh 高度时永远不会被切断。然而,似乎最小高度没有覆盖高度,并且部分高度不足以容纳内容。

这是它不使用的部分的 html 和 css:

<section class="home-section" id="home-shopcontact">
            <div id="home-shopcontact-container">
                <div id="home-shop" class="home-shopcontact-card">
                    <div class="home-shopcontact-card-content content-div">
                        <h1>See Something You Like?</h1>
                        <ul>
                            <li>Prints available for A5 to A1.</li>
                            <li>Optional bespoke framing.</li>
                            <li>Original handmade works.</li>
                            <li>Commissions.</li>
                        </ul>
                        <form action="shop.html">
                            <button class="pink-button">SHOP</button>
                        </form>
                    </div>
                </div>

                <div id="home-contact" class="home-shopcontact-card content-div">
                    <div class="home-shopcontact-card-content content-div">
                        <h1>Get in Touch.</h1>
                        <ul>
                            <li>Commission work.</li>
                            <li>General enquiries.</li>
                            <li>Any related questions.</li>
                        </ul>
                        <form action="contact.html">
                            <button class="pink-button">CONTACT ME</button>
                        </form>
                    </div>
                </div>
            </div>
        </section>

这是 css:

.home-section {
    border: 6px solid red;
    min-height: fit-content;
    height: 720px;
}

#home-shopcontact-container {
    border: 6px solid blue;
    display: flex;
    gap: 3.125rem; /* 50px */
    justify-content: center;
    flex-wrap: wrap; /* when the cards are too big on the screen to both fit on the same line, move it underneath */
    padding: 3rem; /* so it doesnt touch the edge of the screen so you can see the cards clearly */
    
}

.home-shopcontact-card {
    position: relative; /* so I can position the link buttons relative to the card */
    box-sizing: border-box; /* so the padding doesnt affect the size of the cards */
    border: 1.5px solid var(--theme-grey);
    min-width: fit-content; /* make sure that the cards have at least enough width to display the content */
    min-height: fit-content;
    width: 34.375rem; /* 550px */
    height: 42.5rem; /* 680px */
    border-radius: 50px;
    padding: 2.8125rem 0 2.8125rem 0; /* 45px padding at the top and bottom of the card */
    overflow: hidden; /* done this to make the transparent background not overflow with the rounded corners */

}

这是它的外观: 在此处输入图像描述

(希望大家都能看到)

红色边框显示育儿部分 div,蓝色边框显示内容容器 div。我真正的问题归结为 - 为什么 min-height 不能确保红色边框部分 div 的高度至少足以容纳内容?您可以看到下面有蓝色边框的内容 div 溢出。

任何帮助将不胜感激,抱歉,如果我错过了重要的细节,如果有,请告诉我,我会为您获取。谢谢! :D

this is my first post on stack overflow so I hope I'm doing it right, but I'm having this css problem on the home page of a website I'm creating where it has different sections and I want to make it so that the height of the sections are 80vh but will have a min-height of fit-content so that the content is never cut off if it exceeds 80vh height. However, it seems as if the min-height is not overriding the height and the section height is not big enough to fit the content.

here's the html and css for the section it is not working with:

<section class="home-section" id="home-shopcontact">
            <div id="home-shopcontact-container">
                <div id="home-shop" class="home-shopcontact-card">
                    <div class="home-shopcontact-card-content content-div">
                        <h1>See Something You Like?</h1>
                        <ul>
                            <li>Prints available for A5 to A1.</li>
                            <li>Optional bespoke framing.</li>
                            <li>Original handmade works.</li>
                            <li>Commissions.</li>
                        </ul>
                        <form action="shop.html">
                            <button class="pink-button">SHOP</button>
                        </form>
                    </div>
                </div>

                <div id="home-contact" class="home-shopcontact-card content-div">
                    <div class="home-shopcontact-card-content content-div">
                        <h1>Get in Touch.</h1>
                        <ul>
                            <li>Commission work.</li>
                            <li>General enquiries.</li>
                            <li>Any related questions.</li>
                        </ul>
                        <form action="contact.html">
                            <button class="pink-button">CONTACT ME</button>
                        </form>
                    </div>
                </div>
            </div>
        </section>

here's the css:

.home-section {
    border: 6px solid red;
    min-height: fit-content;
    height: 720px;
}

#home-shopcontact-container {
    border: 6px solid blue;
    display: flex;
    gap: 3.125rem; /* 50px */
    justify-content: center;
    flex-wrap: wrap; /* when the cards are too big on the screen to both fit on the same line, move it underneath */
    padding: 3rem; /* so it doesnt touch the edge of the screen so you can see the cards clearly */
    
}

.home-shopcontact-card {
    position: relative; /* so I can position the link buttons relative to the card */
    box-sizing: border-box; /* so the padding doesnt affect the size of the cards */
    border: 1.5px solid var(--theme-grey);
    min-width: fit-content; /* make sure that the cards have at least enough width to display the content */
    min-height: fit-content;
    width: 34.375rem; /* 550px */
    height: 42.5rem; /* 680px */
    border-radius: 50px;
    padding: 2.8125rem 0 2.8125rem 0; /* 45px padding at the top and bottom of the card */
    overflow: hidden; /* done this to make the transparent background not overflow with the rounded corners */

}

here's what it comes out looking like:
enter image description here

(hopefully you all can see that)

the red border shows the parenting section div and the blue border shows the content container div. My real question boils down to - why is the min-height not ensuring that the height of the red bordered section div is at least big enough to fit the content? You can see the blue bordered content div overflow underneath.

Any help would be greatly appreciated, sorry if I missed important details and if I have please let me know and i'll get it for you. Thanks! :D

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

甜嗑2025-01-23 00:01:06

如果我理解正确,您想要创建一个高度为 80vh 的部分,但如果该部分的内容大于 80vh,则该部分必须增长。这是吗?如果是,您必须在您的部分中执行此操作:height: fit-content;最小高度:80vh

If I`ve undestanded correctly, you want to create a section with height: 80vh, but if the content of the section is bigger than 80vh the section must to grow. Is this? If Yes, you must to do this in your section: height: fit-content; min-height: 80vh

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文