我试图让它成为一个div的高度始终是另一个div的宽度 [英] I am trying to make it so the height of one div is always the width of an other div
问题描述
我试图让一个div的高度等于另一个div的宽度。
另一个div的宽度是百分比。我试图用javascript做它但它不起作用。
这是我的HTML。
< ;主体>
< div id =leftContent>
< p>左< / p>
< / div>
< div id =rightContent>
< p>对
< / p>
< / div>
< script>
var leftW = document.getElementById（leftContent）;
var rightH = document.getElementById（rightContent）;
leftW.innerHTML =这样做;
rightH.style.width = 61.8 +％;
leftW.style.height = rightH.style.width;
< / script>
< / body>
我的CSS如下。
#rightContent {
background-color：rgb（186,212,255）;
float：left;
/*width:61.8%;*/
}
#leftContent {
background-color：rgb（91,134,204）;
float：left;
宽度：38.2％;
}
我的尝试：
我一直在查找使div的高度等于某个百分比的问题。这通常似乎不可能。我想这就是它不起作用的原因。那么问题是，我如何使一个元素的高度等于另一个元素的宽度，其他元素的宽度是百分比？
这样的东西：
CSS：* ，
* :: before ，
* :: after {
box-sizing ： border-box;
}
＃ leftContent ，
＃ rightContent {
padding ： 5px;
float ： 左;
}
＃ leftContent {
background-color ： rgb（91,134,204）;
width ： 38.2％;
}
＃ rightContent {
background-color ： rgb（186 ，212,255）;
width ： 61.8％;
}Javascript：
var updateSize = function （）{
var left = document .getElementById（ left内容）;
var right = document .getElementById（ rightContent）;
left.style.height = right.offsetWidth + px;
};
updateSize（）;
window .addEventListener（ resize，updateSize）;
演示 [ ^ ]
或者，如果您只想要一个大小为视口宽度或高度百分比的元素，请使用视口单位vw或vh：
视口大小的排版| CSS-Tricks [ ^ ]
i am trying to make the height of one div equal to the width of an other div.
The width of the other div is a percent. I am trying to do it with javascript but it does not work.
This is my HTML.
<body>
<div id="leftContent">
<p> left </p>
</div>
<div id="rightContent">
<p> right
</p>
</div>
<script>
var leftW = document.getElementById("leftContent");
var rightH = document.getElementById("rightContent");
leftW.innerHTML="does this work";
rightH.style.width = 61.8 + "%";
leftW.style.height=rightH.style.width;
</script>
</body>
my CSS is as follows.
#rightContent {
background-color: rgb(186, 212, 255);
float:left;
/*width:61.8%;*/
}
#leftContent {
background-color: rgb(91, 134, 204);
float:left;
width:38.2%;
}
What I have tried:
I have been looking up the problem with making the height of a div equal to a certain percent. That generally does not seem to be possible. I suppose that is the reason it does not work. The question then is, how do i make it so the height of one element, is equal to the width of an other element, where the width of that other element is a percent?
Something like this:
CSS:*, *::before, *::after { box-sizing: border-box; } #leftContent, #rightContent { padding: 5px; float: left; } #leftContent { background-color: rgb(91, 134, 204); width: 38.2%; } #rightContent { background-color: rgb(186, 212, 255); width: 61.8%; }Javascript:
var updateSize = function() { var left = document.getElementById("leftContent"); var right = document.getElementById("rightContent"); left.style.height = right.offsetWidth + "px"; }; updateSize(); window.addEventListener("resize", updateSize);
Demo[^]
Alternatively, if you just want an element sized as a percentage of the viewport width or height, use the viewport unitsvworvh:
Viewport Sized Typography | CSS-Tricks[^]
这篇关于我试图让它成为一个div的高度始终是另一个div的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
