垂直放置三个元素：柔性盒，滚动盒和固定盒

Colin 发表于 Dev

科林

CSS甚至可能执行以下操作？如果不是，即使绿色框更改了内容，仍将使用哪些javascript事件？

我想垂直放置三个盒子：

第一个（绿色的）可以具有可变数量的内容，并且该框应展开以适合该内容。此框应与浏览器顶部齐平。
最后一个，黄色，将具有固定数量的内容（意味着我知道在“编译时”的内容是什么）。此框应与浏览器底部齐平。
中间的一个，红色的将具有灵活的内容量，并且应该从绿色框的底部延伸到黄色框的顶部，并且如果内容大于框的大小，则内部需要滚动。

这是我到目前为止所能获得的，并且效果不佳-我似乎无法使黄色框的底部与视口的底部齐平，以致于红色框无法被占用所有额外的空间（即位置：绝对似乎无济于事）。

#container {
    float: left;
    height: 100%;
    background-color:gray;
}

#header {
    background-color: green;
}

#main {
    overflow: auto;
    background-color: red;
    height: 70%;
}

#footer {
    background-color:yellow;
}

<div id="container">
  <div id="header">START OF HEADER CONTENT...</div>
  <div id="main">Craft beer jean shorts...</div>
  <div id="footer">footer some stuff goes here</div>
</div>

这是它的样子：

这是一个jsfiddle：https ://jsfiddle.net/n6cmdcj3/ ，但请注意，它可能无济于事，因为html框不遵循视口大小-不确定如何做到这一点

乔什·卢瑟福

使用可以很容易地做到这一点flexbox。查看支持表以了解兼容性。

html,
body {
	width: 100%;
	height: 100%;
}

#container {
    float: left;
    height: 100%;
    background-color: purple;
    position: relative;
	display: flex;
	flex-direction: column;
}

#header {
    background-color: green;
}

#main {
    overflow: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
    background-color: red;
	flex: 1;
	flex-grow: 1;
}

#footer {
    background-color:yellow;
}

    <body>
        <div id="container">
            <div id="header">
                START OF HEADER CONTENT and the viewer should be able to see all of it. Ipsum Blaster jango fett alderaan data dooku validium hypercube. Antilles mace windu uhura xindi millenium falcon bothan exterminate tylium ore. Endor maul skywalker everlasting matches antilles FTL tylium ore dooku. Paradox machine padawan speeder doctor who chewbacca AT-AT frack dagobah ice gun. Uhura data photon torpedo worf landspeeder starbuck hypercube cantina. END OF HEADER CONTENT
            </div>
            <div id="main">
Craft beer jean shorts beard green juice, kinfolk 8-bit hoodie single-origin coffee letterpress seitan four dollar toast hammock occupy selfies pug. Retro locavore meditation craft beer viral, vinyl health goth cred butcher echo park. Echo park portland helvetica roof party hammock, food truck messenger bag pop-up poutine master cleanse hella artisan etsy. Celiac polaroid before they sold out tousled chillwave farm-to-table, leggings craft beer mlkshk viral seitan vegan intelligentsia. Yuccie synth poutine next level food truck, meggings chambray aesthetic farm-to-table marfa helvetica dreamcatcher blue bottle mumblecore brunch. Fixie narwhal lomo, art party pinterest direct trade poutine mlkshk organic forage irony. Wolf kickstarter authentic dreamcatcher plaid.

Yuccie tilde try-hard selfies gentrify DIY. Offal celiac gentrify cornhole, chia beard scenester quinoa freegan marfa thundercats pour-over synth. Migas salvia franzen pabst, blog listicle freegan chia YOLO fashion axe locavore offal. Paleo whatever messenger bag, 3 wolf moon normcore aesthetic humblebrag pug narwhal lo-fi lomo lumbersexual. Chambray yuccie selfies, tattooed biodiesel pitchfork artisan mixtape actually iPhone single-origin coffee 8-bit master cleanse aesthetic. Kickstarter chillwave VHS tousled green juice. Meggings mumblecore gentrify chambray blue bottle brooklyn.

Four dollar toast sriracha hammock iPhone authentic, quinoa wayfarers pop-up taxidermy post-ironic next level offal YOLO chartreuse fingerstache. Forage salvia direct trade photo booth YOLO, fixie paleo sartorial deep v. Distillery art party pop-up meggings sartorial thundercats vice, portland jean shorts flannel readymade godard. 3 wolf moon single-origin coffee you probably haven't heard of them chillwave selfies cred. Scenester asymmetrical seitan blue bottle bitters banh mi swag, etsy disrupt 90's. Kombucha normcore echo park, photo booth bushwick stumptown retro before they sold out. Chillwave art party heirloom ugh.

Cliche authentic paleo fingerstache banjo actually artisan sriracha helvetica twee, trust fund portland PBR&B. Aesthetic pork belly pop-up bitters distillery, banh mi try-hard cred meditation letterpress schlitz 90's celiac neutra. Irony street art actually cliche cray asymmetrical. Bicycle rights kombucha beard crucifix, deep v cray 3 wolf moon listicle before they sold out shabby chic distillery pitchfork. Meh aesthetic tacos flannel, pug paleo DIY austin. Gastropub kinfolk cliche crucifix, swag post-ironic irony heirloom keytar thundercats 8-bit beard. You probably haven't heard of them migas marfa leggings normcore.

Four loko gentrify ramps, mixtape sartorial fashion axe ethical organic meditation williamsburg. Blue bottle freegan synth hoodie, swag bitters letterpress chillwave pop-up. Hella chicharrones next level ramps chillwave, portland freegan tattooed neutra disrupt austin 3 wolf moon kale chips roof party. Lumbersexual try-hard cold-pressed, affogato offal bushwick thundercats stumptown. Leggings knausgaard gastropub, raw denim bitters lo-fi four dollar toast tilde truffaut meh. Truffaut umami artisan, irony affogato tattooed literally yuccie pabst chia wolf hammock craft beer photo booth. Lomo roof party tumblr thundercats meggings ennui messenger bag, next level franzen synth kickstarter pork belly vegan.
            </div>
            <div id="footer">
                footer some stuff goes here
            </div>
        </div>

    </body>