css - 纯 CSS : calc height based on height of other divs

Question

我已经看到一些关于我使用 Javascript 的需求的答案，但我想知道仅使用 CSS 是否可行。

div1+div2+div3=全屏。

我想要这样的东西:

div2 高度 = calc (100vh - (div1_height + div3_height))

div1_height 和 div3_height 不是静态的，不能只用像素值替换。

这在 CSS 中可能吗？

Answer 1

有两种方法可以解决这个问题。

• FlexBox(有限支持)
• 职位(IE 7 支持)

我敢打赌会有 100 多个答案谈论 FlexBox，所以我会给你一个带有 positions 的解决方案。

1. div1 和 div3，正如我所假设的，它们有一些固定的高度。并假设它们为 header 和 footer。
2. div2 具有自由流动的内容。

为实现这一点，我们结合使用了固定布局和流动布局。我也写了一篇文章详细介绍它:Science behind Fixed-Fluid Layouts .所以解决方案是:

#div1, #div3 {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background: #ccf;
  padding: 10px;
}

#div3 {
  top: auto;
  bottom: 0;
  background: #99f;
}

body {
  padding: 50px 0;
}

<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>

好的部分是，这也是响应式的。在不同的分辨率下检查以下内容:

#div1, #div3 {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background: #ccf;
  padding: 10px;
}

#div3 {
  top: auto;
  bottom: 0;
  background: #99f;
}

body {
  padding: 50px 0;
}

