css布局高度滾動條

圖片描述

最終想達到的效果是這樣，左中右div高度100%撐滿全屏，然后右下一小塊高度超出之后內(nèi)部出現(xiàn)滾動條而不是瀏覽器的滾動條

目前是給右下一小塊給定了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">
            結(jié)果
          </li>
          <li class="item">
            結(jié)果
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>
</html>

回答

編輯回答

情皺

這是你想要的樣子嗎？如果是的，下面就是代碼：

<!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>結(jié)果</li>
                <li>結(jié)果</li>
                <li>結(jié)果</li>
                <li>結(jié)果</li>
                <li>結(jié)果</li>
                <li>結(jié)果</li>
                <li>結(jié)果</li>
                <li>結(jié)果</li>
                <li>結(jié)果</li>
            </ul>
        </div>
    </div>
</div>

</body>
</html>

2017年1月9日 18:05

編輯回答

雨蝶

充分利用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>

圖片描述

2017年1月8日 08:59

編輯回答

冷咖啡

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

.r {
  width: 200px;
  background-color: aquamarine;
  /* ↓加上這兩個↓ */
  display: flex;
  flex-direction: column;
}

.list {
  overflow: auto;
  /* ↓去掉這個↓ */
  /* max-height: 607px; */
}

2018年5月29日 08:07