Question

由于我是Web编程的新手，所以我还没有在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>

当前，孩子的宽度保持不变，因为父母的宽度保持不变。我希望当父母的身高调整大小时，孩子的宽度变小。

谢谢。

Answer 1

只需将您父母的height属性值分配给 css variable ，然后使用 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>

NB 。如果您需要IE11的向后兼容性，可以使用polyfill，如其他SO thread的顶部答案所示。

Answer 2

您的子级宽度和高度（以％为单位）可以使用，但它们将使用父级的相应尺寸来确定。因此，如果子div的宽度为10％，则其大小将为父div的10％；如果高度为20％，则子div的高度将为其父div的20％。

您可以在以下示例中看到这种情况：sample code with border styles to distinguish between child and parent divs

使用jquery将宽度设置为父级高度的10％

如果要将子div的宽度设置为其父高度的百分比，则需要使用jQuery ui方法，如以下示例所示：Resize width to 10% of parent div height sample。

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

您需要了解的主要代码如下。在jquery的ready事件中，即当所有dom元素都准备好时，您需要使父div可调整大小，然后为此定义stop resize事件。请注意，我正在为父级和子级div使用类选择器，即$(".parent") and $(".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>

Answer 3

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

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

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

以纯CSS设置相对于其父代高度的子代宽度

3 个答案: