Question

我正在尝试找到一种方法，使父div占据旋转子div的高度。

问题似乎与子div旋转有关，但父div知道子div的非旋转高度。

我需要红色框覆盖整个绿色菱形。有什么推荐的人吗？

谢谢你。

.parent-container {
   position: relative;
   background: red;
}

.child-diamond {
   position: relative;
   width: 500px;
   height: 500px;
   background: #1eff00;
   transform: rotate(-45deg);
   transform-origin: 50% 50%;
}

<div class="parent-container">
  <div class="child-diamond"></div>
</div>

更新2：感谢Rotem Lurx Horovitz的建议。我添加了其他js以重新计算div（如果用户调整浏览器大小）。

$(window).resize(function () {
    fixDiamondContainerHeight();
});

$(function () {
    fixDiamondContainerHeight();
});

function fixDiamondContainerHeight() {
    //Calculate the height of the parent div for diamond shape
let $a = $('.child-diamond').width(),
$b = $('.child-diamond').height(),
$c = Math.sqrt((Math.pow($a, 2)) + (Math.pow($b, 2)));

$('.parent-container').height($c);
}

Answer 1

为了获得最大的灵活性（无论绿色正方形有多大），请使用javascript通过将其视为直角三角形并使用Pythagoras Theorem来计算新的高度：

如果公式为： a²+b²=c²

然后： c =√（a²+b²）

然后只需将parent-container的高度设置为c即可。

let $a = $('.child-diamond').width(),
$b = $('.child-diamond').height(),
$c = Math.sqrt((Math.pow($a, 2)) + (Math.pow($b, 2)));

$('.parent-container').height($c);

（示例使用jQuery） https://codepen.io/anon/pen/jgBaVR

Answer 2

这也可以简单地通过CSS完成。

将此添加到您的父div display:table;

.parent-container {
   position: relative;
   background: red;
   display:table
}

示例：https://codepen.io/anon/pen/jgBYaV

Answer 3

在红色框内覆盖整个绿色框。

$(document).ready(function(){
	let height = $('.child-diamond').height();
	let width = $('.child-diamond').width();
	let diagonal = Math.sqrt((Math.pow(height, 2)) + (Math.pow(width, 2)));
	let leftPadding = (diagonal - width)/2;
	$('.parent-container').css({'height': diagonal, 'padding-left': leftPadding + 'px'});
});

如何使父div跟随45度旋转子div的高度

3 个答案: