Pure CSS：根据其他div的高度计算高度
Pure CSS: calc height based on height of other divs
我使用 Javascript 看到了一些关于我的需求的答案，但我想知道仅使用 CSS 是否可行。
div1+div2+div3=全屏.
我想要这样的东西：
div2 height = calc (100vh - (div1_height + div3_height))
div1_height 和 div3_height 不是静态的，不能仅用像素值替换。
这在 CSS 中可行吗？
使用弹性布局并设置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>
有两种方法可以解决这个问题。
- FlexBox（有限支持）
- 位置（IE 7 支持）
我敢打赌会有 100 多个答案谈论 FlexBox，所以我会给你一个 positions 的解决方案。
div1 和 div3，正如我所假设的，它们有一些固定的高度。并假设它们为 header 和 footer.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>
我使用 Javascript 看到了一些关于我的需求的答案，但我想知道仅使用 CSS 是否可行。
div1+div2+div3=全屏.
我想要这样的东西：
div2 height = calc (100vh - (div1_height + div3_height))
div1_height 和 div3_height 不是静态的，不能仅用像素值替换。
这在 CSS 中可行吗？
使用弹性布局并设置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>
有两种方法可以解决这个问题。
- FlexBox（有限支持）
- 位置（IE 7 支持）
我敢打赌会有 100 多个答案谈论 FlexBox，所以我会给你一个 positions 的解决方案。
div1和div3，正如我所假设的，它们有一些固定的高度。并假设它们为header和footer.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>