纯css实现左右分栏宽度拉伸

最新推荐文章于 2023-06-14 19:41:28 发布

原创

最新推荐文章于 2023-06-14 19:41:28 发布

· 757 阅读

1 ·

版权

文章标签：

#javascript #css

本文详细探讨了如何仅使用CSS实现一个灵活的、可以拉伸的左右分栏布局，适用于不同屏幕尺寸。通过运用浮动、flexbox或grid布局技术，实现了内容区域随窗口大小变化而自动调整的效果，旨在提升网页的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="departmentOrganizationalStructure commonPageBox">
    <!-- 左边 -->
    <div class="column-left">
      <div class="resize-bar scrollClass"></div>
      <div class="resize-line"></div>
      <div class="resize-save scrollClass">
      </div>
    </div>
    <!-- 右边 -->
    <div class="column-right">
    </div>
  </div>
</template>
<style lang="scss" scoped>
.departmentOrganizationalStructure {
  min-width: 1270px;
  height: 100%;
  overflow: hidden;
  .column-left {
    max-width: calc(100% - 700px);  //设置最大宽
    min-width: 200px; //设置最小宽
    height: 100%;
    background-color: #fff;
    position: relative;
    float: left;
    .resize-save {
      position: absolute;
      top: 0;
      right: 5px;
      bottom: 0;
      left: 0;
      paddin