html div 上左右布局 右侧布满

刚才看错了 你这颜色选得，我辨色能力没那么强。左右布局的div两个加一起的宽度不能大于父容器的宽度，要不然会出现换行的现象的。

#div_aside {

    float: left

    width: 20%

    height: 100%

    background-color: aliceblue

}

#div_general_report {

    float:left

    width:80%

    height:100%

    background-color: aqua

}

这样就行了

1、浮动布局：

<style>

html,body{margin:0 padding:0}

.div1 {float:left width:80% height:600px background-color:red}

.div2 {float:left width:80% background-color:green}

.div3 {float:right width:20% background-color:blue}

</style>

<div class="div1">宽80%，高600px</div>

<div class="div3">宽20%，高随内容</div>

<div class="div2">宽80%，高随内容</div>

<br style="clear:both"/>

2、绝对定位：

<style>

html,body{margin:0 padding:0}

.div1 {position:absolute left:0 top:0 width:80% height:600px background-color:red}

.div2 {position:absolute left:0 top:600px width:80% background-color:green}

.div3 {position:absolute right:0 top:0 width:20% background-color:blue}

</style>

<div class="div1">宽80%，高600px</div>

<div class="div2">宽80%，高随内容</div>

<div class="div3">宽20%，高随内容</div>

3、flex布局：

<style>

html,body{margin:0 padding:0}

.box {display:flex align-items:flex-start}

.left {display:flex flex-direction:column flex:0 1 80%}

.div1 {flex:0 1 600px background-color:red}

.div2 {flex:auto background-color:green}

.right {flex:auto background-color:blue}

</style>

<div class="box">

   <div class="left">

      <div class="div1">宽80%，高600px</div>

      <div class="div2">宽80%，高随内容</div>

   </div>

   <div class="right">宽20%，高随内容</div>

</div>

---