html css position 两栏 三栏布局

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

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

    ul {
      list-style: none;
    }

    /* body {
      background: url('bg.jpg') no-repeat 0 0/100%;
    } */

    .clearfix::after {
      content: '';
      display: block;
      clear: both
    }

    .container {
      border: 1px solid #333;
      overflow: hidden;
      position: relative;
    }

    .container .left {
      position: absolute;
      left: 0;
      top: 0;
      width: 200px;
      background-color: red;
      height: 10000px;
      margin-bottom: -9990px;
      /* 此最后两行实现左右栏高度随与main高度等高*/
    }

    .container .right {
      position: absolute;
      right: 0;
      top: 0;
      width: 200px;
      background-color: green;
      height: 10000px;
      margin-bottom: -9990px;
    }

    .container .main {
      background-color: blue;
      margin: 0 200px;
      padding: 0 20px;
      /*  main宽度随视口宽度自适应*/

    }
  </style>
</head>

<body>
  <div class="container clearfix">

    <div class="main">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic perspiciatis laborum ullam sapiente aliquam officiis
      itaque facilis pariatur sint, et minima inventore delectus obcaecati sed voluptatibus rerum assumenda tempora
      optio magni, saepe nesciunt, deleniti cumque quis ab! Molestias atque voluptatibus magni laborum magnam distinctio
      quos incidunt repudiandae quis, sapiente consectetur voluptatum, assumenda dolorum optio recusandae suscipit illum
      sint doloribus facilis ad. Libero nisi, sit iure dolor accusantium minima nemo sed reprehenderit veritatis tempore
      asperiores impedit tenetur non ut repellat ab doloremque earum id. Ad beatae, corporis quisquam iste ab voluptates
      dignissimos impedit natus ipsa fuga deleniti porro ullam veritatis numquam, quis accusamus odit itaque praesentium
      debitis quae recusandae ducimus aut optio! Blanditiis quia corrupti consequuntur aperiam praesentium eveniet sed
      facilis, maxime impedit quae molestiae minima aliquid asperiores atque aut velit excepturi nemo, fugiat, quidem
      iure? Ratione reprehenderit natus cupiditate eius nobis pariatur esse voluptates optio at fuga? Eius quo quisquam
      deserunt provident harum magni, blanditiis est libero error et fuga dolore pariatur amet id labore excepturi
      consequuntur ea distinctio ex reiciendis dolor tenetur cum cumque? Asperiores, accusamus laboriosam vitae vel
      voluptate, quos velit quo ut ipsum quod ex. Officia corrupti ut dolore magnam eligendi nihil nisi pariatur
      voluptate. Corrupti pariatur placeat consequatur veniam. Deleniti, voluptas aperiam aliquam harum quia
      praesentium! Quibusdam asperiores iste commodi suscipit! Non possimus soluta impedit praesentium quo excepturi cum
      consectetur delectus quidem minima? Ad doloremque odio, ipsum praesentium voluptatum, mollitia ut laudantium
      maxime ratione tempora incidunt saepe quas eum. Quo, sint excepturi suscipit omnis possimus dolorum est voluptas
      fugiat nulla error et beatae quibusdam ea expedita incidunt? Vel expedita debitis cumque quidem, harum tempore
      culpa sed quibusdam nisi nulla nam ea hic illum possimus numquam odio provident aperiam deserunt accusantium sit
      assumenda suscipit aut corrupti porro. Molestiae, quos nisi quibusdam enim reiciendis ullam laboriosam blanditiis
      mollitia? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum, excepturi consectetur sapiente
      delectus vitae praesentium blanditiis eaque, hic dicta sed beatae nostrum amet. Harum, sed quis maxime debitis
      corrupti cumque obcaecati repellendus necessitatibus repudiandae tempora delectus odio qui dignissimos earum
      voluptatem aspernatur quibusdam accusamus voluptas quam quidem enim magnam. Ad eum, quo tempora consectetur esse
      quaerat doloribus id odit ducimus, eos error tenetur voluptatem iure quis atque adipisci voluptates itaque. Odio
      ipsa repellat, voluptates voluptatem ad pariatur maiores illum atque explicabo earum placeat. Voluptatem rerum
      culpa aliquid a ad omnis perspiciatis non deleniti voluptate ut, error nesciunt enim pariatur! Eius cum impedit,
      iusto dicta architecto autem rem. Saepe deserunt quas nulla magni, tempore aliquam obcaecati vel, dolore ex
      asperiores, quia beatae iusto reprehenderit facere earum itaque exercitationem explicabo corporis facilis
      nesciunt! Rerum officiis porro mollitia officia quae consequatur tempora, nihil quibusdam. Ex officia numquam
      eaque dicta voluptatem ab magni natus praesentium sit sint eos nobis voluptatibus inventore ut cum voluptates
      quisquam dignissimos repellat exercitationem pariatur beatae vel, molestiae ea sunt. Dicta unde inventore iste
      explicabo quos id praesentium qui, tempore consectetur voluptas alias amet nihil vero iure sequi facere, quas
      porro vitae. Quia eveniet aliquid similique provident quod corporis laboriosam voluptas! Iusto suscipit expedita
      necessitatibus vitae facilis autem esse aperiam quis excepturi error illo, molestiae vero aut at earum. Laborum et
      maxime, illum veniam non labore tenetur illo reprehenderit ab sunt aliquam officiis totam inventore corrupti
      perferendis. Adipisci sapiente maxime neque iste autem dicta dolore nihil deleniti consequuntur illo, dignissimos
      recusandae, porro incidunt! Ab atque tempora quaerat inventore doloribus! Necessitatibus eaque rerum sapiente
      deserunt excepturi qui cupiditate quia dolor obcaecati ex commodi, praesentium ipsam fugit alias ea doloremque
      quis minus rem et laboriosam magnam. Ab, excepturi! Repudiandae quaerat, iure illo architecto eum, voluptatibus
      quas laudantium illum corrupti facere quod libero!
    </div>
    <aside class="left">Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam quibusdam perferendis odit
      similique nobis doloremque! Expedita architecto temporibus veritatis quam, facere quas beatae, nihil maiores
      repudiandae corporis eum, aliquid accusamus tenetur odit nisi ipsum. ?</aside>
    <aside class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic ut porro, nobis labore velit,
      repellat, iste excepturi vel modi sit maiores? Veniam pariatur quod vitae cumque impedit alias adipisci corporis
      laudantium commodi assumenda sint fuga modi ipsam,
      distinctio vel. Quam?</aside>
  </div>
</body>

</html>

  

posted @ 2024-03-18 16:36  howhy  阅读(3)  评论(0编辑  收藏  举报