纯CSS：基于其他div的高度的calc高度

Question

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

DIV1 + DIV2 + DIV3 =全屏

我希望有类似的东西：

div2 height = calc（100vh - （div1_height + div3_height））

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

这可能在CSS吗？

Answer 1

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

• FlexBox（有限支持）
• 位置（从IE 7支持）

我打赌会有100多个关于FlexBox的答案，所以我会给你一个position s的解决方案。

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>

Answer 2

使用flex布局并设置div2 {flex:1}。

body
{
  display:flex;
  flex-direction: column;
  height:100vh;
  margin:0;
}

#div1
{
  height:30px;
  background-color:pink;
  flex-shrink:0;
}

#div3
{
  height:50px;
  background-color:green;
  flex-shrink:0;
}

#div2
{
  flex:1;
  background-color:blue;
}

<body>
  <div id="div1">
  </div>
  <div id="div2">
  </div>
  <div id="div3">
  </div>
</body>