使用纯CSS将子元素的宽度设置为相对于父元素的高度

Question

使用纯CSS将子元素的宽度设置为相对于父元素的高度

7

由于我是新手，对CSS的经验还不够丰富。目前我正在构建一个可调整大小的标题的Web应用程序。因此，我想知道是否可以将子DIV的宽度设置为其父DIV的高度。

我知道如何在JavaScript代码中处理此问题，但我更喜欢使用纯CSS解决方案。

CSS代码应该如下所示：

.parent {
   position: relative;
   height: 200px;
   width: 600px;
 }
 .parent .resized {
   height: 100px;
 }

 .child {
   position: absolute;
   height: 20%;
   width: 10% [of parent height];
 }

HTML代码如下所示：

<div class="parent">
  <div class="child"></div>
</div>

目前，子元素的宽度保持不变，因为父元素的宽度没有改变。当父元素的高度调整时，我希望子元素的宽度也能变小。

提前感谢。

- Luke

我在原回答中添加了一个完整的示例，其中子div的高度实际上设置为父div高度的10％。请查看新示例和答案。 - Sunil

3个回答

2

当使用百分比设置子元素的宽度和高度时，它们会按照父元素相应的尺寸确定大小。因此，如果子div的宽度为10％，则其大小将为父div的10％，如果高度为20％，则子div的高度将为其父div的20％。

您可以在以下示例中看到这种情况：使用边框样式区分子父div的示例代码 使用jquery将宽度设置为父元素高度的10％ 如果您想将子div的宽度设置为其父元素高度的百分比，则需要使用jQuery UI方法，如以下示例所示：调整宽度为父div高度的10％示例。

对于上面的示例，您需要包含jquery，jquery ui和jquery ui css文件；然后只需在jquery对象上调用可调整大小的方法（$（“ .parent”）.resizable（）），并定义当父div停止调整大小时的事件。在此停止事件中，您可以编写代码，以使子div的宽度为父div高度的10％。

您需要理解的主要代码如下所示。在jquery的ready事件即所有dom元素准备就绪时，您需要使父div可调整大小，然后为其定义停止调整大小事件。请注意，我正在使用类选择器来选择父和子div，即 $（“ .parent”）和$（“ .child”）。

$(document).ready(function() {

$(".parent").resizable( {
   stop : function(e, ui) { 
            alert("stopped"); 
            //resize the child div now
            var childHeight =0.1 *  $(".parent").height();
           $(".child").width(childHeight);
          } 
     });
});

如果您想在电脑上尝试以上示例，则只需使用以下页面标记/代码。"最初的回答"

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" 
    href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>

<style>
.parent {
   position: relative;
   height: 200px;
   width: 600px;
   border: 1px solid red;
 }
 .parent .resized {
   height: 100px;
 }

 .child {
   position: absolute;
   height: 20%;
   width: 10%;
   border: 1px solid green;
 } 
</style>
<script>
$(document).ready(function() {
$(".parent").draggable().resizable( {
  stop: function(e, ui) {
   $(".child").width($(".parent").height() * 0.1);
  }
}); 

});

</script>
 </head>
<body>   
<div class="parent">
  <div class="child"></div>
</div>
</body>
</html>

- Sunil

0

由于父元素是固定高度的（在您的示例中为100px或200px），因此您可以为子元素制作选择器。

.parent > .child {
  position: absolute;
  height: 20%;
  width: 20px;
}

.resized > .child {
  position: absolute;
  height: 20%;
  width: 10px;
}

- chrwahl

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AndrewL64 · Accepted Answer

只需将父元素的height属性值分配给一个CSS变量，然后使用calc()将您的子元素的宽度分配为父元素高度的10％即可。请查看并运行下面的代码段，以实际示例说明我上述所描述的内容：

.parent {
   position: relative;
   --parentHeight: 300px;
   height: var(--parentHeight);
   width: 600px;
   background-color: red;
 }
 .parent .resized {
   height: 100px;
 }

 .child {
   position: absolute;
   height: 20%;
   width: calc(var(--parentHeight) / 10);
   background-color: green;
 }

<div class="parent">
  <div class="child"></div>
</div>

注意: 如果您需要兼容 IE11, 您可以使用一个 polyfill，就像在这个SO线程的顶部答案中所示。