如何解决相同高度不同的div
如何获得一个 div 的高度,而第二个 div/aside 将获得第一个 div 的高度。类似的东西:
<script>
var y = document.getElementById("div1").style.height;
document.getElementById("div_aside1").style.height= y;
document.getElementById("div_aside2").style.height= y;
</script>
<body>
<aside class = "a_left" id="aside1"><div class="a_left" id="div_aside1"><p></p></div>
</aside>
<aside class = "a_right" id="aside2"><div class="a_right" id="div_aside2"><p></p></div>
</aside>
<div class="center" id="div1">
</div>
</body>
解决方法
如果您尝试拉伸 <aside>
元素以重新创建 3 列布局,则应仅在 CSS
中完成此任务
body {
display: flex;
flex-flow: row nowrap;
}
aside {
flex-basis: 20%;
border: 1px #9bc solid;
}
#aside2 {
order: 3;
}
/* simulate an height for main element */
main {
height: 1234px;
flex: 1;
margin: 0 5px;
border: 1px #ccc solid;
}
<body>
<aside class = "a_left" id="aside1">
<div class="a_left" id="div_aside1">
aside left
</div>
</aside>
<aside class = "a_right" id="aside2">
<div class="a_right" id="div_aside2">
aside right
</div>
</aside>
<main> center </main>
</body>
否则,如果不是这种情况并且您想继续使用 JS 方法,则必须将脚本元素放在您要访问的元素之后
<script>
var y = document.getElementById("div1").offsetHeight;
document.getElementById("div_aside1").style.height= y + 'px';
document.getElementById("div_aside2").style.height= y + 'px';
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。