css的布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0px;
    }
    .sliderbar{
      width: 100px;
      background-color: yellow;
      position: absolute;
      left: 0px;
      top: 0px;
      min-height: 100%;
      bottom: 0px;
      right: 0px;
    }
    .main{
      width: 100%;
      height: 1500px;
      background-color: red;
      padding-left: 100px;
    }
  </style>
</head>
<body>
  <div class="sliderbar">
    haaaaa
  </div>
  <div class="main">
  </div>

</body>
</html>

以上代码效果是下面图片这样的,,原本是不知道右侧红色区域的高度,但是右侧高度绝对大于电脑屏幕高度,,现在我想把黄色的这块延伸到内容区的底部,css可以解决吗??求解答,谢谢

图片描述

阅读 2.7k
2 个回答

1、把黄色区域div放置于红色div里面
2、黄色区域设置一个float:left就好了,,不需要什么absolute定位

在你使用绝对定位的基础上:确定红色区域是内容区域情况
布局:将黄色区域放在红色区域内部
css: 红色区域相对定位,因为你是要延伸到内容的底部

    黄色区域修改下:height: 100%; 你使用min-height达不到你预期的效果的
    
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题