Menu
Is the following even possible with css? If not, what javascript events would be used even if the green box changes content?
I'd like to vertically position three boxes:
This is what I've got so far, and it doesn't quite work - I can't seem to make the bottom of the yellow box flush with the bottom of the viewport in such a way as to let the red box take up all the extra space (i.e. position: absolute doesn't seem to help).
#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>
And this is what it looks like:
Here's a jsfiddle: https://jsfiddle.net/n6cmdcj3/, but note it might not help, as the html box doesn't obey the viewport size - not sure how to make it so
403
This can be done fairly easily with flexbox. Check out the support tables for compatibility.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With