问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css布局高度滚动条

头像
BiggerKai
    180104070

    图片描述

    最终想达到的效果是这样，左中右div高度100%撑满全屏，然后右下一小块高度超出之后内部出现滚动条而不是浏览器的滚动条

    目前是给右下一小块给定了max-height达到的效果，但是这样满足不了屏幕高度不同
    请问下各位大大还有没更好的解决方案呢？

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body,
    html {
      margin: 0;
      padding: 0;
      height: 100%
    }

    .container {
      height: 100%;
      display: flex;
    }

    .l {
      width: 300px;
      background-color: chocolate;
    }

    .m {
      flex: 1;
      background-color: darkgoldenrod;
    }

    .r {
      width: 200px;
      background-color: aquamarine;
    }

    .search {
      height: 200px;
      background-color: deepskyblue;
    }

    .list {
      overflow: auto;
      max-height: 607px;
    }

    ul {
      margin: 0;
      padding: 0;
    }

    .item {
      height: 500px;
      line-height: 500px;
      text-align: center;
      border-bottom: 1px solid black;
      list-style: none;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="l"></div>
    <div class="m"></div>
    <div class="r">
      <div class="search">搜索</div>
      <div class="list">
        <ul>
          <li class="item">
            结果
          </li>
          <li class="item">
            结果
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>
</html>
    csshtml
    阅读 5.1k
    3 个回答
    得票最新
    头像
    兔子饿了
      1.3k1311
      ✓ 已被采纳

      明明都用了flex...
      最小改动：

      .r {
  width: 200px;
  background-color: aquamarine;
  /* ↓加上这两个↓ */
  display: flex;
  flex-direction: column;
}

.list {
  overflow: auto;
  /* ↓去掉这个↓ */
  /* max-height: 607px; */
}
      头像
      xiatianlong
        2.2k42854

        clipboard.png

        这是你想要的样子吗？ 如果是的，下面就是代码：

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html, body {
            height: 100%;
        }

        #content {
            position: relative;
            height: 100%;
        }

        #left, #center, #right {
            height: 100%;
        }

        #left {
            background-color: chocolate;
            width: 30%;
        }

        #center {
            background-color: darkgoldenrod;
            width: 50%;
            position: absolute;
            left: 30%;
            top: 0;
        }

        #right {
            width: 20%;
            position: absolute;
            left: 80%;
            top: 0;
        }

        #right #right-top {
            height: 30%;
            background-color: deepskyblue;
        }

        #right #right-bottom {
            height: 70%;
            background-color: aquamarine;
            overflow-y: auto;
        }

        #right #right-bottom ul li {
            display: inline-block;
            width: 100%;
            text-align: center;
            padding: 20px 0;
            border-bottom: 1px solid #757575;
        }
    </style>
</head>
<body>

<div id="content">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right">
        <div id="right-top"></div>
        <div id="right-bottom">
            <ul>
                <li>结果</li>
                <li>结果</li>
                <li>结果</li>
                <li>结果</li>
                <li>结果</li>
                <li>结果</li>
                <li>结果</li>
                <li>结果</li>
                <li>结果</li>
            </ul>
        </div>
    </div>
</div>

</body>
</html>
        头像
        jsoncode
          4k105890

          充分利用calc

          <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>demo</title>
    <style>
    body {
        margin: 0;
    }

    .main {
        height: 100vh;
        overflow: hidden;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
    }

    .item1 {
        width: 300px;
        background-color: #f00;
    }

    .item2 {
        width: calc(100% - 300px - 200px);
        background-color: #0cc;
    }

    .item3 {
        width: 200px;
        background-color: #cc0;
    }

    .search-box {
        height: 200px;
        background-color: #0c0;
    }

    .result-box {
        height: calc(100vh - 200px);
        overflow: auto;
    }

    </style>
</head>

<body>
    <div class="main">
        <div class="item1">
            <div>test</div>
            <div>test</div>
        </div>
        <div class="item2">
            <div>test</div>
            <div>test</div>
        </div>
        <div class="item3">
            <div class="search-box">
                <div>test</div>
                <div>test</div>
            </div>
            <div class="result-box">
                <div style="height: 1000px;">test</div>
            </div>
        </div>
    </div>
</body>

</html>

          图片描述

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题
          宣传栏