如何在 CSS 和 HTML 中使用百分比单位在固定大小的矩形内绘制矩形？

Question

我可以像这段代码一样使用绝对单位在固定大小的矩形内绘制这样的内部矩形

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test div dimension</title>
    <style>
        #main {
            width: 640px;
            height: 360px;
            border: 1px solid black;
        }

        #content {
            width: 100%;
        }

        #slide {
            border: 1px solid red;
            width: calc(640*0.75px);
            height: calc(360*0.75px);
            float: right;
        }

        #camera {
            border: 1px solid red;
            width: calc(640 * 0.25px);
            height: calc(360 * 0.25px);
            float: left;
        }
    </style>
</head>

<body>
    <div id="main">
        <div id="content">
            <div id="slide">
                Rectange 1
            </div>
            
            <div id="camera">
                Rectange 2
            </div>
        </div>
    </div>
</body>

</html>

如何使用基于百分比 (%) 的单位而不是 px 来创建此类内部矩形以避免像 calc(640*0.75px) 这样的计算？

我试过了但是没用

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test div dimension</title>
    <style>
        #main {
            width: 640px;
            height: 360px;
            border: 1px solid black;
        }

        #content {
            width: 100%;
        }

        #slide {
            border: 1px solid red;
            width: 75%;
            height: 75%;
            float: right;
        }

        #camera {
            border: 1px solid red;
            width: 25%;
            height: 25%;
            float: left;
        }
    </style>
</head>

<body>
    <div id="main">
        <div id="content">
            <div id="slide">
                Rectange 1
            </div>

            <div id="camera">
                Rectange 2
            </div>
        </div>
    </div>
</body>

</html>

Answer 1

您可以按百分比设置幻灯片和相机的宽度和高度，但该百分比将属于内容 div 的父项。但是内容宽度的高度为 0，因为您尚未设置它。所以将内容的样式更改为：

#content {
    width: 100%;
    height: 100%;
}

并像这样向相机和幻灯片添加百分比：

#slide {
    border: 1px solid red;
    width: 75%;
    height: 75%;
    float: right;
}

#camera {
    border: 1px solid red;
    width: 25%;
    height: 25%;
    float: left;
}

Answer 2

根据视口高度设置最顶部的 div 高度，如下所示：100vh，然后使内部 div 的高度以 % 为单位。片段如下

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test div dimension</title>
    <style>
        #main {
            width: 640px;
            height: 100vh;
            border: 1px solid black;
        }

        #content {
            width: 100%;
            height: 100%;
        }

        #slide {
            border: 1px solid red;
            width: 50% !important;
            height: 50%;
            float: right;
        }

        #camera {
            border: 1px solid red;
            width: 50% !important;
            height: 50%;
            float: left;
        }
    </style>
</head>

<body>
    <div id="main">
        <div id="content">
            <div id="slide">
                Rectange 1
            </div>
            
            <div id="camera">
                Rectange 2
            </div>
        </div>
    </div>
</body>

</html>

如何在 CSS 和 HTML 中使用百分比单位在固定大小的矩形内绘制矩形？

How to draw rectange inside fix size rectange using percentage unit in CSS and HTML?

html

css

css-units