<div id="div1">Div 1</div>
<div id="div2">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam perspiciatis, quos illo non, eum dolor maiores dignissimos fuga quasi minus aperiam. Ipsa veritatis reprehenderit harum obcaecati fuga natus similique quod.</p>
  <p>Ab ex quaerat rem nobis eligendi ut qui deserunt ipsam, magnam asperiores, tenetur totam inventore, distinctio a. At ea facilis aut labore esse, error exercitationem natus eaque aliquam rem sapiente.</p>
  <p>Consequuntur ipsa, molestias explicabo, soluta tempore nobis! Voluptatem, in illum accusantium. Quas iusto est, esse deserunt expedita iure voluptatum modi? Optio rerum culpa ipsam delectus nihil odio, at iusto aperiam.</p>
  <p>Quibusdam illo, pariatur alias repudiandae accusamus, nisi enim suscipit sint in ex animi cumque maxime, totam natus est maiores! Excepturi deleniti deserunt in expedita placeat provident fuga nostrum qui illum.</p>
  <p>Necessitatibus repudiandae libero itaque quo soluta minus nostrum tenetur maiores dicta voluptas, mollitia perspiciatis amet veniam, ex dolorem nobis. Quas consectetur, praesentium aliquam vel, enim nesciunt quibusdam officiis unde asperiores?</p>
  <p>Sunt, quas, deserunt consectetur facilis reprehenderit tempora tenetur officiis assumenda at aliquid sed cumque unde quibusdam expedita magni! Numquam recusandae rerum consectetur cupiditate similique adipisci, quas possimus modi nulla atque.</p>
  <p>Facere qui quisquam voluptatibus a est aut, laudantium praesentium! Fugit amet blanditiis soluta quaerat, modi atque incidunt voluptas sed ea nisi dolores accusamus adipisci doloremque tempore doloribus, voluptates, odit quisquam.</p>
  <p>Quos numquam quaerat beatae facilis et optio odio mollitia, eveniet natus unde, aut rerum dolore aspernatur delectus praesentium cumque, quis temporibus? Repellendus reprehenderit, non voluptatibus obcaecati eius et delectus, eveniet!</p>
  <p>Modi nesciunt eaque ratione? Voluptatum deleniti molestiae facere suscipit veniam ratione velit quas nobis a expedita commodi itaque fuga doloribus ab reiciendis hic cum enim est optio, consequatur. Maxime, accusamus!</p>
  <p>Dolore laboriosam atque dicta omnis ullam temporibus, quibusdam iusto facere dolor aspernatur quasi neque, placeat cumque at perferendis rerum et totam recusandae dolorem nostrum culpa vitae. Earum non doloribus exercitationem.</p>
  <p>Perferendis, eius, laudantium. Perspiciatis praesentium neque corrupti at, adipisci saepe laborum quia obcaecati rem eos ipsum doloremque reprehenderit minus consequuntur explicabo iure labore, dolor, nostrum aliquid incidunt quod voluptas, eum?</p>
  <p>Magni a enim ex, voluptate repudiandae. Obcaecati consequuntur, sapiente voluptates temporibus optio? Quibusdam tenetur, reiciendis amet pariatur consectetur! Assumenda rem, voluptas ex numquam perferendis rerum quas facere nulla exercitationem labore.</p>
  <p>Eveniet, recusandae, expedita. Debitis nisi autem, minima magnam. Suscipit, vel. Aperiam eligendi praesentium rerum odio quae id. Eaque quae mollitia, fuga, alias vel illo officiis sint explicabo fugiat molestias tempore?</p>
  <p>Numquam iure, harum nam repudiandae cum sed. Error, rerum nemo, ducimus, ad modi ab odit eos ipsam explicabo eligendi veniam debitis fugiat iusto similique optio reiciendis neque sit vel officia.</p>
  <p>Nesciunt error eum inventore temporibus modi reiciendis quaerat provident, a et assumenda voluptates possimus. Reiciendis quos mollitia, laborum nemo assumenda sit, obcaecati aspernatur, quasi molestiae quis consectetur eveniet perferendis, quo!</p>
  <p>Rerum voluptates, quos magnam, obcaecati, dolorem quae enim libero pariatur voluptate doloremque eveniet laborum similique quo quaerat iste reiciendis quod provident. Aliquam harum iste maxime minus. Repellat, ipsa, debitis. Eaque!</p>
  <p>Delectus ipsa maxime repudiandae saepe quam harum quasi, labore mollitia fugiat laboriosam vel, expedita sequi soluta magni tenetur, repellendus facere? Iure, similique consequatur adipisci hic nihil laborum vero deserunt animi.</p>
  <p>Laborum cumque quis excepturi fugiat rem natus impedit amet quia. Suscipit iusto, officia magnam deserunt exercitationem facilis omnis neque labore aliquam velit! Accusantium sunt similique ex aut, ad laudantium commodi.</p>
  <p>Autem sapiente recusandae facere dolor ipsam dolore dolorem repellendus laudantium consectetur saepe cumque possimus deleniti dicta totam placeat dolores architecto, adipisci ut soluta ratione, ad ea. Harum fugiat blanditiis, dolores.</p>
  <p>Magni, laborum, quisquam esse explicabo illum minus? Porro dolor repudiandae provident voluptatibus illum dolorem dignissimos iusto quaerat officiis hic totam nulla dolorum, delectus voluptates et aut neque rem laboriosam sunt.</p>
  <p>Voluptatem ad consequatur error. Dolorem voluptate provident optio ut laudantium aspernatur ex architecto vero totam, explicabo maxime reiciendis deleniti placeat tempora omnis quisquam natus, amet quibusdam quod. Eligendi, minus esse.</p>
  <p>Maxime aut dignissimos sed repellendus labore, velit magnam architecto cupiditate officia, quod, quaerat aliquid cumque provident commodi ipsam. Nam, odit, soluta! Architecto consequuntur sit laudantium deleniti facere quae, nihil sapiente.</p>
  <p>Animi, commodi rerum cumque adipisci optio. Magnam blanditiis asperiores harum et tempora odit, alias similique. Doloribus deserunt omnis at facilis, est quia perspiciatis inventore dignissimos, iusto cumque facere voluptates placeat.</p>
  <p>Eius sunt in laudantium asperiores maxime amet itaque ratione, fugit voluptatibus explicabo libero, tempore accusantium, facilis aliquid beatae deserunt ipsum dignissimos assumenda harum incidunt quis id provident at culpa! Recusandae.</p>
  <p>Eveniet fugit, laboriosam sed eos possimus illo, dolorum ipsa blanditiis! Voluptatem expedita eos vitae eius earum, nisi dolorum omnis voluptatibus qui quos necessitatibus tenetur repudiandae, consectetur aliquid beatae magnam. Maiores.</p>
</div>
<div id="div3">Div 3</div>