Question

这是我遇到的问题：由于内部元素的内容，我的主要元素的高度相当长。但是，我的aside元素（边栏）的内容要少得多，所以要短一些，这在美学上并不令人满意。

如何使旁置元素的高度等于主元素的高度（可能在所有情况下，当主元素中包含更多内容时）？

这是我的主要内容：

main {
        display: block;
        width: 75%; 
        float: left;
    }

这是我的旁白：

aside {
    display: block;
    background-color: #fff;
    width: 21%;
    float: right;
    padding: 2%;    
}

为aside元素设置特定的高度是行不通的：当我向主要元素添加内容时，aside元素的height属性变得过时了。

Answer 1

如果有一个环绕的div，请使用display: flex;

.wrap{
  display: flex;
 width: 100%;
}
.main {
  border: 1px solid red;
    width: 75%;
    min-height: 500px;
}
.aside {
  border: 1px solid blue;
display: block;
background-color: #fff;
width: 21%;
float: right;
padding: 2%;    
}

<div class="wrap">
  <div class="main">
Main
  </div>
  <div class="aside">
Aside
  </div>
  
</div>

Answer 2

使用javascript：

window.addEventListener("load", resizeAside);
window.addEventListener("resize", resizeAside);

function resizeAside(){
   var mainHeight = document.getElementsByTagName('main')[0].height;
   document.getElementsByTagName('aside')[0].height = mainHeight;
}

有什么方法可以使元素高度等于主要元素高度？

2 个答案: