如何在不使用flexbox的情况下将“ div”拉伸到父母的整个高度?

如何使“内容”占据“包装器”块的整个空闲区域,并且“内容”具有滚动

条件:

1)无法将“ top”块设置为固定高度

2)不能使用弹性盒/网格

3)无法编辑“顶级”类样式。

请帮我解决这个问题。

https://jsfiddle.net/hr4oLda7/1/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrapper {
  height: 300px;
  width: 300px;
  border: 1px solid #000;
}
.top {
  padding: 24px;
  border: 1px solid #000;
  text-align: center;
}

.content {
  border: 1px solid red;
  height:100%;
  overflow:auto;
  
}
<div class="wrapper">
  <div class="top">Top</div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellat, nemo recusandae nostrum beatae molestias, fugiat deserunt similique maxime voluptatibus id quo in aut impedit illum nisi at repudiandae, inventore. Atque ut debitis deserunt possimus, eligendi molestiae iste qui doloremque quam quis. Ducimus dolor unde reiciendis porro quis qui illum vero quod natus omnis amet, repudiandae similique, dolorem temporibus consectetur illo praesentium maxime, cumque dicta saepe commodi corrupti provident laborum quam. Excepturi illum explicabo odit nihil quasi dolorum sapiente! Quasi quisquam hic odio expedita accusamus id, asperiores nam nulla fugit labore similique, ea, quo numquam odit. Velit ut sint assumenda vitae. Accusantium tempora inventore enim incidunt animi ipsam ullam culpa fuga asperiores quidem harum, repudiandae, voluptatibus, iusto laborum! Incidunt quam, nostrum placeat, suscipit libero quae earum veniam, quo soluta ipsam accusantium molestias. Vitae, neque sapiente iste sequi praesentium soluta non illo porro ea quibusdam maxime tenetur doloremque laborum excepturi ullam atque aperiam, expedita ab! Aperiam corporis veniam, similique alias veritatis obcaecati ratione dolores temporibus error fugiat voluptas nobis distinctio officia consequuntur et velit unde illo tenetur quidem sint id itaque in. Vero minus, temporibus accusamus quibusdam optio cum tempora ad beatae accusantium fugiat, laboriosam voluptatem voluptas nostrum officiis, hic. In deserunt fugiat, recusandae, temporibus aut quibusdam ex rem ut perspiciatis quisquam quam laudantium consequuntur quaerat excepturi commodi nobis optio tenetur ducimus ea voluptatum a facilis. Laboriosam harum maxime neque magnam, debitis obcaecati, amet quasi quod dolores aliquid, suscipit. At ea adipisci cum minima autem, alias, voluptatibus optio animi tenetur fugit eius dignissimos laboriosam blanditiis illum fugiat esse. Harum nobis illum magnam voluptatem dolore ut maiores veritatis maxime possimus, dolorum consequuntur, cumque quae perspiciatis quis animi aliquid officiis laboriosam ad distinctio laudantium tempora quibusdam recusandae! Sint ducimus repellat harum in soluta deserunt cupiditate rerum reiciendis nostrum non veniam id quas aliquam cumque labore animi corporis maxime consequuntur quo molestiae ad voluptatem, facere dolorem! Facilis, animi quaerat fuga minus eum dignissimos fugit similique, maiores laborum eaque aliquid sapiente quisquam, dolorum quasi alias tempora dolore esse ullam praesentium, eos itaque mollitia ipsa! Debitis, natus velit quos hic cupiditate amet ut eaque totam sint, a. Aperiam unde sapiente non eos odio voluptate impedit error nobis, modi saepe, velit vero ea, deserunt reiciendis tempore rem praesentium inventore recusandae laborum consequatur debitis dolores sed at. Quo cum, natus atque vero voluptate beatae minima ipsam autem quia voluptatem eligendi maiores vitae ipsum recusandae, consectetur animi culpa totam ducimus inventore. Asperiores cupiditate soluta officia officiis nesciunt veritatis reprehenderit ratione neque, libero ipsam nulla esse maxime repellendus magni provident fugit atque? Expedita incidunt, provident deleniti cumque dignissimos quas! Ratione eum iste, fuga minima tempora nemo aperiam ipsa excepturi modi voluptatem! Deleniti eius iusto reiciendis deserunt assumenda facilis, velit numquam explicabo aspernatur fugiat accusamus aliquid eaque officia quod, provident voluptate facere minima quis pariatur voluptatem doloribus temporibus. Ullam doloremque suscipit sint quidem quos debitis porro magni doloribus quisquam labore voluptatem natus, vitae itaque, dolores consectetur assumenda, asperiores iusto. A sit, cum fugiat magnam blanditiis tenetur quo beatae mollitia facere earum esse, dicta commodi totam ipsum recusandae provident dolor ullam! Veritatis dolores quae aperiam. Ratione ad deserunt voluptas voluptate reiciendis odio harum, et autem itaque commodi ab voluptatem amet dolore impedit earum adipisci eveniet distinctio? Magnam deserunt fuga, quidem, ratione, fugit natus repellendus ducimus quia nobis consectetur praesentium odit autem ad sint blanditiis nostrum perspiciatis cumque iusto quod laudantium minus. Minus nisi voluptas vitae voluptates laudantium, saepe molestiae explicabo quasi autem ipsum placeat et sint doloremque, quam ratione necessitatibus velit beatae! Reiciendis, enim totam quas placeat sunt, error rem excepturi necessitatibus quo officia atque laborum, sint dolorum ut consequatur impedit quasi esse quisquam nobis blanditiis quis ad reprehenderit, repellendus modi. Saepe doloribus maxime enim atque esse dolores ea in odit architecto! Recusandae quis sit ratione, id porro. Distinctio atque, minima praesentium mollitia nesciunt quae, ratione ipsa necessitatibus minus quasi libero est eius accusamus quos ut vero culpa cum quod eos illo magni maxime. Magni aspernatur suscipit atque, enim consequuntur temporibus repellendus modi pariatur molestias labore perspiciatis dolore autem, ratione quibusdam alias ab magnam quia non repellat tenetur possimus nulla iure dolores consectetur. Enim, officia consequuntur perferendis ducimus? Molestias omnis at, atque iusto veniam corporis sit iste repellendus voluptas! Beatae, excepturi voluptatem recusandae illum consequuntur cum repudiandae distinctio minus fuga! Itaque doloremque officiis fugit quidem tempore aperiam facere perspiciatis eos praesentium aspernatur, impedit, quasi et. Error iure fuga laboriosam commodi aliquid magni fugiat sed odio tenetur doloremque cum excepturi veritatis inventore quidem numquam esse dolorem, quae, veniam assumenda similique animi! Quia unde, dicta illo laboriosam odit fugiat itaque minima, officia odio error modi numquam, id. Quasi dicta, ab autem corporis ex. Hic, doloribus cumque. Consequuntur repudiandae modi, natus, dicta earum maxime unde ea tempora, eligendi enim necessitatibus quia non soluta veniam molestias error voluptatem iure, obcaecati praesentium rem! Tenetur ipsam assumenda incidunt distinctio nesciunt. Rem architecto atque repellendus alias, ex, vero vel tempora, tempore nisi magnam consequatur laboriosam dicta reprehenderit odit! Maiores ducimus eaque modi commodi aliquam libero omnis, quod, praesentium excepturi, at illo asperiores perspiciatis minima, eveniet magnam. Dolore, illum. Eius labore impedit blanditiis laborum modi quisquam consequuntur nihil earum itaque aut accusantium quas magnam placeat, totam reiciendis animi ipsam dolore. Assumenda ex esse recusandae ratione explicabo architecto, amet beatae labore magni ipsa, animi. Quisquam hic provident voluptates pariatur incidunt dolorem vero veritatis adipisci recusandae sunt error at, inventore libero porro nulla sapiente, eius quis quos itaque? Illum sequi aperiam iure officia, corporis, totam architecto quidem dignissimos deserunt, dolorum labore sapiente iusto saepe reprehenderit consequuntur. Unde ea deleniti quis est rerum voluptas molestiae explicabo quam, repellendus eius quo pariatur in temporibus placeat repellat, voluptates eligendi. Unde culpa voluptas, sit neque veniam consequatur quaerat facilis laborum doloribus at veritatis atque et hic cumque fuga corporis, fugiat deserunt. Assumenda corporis sequi commodi aut natus, odio nesciunt voluptates, nam dolorem repellendus similique vero iusto rerum, odit cum illum. Quas similique omnis, quae mollitia ea ad adipisci autem tempore. Laboriosam ipsa molestias voluptas tempora laudantium maxime praesentium. Maxime iste sequi, incidunt, illo similique ducimus quas.
  </div>
</div>
```
评论