我的相邻flexbox列的高度有问题。
https://www.bootply.com/EOWiiOI1Xi(全屏查看以便更好地理解)
<div class="container">
<div class="row">
<div class="col-md-6 container">
<div id="div1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ex iure consequuntur. Soluta reprehenderit ab eos natus. Officiis corporis, cupiditate labore minima molestias mollitia obcaecati ex inventore odit officia quaerat. Ea sit hic quis nostrum consequuntur repellat ipsa tempore alias.
</div>
<div id="div2">
<h1>div 2 overflows</h1>
</div>
</div>
</div>
</div>
问题是我的col-md-6 div是页面的完整大小,并且遵循该逻辑,那么两个内部div不应该超过该高度,但是我的div2忽略了div1的高度。
div2的高度应为:父亲的身高 - div1身高; 但是div的高度是整个父母的身高。
我希望能够实现像我之前在本页左侧所做的那样。
(等待dyno加载以查看内容)
我正在使用boostrap 4.非常感谢。
答案 0 :(得分:0)
html,body{
height:100%;
width:100%;
padding:0px;
margin:0px;
}
.container{
height:100%;
width:100%;
}
#div1{
height:100px;
border:1px solid #ddd;
}
#div2{
height:calc(100% - 100px);
overflow:auto;
border:1px solid #ddd;
}
<body >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row container">
<div class="col-md-6 container">
<div id="div1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ex iure consequuntur. Soluta reprehenderit ab eos natus. Officiis corporis, cupiditate labore minima molestias mollitia obcaecati ex inventore odit officia quaerat. Ea sit hic quis nostrum consequuntur repellat ipsa tempore alias.
</div>
<div id="div2">
<h1>div 2 overflows</h1>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate ducimus possimus repellat tempore minus quis, officia suscipit harum. Iure, ipsa blanditiis? Fugiat, deleniti? Laudantium, minima explicabo? Qui velit, iusto delectus tenetur fuga quisquam ipsam. Consequatur natus sequi accusamus deleniti voluptatem aliquid fugiat repellendus vel. Natus quia magni ipsa, atque fugit laudantium vero quidem. Quos animi natus et voluptatum non excepturi sequi illum nisi quas doloremque deleniti maiores, consequatur minus quo est numquam. Alias numquam nostrum, eius quos voluptatibus nulla officia officiis aperiam excepturi, deserunt neque nobis ducimus doloribus. Magni distinctio minima temporibus et necessitatibus. Id et quisquam sequi optio recusandae vitae vel expedita similique. Voluptas saepe ex, cumque nesciunt velit esse voluptates unde rem obcaecati recusandae perferendis tempore quo repellendus magni incidunt iure neque! Deleniti fugiat consectetur perferendis aperiam ipsum unde? Iste, modi labore! Similique, vero doloribus sit in, adipisci, quo aperiam libero id dolore quia fugiat. Ut, itaque. Expedita et possimus exercitationem recusandae voluptatem dolorem, consectetur ipsam alias aperiam vero voluptas pariatur consequuntur facilis doloremque placeat! Quidem praesentium dolore aperiam mollitia sed? Quae reiciendis laudantium, minus veritatis unde animi illo magnam autem perferendis nisi tempore dolores repellat ea quasi, consequuntur neque placeat recusandae. Debitis architecto dicta reprehenderit perspiciatis mollitia nulla a voluptas magni beatae quaerat facere exercitationem ratione, deserunt atque, quibusdam fuga vel. Velit magni odio sunt molestiae id, reprehenderit necessitatibus ad minima esse repellendus. Cupiditate fugiat, nesciunt dolorem id tenetur voluptate fuga cum aut nemo, veniam, quasi facere. Provident est reprehenderit nobis quod? Minus architecto soluta autem quaerat corporis reiciendis, ratione harum, laboriosam labore vel voluptatem animi cumque quis dolorum necessitatibus vero et quidem. Nisi illum quibusdam incidunt inventore quod aliquid vitae doloremque perferendis nostrum tempore voluptates provident eius repellendus facere fugiat rerum soluta repudiandae quaerat repellat, minima nemo. Illo totam nobis quis commodi odit. Architecto voluptatibus animi consequatur adipisci amet, nihil nostrum ut tenetur hic esse dolorum, iste asperiores? Quasi recusandae autem quibusdam. Autem sapiente ab alias dolorem illum aperiam consectetur, aut iure omnis, ad explicabo impedit odit, tempore perferendis dignissimos. Asperiores impedit qui eius laboriosam facere nam? Consectetur quia nostrum dolorum necessitatibus aliquam enim ullam unde dolore quibusdam saepe cumque dolor, ipsum neque est ex similique velit ipsa excepturi facilis. Rerum minima non fuga delectus assumenda ducimus, amet iste aspernatur maiores deleniti maxime earum nesciunt a repudiandae, repellat magni sapiente consectetur voluptate corrupti rem alias, excepturi officia enim reiciendis. Numquam consectetur alias quam adipisci aut nostrum officia ipsa quidem delectus? Laboriosam itaque saepe pariatur consequatur aliquam voluptas ipsa iure autem quam dicta placeat repellat fugiat sequi quae debitis sit illo ea quos delectus atque nemo nihil quidem, explicabo perspiciatis. Ut officiis, in adipisci asperiores voluptas commodi consequuntur ipsa ab harum dignissimos quaerat est deserunt mollitia molestias nisi. Dolorum, ipsam. Veniam delectus repudiandae in ad esse, nulla reiciendis distinctio voluptatibus? Atque laborum et delectus? Consequuntur provident facilis in cupiditate, earum fuga blanditiis nam et, asperiores modi quos qui! Asperiores incidunt obcaecati animi accusantium sequi praesentium, necessitatibus nemo modi similique, blanditiis officiis molestiae adipisci ab? Labore, neque? Accusantium nihil unde labore error repellat sunt dolores minima in laudantium sapiente consequuntur quae, laboriosam accusamus facere commodi vero quam officiis impedit ipsam animi voluptas corporis! Molestias dolorem doloremque natus dolore perferendis, fugiat iusto velit harum odio autem tempora dicta, maiores, veritatis itaque nobis sequi iste corrupti nesciunt! Minima omnis qui hic, ducimus assumenda dignissimos iusto illum animi incidunt, porro beatae! Debitis doloribus velit dolores rerum corrupti illo mollitia, nihil deleniti earum, dolore aliquam aperiam nulla deserunt minus maxime iste totam corporis quasi asperiores? Blanditiis nostrum voluptate magni dignissimos perspiciatis soluta quibusdam sint optio maxime. Rem consequatur tenetur nam incidunt laborum nobis eligendi inventore a repellat animi eum neque, voluptate facere aut officiis fugit. Ipsam, numquam dolore. Id, fuga. Alias, eum. Voluptas minima deleniti consectetur libero quisquam odio alias nostrum nihil, quasi, at quaerat asperiores qui quis temporibus, illo hic aliquam. Odio magnam sed natus aperiam quidem eaque inventore nihil dolore, facere vel, iure quam. A excepturi maxime quia, fugiat nihil amet soluta ipsum nam error deleniti distinctio ullam aspernatur nisi quod neque necessitatibus suscipit veniam ipsa tempore facere, nostrum ex dolorem incidunt! Omnis nesciunt pariatur sed minus rerum voluptatibus, adipisci, aliquam animi deleniti nam corporis esse sapiente quis facilis in aperiam earum tempora velit odit laboriosam dolorum? Provident earum voluptatem id, sit quisquam, esse fuga vel inventore velit molestiae possimus sequi et architecto dolorum, quos autem quod ipsa cupiditate perspiciatis facere doloribus! Beatae eum consectetur, nam nisi et architecto id expedita error corporis obcaecati ut, dignissimos repellendus eos vel alias dolorum facere at iusto! Temporibus totam reiciendis consequuntur dolorum amet ab modi eveniet quaerat exercitationem, enim asperiores nam, iusto adipisci assumenda dolorem atque eos nobis numquam tempore recusandae rerum ut corrupti delectus? Vel quod aliquid officia nobis voluptatum minus nulla corrupti totam sed distinctio cupiditate ipsa, labore quidem inventore perferendis. Accusantium sint esse saepe eius unde sapiente maxime maiores voluptatem, beatae perspiciatis commodi sit, illo deleniti officiis consequatur blanditiis quasi consequuntur incidunt atque possimus ullam minima quo dignissimos ab? Harum explicabo cum excepturi obcaecati earum quo voluptas possimus sit repellendus ducimus, commodi, repudiandae recusandae molestiae mollitia error fugiat eveniet ipsa officia provident neque itaque. Pariatur, iusto nisi tempora libero natus necessitatibus a consectetur earum dolores vitae quaerat, rem quisquam sequi quia eveniet assumenda doloremque voluptatem? Provident, itaque ad adipisci cum delectus repellendus pariatur sed consectetur explicabo beatae molestiae a praesentium harum incidunt soluta quis tempore maiores deserunt ex. Ipsa maiores minus maxime animi eos provident quo saepe officia facilis, error amet ipsam eligendi similique debitis. Quaerat nemo dolorum, minus nostrum et aliquid ex perspiciatis, voluptatum corporis illo eum cum vel dolore. Aspernatur vitae animi necessitatibus nobis possimus quas quam quaerat tempora quisquam, beatae quae aliquid nam, fugit ex eligendi dicta natus consectetur laudantium praesentium placeat! Incidunt sapiente dolor velit numquam aut blanditiis laborum! Dolorem dolores doloribus eaque est, cumque ratione quia sit nobis corporis corrupti! Voluptate alias similique possimus veniam quod corrupti quos nulla quasi velit illum maiores porro sed voluptatem error cum itaque fugit, aliquid sunt cumque placeat? Soluta repellendus at numquam amet quae vero eius exercitationem! Est aliquid excepturi consequatur alias exercitationem ad obcaecati illo saepe laborum totam perspiciatis molestias, sapiente, magnam et necessitatibus delectus rerum odit vero blanditiis, sit nobis repellendus. Inventore consequuntur temporibus nesciunt quod hic tenetur laboriosam, impedit, necessitatibus mollitia cupiditate exercitationem perspiciatis architecto suscipit dolore odit quam totam velit voluptatibus. Voluptatum maiores perferendis laudantium voluptatem itaque accusamus vero enim commodi sed, dolore quisquam ad cupiditate a expedita architecto repellat est placeat laboriosam officia ut. Deleniti maxime distinctio tenetur ullam. Voluptas at quaerat enim pariatur ratione! Eligendi a sapiente perspiciatis voluptatibus sit assumenda aperiam doloribus facere quaerat eos quisquam quo dolores commodi saepe architecto adipisci, id quod officiis, earum sint inventore. Unde debitis provident at odit iste maiores earum eos, autem iure ad pariatur doloremque. Ex ab, doloribus modi quos nam minima commodi nemo, quod quae, libero fugiat similique. Aut facere, libero nam, ea possimus earum ipsum, odio quibusdam incidunt ut temporibus. Doloremque minima, ipsa alias harum magnam tempora saepe officia modi pariatur cum sequi, eligendi itaque maiores. Saepe, facilis ab quae laboriosam voluptas quos amet neque totam commodi est ipsam error nisi vero provident molestias quis reiciendis consequatur? Voluptatibus, consectetur doloremque. Blanditiis odit quisquam minus maiores tempora unde assumenda, ducimus doloremque quo quos provident beatae. Doloribus sunt dolore, rem iusto corrupti officia soluta. Ullam pariatur excepturi ducimus impedit. Vel modi ab reprehenderit tenetur harum suscipit eos dolorum assumenda! Maiores laboriosam accusamus quia, ducimus vitae earum sunt officiis quis ipsa repellat. Dolores eaque saepe asperiores quasi, unde placeat reiciendis maxime esse labore tenetur perferendis inventore tempora quas rem modi aut aliquid. Voluptatibus quidem minus eaque autem laboriosam odit, dolores nobis ipsam cupiditate id cum, eveniet alias. Temporibus dolorem, nisi ducimus sint qui modi animi ipsa odio et at, labore tempore natus repellendus aut quos commodi assumenda ullam eum, minima asperiores unde culpa. Autem nemo quam placeat, soluta accusamus a praesentium hic numquam molestias fugit veritatis quaerat eum in, vitae sapiente consectetur. Quas odio numquam nemo aperiam, ipsum consectetur fugit aliquam dolor quisquam earum! Libero repudiandae odio perspiciatis similique cumque cum aliquid illo, ex reprehenderit consectetur vel est exercitationem quae inventore accusamus molestias eos! Tempora eligendi est qui autem vero molestiae iure eius error accusantium sunt officia obcaecati a, rem animi totam laborum necessitatibus nisi excepturi perspiciatis distinctio. Veritatis architecto doloribus praesentium aspernatur, libero vero numquam rem molestias excepturi quisquam error voluptas ullam nostrum esse optio similique distinctio eveniet accusantium, culpa consequatur velit dicta! Sed temporibus facere dolorum quos minus, modi sequi, veniam rem natus voluptatum veritatis dolores pariatur est obcaecati, laudantium aperiam! In, commodi. At adipisci rem sapiente dolorum iusto quo magni ea magnam alias. Incidunt quam dignissimos qui maxime nemo eum culpa explicabo pariatur aliquam corrupti facere, porro molestiae recusandae sint unde doloremque. Explicabo in, recusandae similique ea alias ab animi! Hic eveniet maiores impedit blanditiis doloribus iusto? Illo quam dolorem ipsa ad voluptatem, doloremque accusamus laudantium tempore aut eligendi repudiandae deleniti eos sit iure ipsam, excepturi modi sunt dolore. Perferendis quae et, asperiores similique magni ipsa, exercitationem accusantium, maiores optio explicabo quam vitae dolore vel assumenda placeat? Ipsum dolorem in, repellendus ducimus, quibusdam voluptas numquam eaque id, cupiditate eveniet fugiat sed ut excepturi reiciendis ipsam illum atque similique quidem sapiente accusantium rem quo optio sunt dicta? Laborum, impedit adipisci libero numquam asperiores quod fugit autem iste ratione tenetur ipsa at maxime dolor fuga ab recusandae enim. Qui possimus eaque, eligendi quis omnis eius porro quae numquam. Eius tempora, nemo commodi cupiditate quis, veniam fuga aliquam perferendis harum, dolorem recusandae dignissimos quia quas assumenda fugiat optio ullam nostrum! Corrupti soluta vitae minima consectetur maiores deserunt quia veniam iste sit quo laborum, consequuntur ad, quos repellendus quas totam quod ut. Incidunt dicta maiores inventore pariatur voluptatum sit tenetur impedit non possimus porro, minus nam dolorum libero ratione facilis ipsam qui quos illum quod accusamus illo cupiditate sapiente? Ipsum laborum quae eveniet enim dolorum ea voluptate consequuntur error ratione pariatur? Sed debitis rem, aspernatur assumenda a ut quo aliquam quia quis modi tempore at excepturi, distinctio iure earum eaque ratione sunt quidem maxime exercitationem! Ullam iusto, reprehenderit corporis quia magni eaque iste corrupti esse distinctio sed mollitia deleniti pariatur rerum voluptatibus dolorem veniam ipsa quasi repellat. Dolorum quaerat ullam error nobis voluptatum minima. Ipsam esse nam, impedit, ea natus libero quae distinctio facere quidem doloribus sunt reprehenderit error eius, adipisci nobis cum incidunt delectus nemo! Aspernatur iusto totam perspiciatis soluta numquam! Dolores, quaerat! Ab neque veritatis dignissimos, nemo ipsam rem expedita praesentium odit enim, quasi eum magnam vitae. Corporis perspiciatis facilis nobis iusto iste illo quasi, odit tenetur itaque asperiores vero voluptates hic! Tenetur natus autem voluptatibus architecto molestiae sint nobis repellendus, accusamus ab! Quas, ut non ea explicabo voluptate et cumque repellendus natus totam tempora eius minus dolorum odit libero fugit sed aut ab alias? In praesentium, assumenda illo libero id velit tempore unde exercitationem, facilis voluptatem ducimus non quasi molestias nemo animi alias ipsum natus, quam nulla reiciendis numquam excepturi. Rem vel ipsum sed, eveniet quam repudiandae eius fugit asperiores. Ipsam ea consequuntur odit fugiat velit deleniti numquam itaque obcaecati laboriosam est ratione amet aliquid nulla dignissimos inventore, sapiente ipsum sit perspiciatis repellat possimus? Minus, suscipit. Aliquid obcaecati cupiditate veritatis nam. Tempora incidunt odit veniam eos dicta nihil, est totam! In non nobis aliquam sequi fugit, ut a, officia magni atque ipsa qui dolor quae sapiente aperiam sed, consectetur officiis totam fugiat autem blanditiis accusamus! Qui eligendi accusamus, laborum molestias nemo quasi earum soluta! Consequatur quaerat facere doloremque accusamus deserunt consequuntur veniam corrupti odio unde, quos modi repellendus amet tempora nostrum! Inventore pariatur minima eaque animi, nisi libero veniam neque. Eum odit ipsam nisi nesciunt explicabo? A consequuntur inventore architecto doloremque suscipit, iste est nihil officia quos qui corporis atque quas porro quidem delectus nostrum id, non exercitationem odio. Minus, earum officia nemo nostrum doloremque a ratione, mollitia tempore consectetur libero molestiae quas iste unde aut similique quibusdam. Quo nisi, minima odit blanditiis incidunt ut non quod, facilis alias tempora, quis officia soluta architecto aliquid enim iste modi libero? Porro accusantium eius enim error dolores nesciunt, beatae dolorem, at ratione quaerat dignissimos deserunt esse, corporis perferendis quod facere a eligendi cumque. Quidem architecto repudiandae voluptatibus dicta praesentium fugiat, labore ab earum ducimus. Error, corrupti maiores rerum neque obcaecati eius. Fuga neque quaerat similique harum corrupti laborum animi vitae repellat porro dolores? Dolorum beatae quaerat tenetur, quo velit fuga temporibus eligendi suscipit molestias eaque ab enim ratione obcaecati quas id rem vel assumenda nihil laudantium esse nostrum dignissimos perspiciatis! Pariatur soluta fugiat asperiores alias rem praesentium quos reprehenderit illo vero eveniet numquam iure dolore omnis repudiandae voluptatem dolorem ipsum dolor fuga voluptatibus molestiae accusantium, nostrum earum? Exercitationem expedita voluptate consectetur rem laborum nisi iure excepturi repellat suscipit! Vel molestias alias saepe voluptatibus numquam sed, omnis laboriosam vero, mollitia quod deleniti recusandae exercitationem cupiditate! Odio doloremque est ducimus magnam sunt vero, mollitia dicta eum vel amet inventore obcaecati laborum nemo dolorem id maiores quae magni quasi sapiente rem quaerat dignissimos facere reprehenderit? Repellendus aspernatur vel minus nostrum velit, totam, cumque dolores delectus sequi aliquam illo sapiente! Unde dicta, ex inventore eum architecto perferendis nobis dolorum ut fuga, voluptatem laudantium. Cum, voluptatum doloremque. Impedit perspiciatis eveniet architecto similique id unde nulla, repellat, error ipsum, inventore nesciunt deserunt necessitatibus? Excepturi dolorem sit voluptates iure quia tempora rerum cum officia quibusdam tenetur at, architecto repudiandae modi culpa labore alias deserunt eaque adipisci quidem error maxime dolore nostrum itaque! Optio dolorum, officia corporis incidunt cupiditate itaque temporibus consectetur culpa ipsam distinctio excepturi autem, nihil amet explicabo esse voluptatum deleniti suscipit aperiam quaerat, quis adipisci totam. Natus aliquam quam iusto quibusdam dolorum ipsum ab magni velit, vitae ipsam quod aut reprehenderit, ratione quos neque delectus rem. Cumque hic aut quaerat! Possimus voluptate reprehenderit corporis obcaecati rem at, tenetur dicta, maiores pariatur ea fugiat ullam provident distinctio harum illo perferendis soluta quisquam reiciendis hic debitis velit saepe sed? Amet reprehenderit neque laborum aspernatur? Laudantium magnam quaerat aliquam voluptate excepturi, provident, omnis iste placeat modi pariatur veniam? Ipsa numquam atque error excepturi perspiciatis est, dolorem facilis temporibus quos doloremque aut id. Laborum, dolor illum tempore soluta iste dolorum animi molestiae suscipit debitis eius nostrum, quos facilis quisquam cupiditate aut perspiciatis dignissimos asperiores nesciunt officia distinctio, aspernatur ab accusamus? Nostrum aut, harum voluptas unde nisi magnam sunt perferendis ea officia cumque numquam iste rerum, quod quo doloribus dicta? Nobis vitae ab enim ullam eum placeat reprehenderit nam porro sapiente, quam deleniti veniam voluptatum, illo laborum sint! Vitae ab necessitatibus aspernatur ipsam iste rem commodi quod laboriosam labore nemo, debitis voluptas modi adipisci officia et officiis voluptates culpa quia, obcaecati dolor magni ex doloribus quidem. Deserunt, possimus illo. Incidunt nam a at tempore, dolore dicta enim eos animi nemo iusto ut inventore reprehenderit ad? Dignissimos nisi fugiat quo ipsam, sapiente, alias repellat, nobis repellendus officiis recusandae voluptatum a autem consectetur expedita nihil porro accusamus tenetur molestiae facere cupiditate quis? Odio esse optio non amet vero magnam praesentium culpa, a magni deleniti eveniet ipsum beatae corrupti quibusdam doloremque deserunt minus maxime earum unde qui, error sed eius hic dolor? Quia dolorum molestias repellat aliquid numquam nam? Facere quia, officia cumque totam iste, eum soluta sint quidem sed repudiandae, consequatur reprehenderit quo nemo animi adipisci voluptatem vero. Repudiandae tempora eum deleniti modi explicabo magni optio consequatur vitae esse ratione! Illo porro dolorum minus itaque ab illum quibusdam, deleniti eius eaque sequi dolores facere quisquam, eveniet repellendus debitis, nam fugit placeat tenetur quis corrupti alias delectus cumque? Accusamus molestias cupiditate ab libero iste voluptatibus neque corrupti consectetur! Minima quidem optio repellat, quas tenetur eaque consequatur, aperiam vel recusandae cupiditate quod voluptatum mollitia quibusdam deserunt aliquam ducimus sapiente nisi odio provident officiis magni debitis similique eveniet? Sapiente quod maxime optio! Quisquam cupiditate incidunt sint eius iusto ducimus perferendis, esse ea adipisci expedita minus minima, aspernatur numquam quam quia eaque inventore dolorum? Voluptatum accusamus perferendis quam, repellat, laboriosam voluptates tempora consequatur itaque, ullam corrupti accusantium mollitia in. Tempore ipsum repudiandae suscipit totam ipsam ab explicabo fugiat omnis unde animi pariatur, quo atque, veritatis odit provident voluptate labore ullam. Reiciendis molestiae ipsa neque quos consequatur eos cumque ab quam totam officiis ex veritatis modi nemo doloremque fugiat laudantium, ullam exercitationem omnis corporis. Nihil quo dolor provident aperiam a nostrum, quos dicta suscipit amet. Porro sequi perspiciatis blanditiis. Alias dolore tempora quisquam repellendus commodi similique ipsa recusandae consequatur ipsam delectus autem, omnis voluptas repudiandae nulla officiis obcaecati sit ducimus dolores libero est. Accusamus dolorum ipsam architecto illum a quos neque veniam, cumque expedita odit quam magni error delectus autem, hic eum voluptatibus facere optio, non culpa animi? Optio ad vitae minima amet earum, eos quod aliquid voluptatem inventore, sequi ullam distinctio asperiores sapiente explicabo voluptate quam facilis veritatis similique nobis reiciendis iure. Alias facere molestias minus labore quas sapiente a illo fuga blanditiis aperiam voluptatem nihil magni praesentium unde ratione sunt, at aspernatur provident? Excepturi nam omnis ab nesciunt, obcaecati in molestias dolores error ipsum maxime voluptate magni doloribus non nostrum nisi, eius repudiandae neque suscipit, quod reiciendis. Voluptate nostrum facere, doloremque assumenda dicta, perspiciatis, sit illum quisquam magnam possimus dolorem sint voluptas doloribus optio impedit expedita omnis molestias porro aspernatur culpa ex neque earum. Rerum quae, eius doloribus harum ullam impedit recusandae voluptatibus error, excepturi consectetur quo amet iusto est eaque. Illo accusantium perspiciatis officia quidem doloribus natus odit libero atque temporibus, non, quas voluptatem, quasi voluptatibus laudantium eum labore veritatis consectetur perferendis? Vero quibusdam eveniet error natus beatae tempora veritatis asperiores aperiam blanditiis amet molestiae libero ratione quia quo aliquam atque, dolorem laborum hic facilis? Officiis, magnam delectus? Ex modi alias ipsa tempora id sit sequi sed! Laboriosam fugiat deserunt doloremque autem blanditiis ullam doloribus, exercitationem vero accusamus. Earum sequi repudiandae quae praesentium doloremque temporibus, labore, voluptatibus corrupti laboriosam non quos facilis voluptate facere nemo. Odio, numquam id. Itaque autem alias culpa, dolorem accusamus corporis quibusdam, officia error optio facere ex modi provident cupiditate fugiat quaerat ea quasi aspernatur harum odit ipsam aut soluta! Obcaecati cupiditate repudiandae nobis consequatur impedit, beatae excepturi laborum aliquid qui perspiciatis aperiam iure nulla at, sunt aspernatur cum cumque exercitationem eum commodi. Commodi nostrum atque, nisi delectus nulla ut tenetur soluta voluptas rerum excepturi cumque deserunt distinctio similique reprehenderit nesciunt! Voluptates excepturi vitae beatae explicabo dolores tenetur illum cumque delectus nulla dolorum, vel obcaecati veritatis harum soluta sapiente! Perspiciatis aut neque alias aspernatur quae. Explicabo commodi consequatur aliquam iusto libero voluptate totam nihil labore, laboriosam modi, in tempora ipsum, mollitia odit cumque aut. Accusantium assumenda saepe autem, voluptatibus provident est possimus, repudiandae dicta quo, dolor exercitationem libero magnam fugit ex quasi! Magni laborum ullam quam itaque dolorum error ipsa sit eius, amet repudiandae consectetur necessitatibus! Ea eius reprehenderit fugiat architecto placeat a qui dolor iusto eos, est distinctio inventore exercitationem aut quibusdam nam in quisquam. Assumenda illum optio libero vel error tempore, ratione molestiae quis dolore numquam, odio repellendus impedit. Vitae et rerum ipsum. Sed veniam alias officia sapiente dolores quam cum modi sit veritatis. A tempora nam, neque doloribus sequi hic atque amet quibusdam odit ullam sapiente quam mollitia fugit. Unde quia odio neque autem. Quidem sint voluptas facere inventore corporis. Repellendus, voluptate eaque iusto tempore maiores labore, necessitatibus nisi, temporibus voluptatibus quas fuga animi quisquam facilis illum repudiandae ad ut! Distinctio culpa similique, unde magni totam ratione, maxime molestiae quidem sint itaque voluptates repudiandae obcaecati quam praesentium consequuntur libero cumque nobis quo quis nihil perspiciatis dignissimos ullam qui. Minus magnam reprehenderit cupiditate soluta corrupti? Nostrum iste enim esse ab atque voluptas inventore dignissimos aperiam animi obcaecati iure veniam in, pariatur nulla nisi recusandae velit consectetur officia perferendis earum dolor sed molestias illum. Veritatis consectetur a nostrum ratione nulla. Culpa aperiam minus fuga, perferendis magni optio ipsa neque possimus commodi! Repellat reiciendis saepe quod assumenda architecto, ea explicabo! Veniam nihil beatae quia, quibusdam eius cupiditate numquam. Voluptas fugiat rem ab iure nobis incidunt magni architecto voluptate saepe doloribus cumque in sint molestiae nihil totam autem blanditiis suscipit adipisci quis vitae dolores ut, officia repudiandae similique! Repellendus a accusamus maxime fuga ex odit. Quasi pariatur sequi exercitationem qui in. Iste, aliquam minus? Similique sit minima iure error. Ipsam dolores eveniet recusandae voluptatum, aspernatur sapiente cum repudiandae placeat ad omnis perferendis cupiditate odio quos quia aliquid. Voluptatum alias enim quaerat mollitia sunt tempora consequatur hic unde atque esse voluptate a rerum obcaecati dolor soluta totam distinctio et optio aliquid, dolore aut? Libero assumenda nobis maiores doloribus fugit, debitis deserunt quis. Quas iure, ullam ipsa eligendi quod asperiores tempore mollitia fugiat hic culpa nulla corrupti maiores modi quae facilis. Obcaecati ipsa voluptatum fugiat corrupti modi consectetur unde reprehenderit magni, repellendus deserunt aspernatur ducimus eius quibusdam temporibus, est voluptates excepturi nostrum nobis, cupiditate a praesentium. Ad id harum earum eaque animi maxime reprehenderit debitis dignissimos, quia dicta, atque dolorem aliquam incidunt nobis numquam temporibus consequuntur, perferendis perspiciatis quo. Atque doloribus asperiores alias magnam aperiam amet quo quas libero recusandae dignissimos, dolores possimus ipsum nulla, minus voluptatibus itaque corrupti, voluptatum numquam nostrum odit magni natus obcaecati. Excepturi, ducimus perspiciatis sunt aliquid quis, voluptates facere eos reiciendis officia perferendis nulla id sit dorchitecto libero maiores quam adipisci? Voluptatem ea provident quidem commodi placeat, itaque, quod repellat asperiores libero nostrum facere officinus numquam ut deserunt ab necessitatibus ipsa! Dolores, porro vel eius ex saepe, quasi molestiuga iste architecto necessitatibus assumenda, aspernatur ex nostrum ad quas vitae ea perspiciatis, excepturi veniam nulla vel temporibus. Amet consequuntur culpa autem harum modi fugit esse ducimus delectus sunt molestias tempora hic reiciendis repudiandae praesentium unde, sit incidunt magni quasi et animi! Debitis quos quibusdam a. Minus nobis iste nam, aspernatur adipisci deleniti enim totam repellat fuga consectetur saepe rerum eaque voluptatem voluptate, unde, excepturi animi ab ratione. Totam alias dolor consequuntur molestiae.
</div>
</div>
</div>
</div>
<html>
答案 1 :(得分:0)
而不是height:100%
,在Bootstrap 4.1中使用flexbox flex-grow-1
类......
https://www.codeply.com/go/KihDr4DDR7
<div class="container">
<div class="row">
<div class="col-md-6 d-flex flex-column">
<div id="div1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ex iure consequuntur. Soluta reprehenderit ab eos natus. Officiis corporis, cupiditate labore minima molestias mollitia obcaecati ex inventore odit officia quaerat. Ea sit hic quis nostrum consequuntur repellat ipsa tempore alias.
</div>
<div id="div2" class="flex-grow-1">
<h1>div 2 overflows</h1>
</div>
</div>
</div>
</div>
flex-grow-1
类(包含在Bootstrap 4.1中):
.flex-grow-1 {
flex-grow: 1;
}
即使div1
的高度未知,这也有效。此外,container
并不意味着嵌套。