2025-04-12
flex首尾固定，中间滚动布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      /* 设置 html 和 body 高度为 100%，以便容器能占满整个视口 */
      html,
      body {
        height: 100%;
        margin: 0;
      }

      /* 父容器，使用 Flexbox 布局，垂直排列 */
      .flex-container {
        display: flex;
        flex-direction: column;
        height: 100%;
      }

      /* 顶部区域，固定高度 */
      .header {
        height: 50px;
        background-color: lightblue;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /* 中间区域，占据剩余空间，内容超出时显示垂直滚动条 */
      .content {
        flex: 1;
        /* padding: 10px; */
        background-color: lightgray;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .content-title {
        height: 50px;
        background-color: rgb(12, 126, 163);
      }
      .content-inner {
        flex: 1;
        overflow-y: auto;
      }

      /* 底部区域，固定高度 */
      .footer {
        height: 50px;
        background-color: lightgreen;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>

  <script>
    // 为了方便演示，这里使用 JavaScript 动态生成大量内容
    window.onload = function () {
      var contentInner = document.querySelector('.content-inner')
      for (var i = 0; i < 100; i++) {
        var p = document.createElement('p')
        p.textContent = '这是第 ' + i + ' 行内容'
        contentInner.appendChild(p)
      }
    }
    let str1 = '10.5.4.11'
    let str2 = '10.5.4.2'
    // console.log(str2 > str1)
    // let str1 = '12.1.0-alpha.20305'
    // let str2 = '12.1.0-beta.2'
    // let str2 = '12.1.0.20305'
    console.log(str2 > str1)

    function compareVersionStrings(str1, str2) {
      const arr1 = str1.split('.')
      const arr2 = str2.split('.')
      const maxLength = Math.max(arr1.length, arr2.length)
      for (let i = 0; i < maxLength; i++) {
        const num1 = parseInt(arr1[i] || 0, 10)
        const num2 = parseInt(arr2[i] || 0, 10)
        if (num1 > num2) {
          return 1
        } else if (num1 < num2) {
          return -1
        }
      }
      return str1 > str2 ? 1 : str1 < str2 ? -1 : 0
    }

    const result = compareVersionStrings(str1, str2)
    if (result === 1) {
      console.log(`${str1} 大于 ${str2}`)
    } else if (result === -1) {
      console.log(`${str1} 小于 ${str2}`)
    } else {
      console.log(`${str1} 等于 ${str2}`)
    }
  </script>
  <body>
    <div class="flex-container">
      <!-- 顶部区域 -->
      <div class="header">这是顶部区域</div>
      <!-- 中间区域，放置大量内容以触发滚动条 -->
      <div class="content">
        <div class="content-title">我是内容的固定标题</div>
        <div class="content-inner"></div>
      </div>

      <!-- 底部区域 -->
      <div class="footer">这是底部区域</div>
    </div>
  </body>
</html>
上次更新: 2025-12-04