All geek questions in one place

Position three elements vertically: a flexible box, a scroll bar, and a fixed box

Is the following possible with css? If not, what javascript events will be used even if the green square changes the content?

I would like to vertically place three windows:

  • The first (green) may contain a certain amount of content, and the field must expand to fit the content. This checkbox should be flush with the top of the browser.
  • The last one, yellow, will have a fixed amount of content (this means that I know what the content is at compile time). This flag should be flush with the bottom of the browser.
  • Medium, red, will have a flexible amount of content and should extend from the bottom of the green box to the top of the yellow rectangle, and inside it must be scrolled if its contents are larger than the size of the box.

This is what I have so far, and it didn’t quite work - I can’t make the bottom of the yellow box flush with the bottom of the viewport so that the red box takes up all the extra space (i.e. position: absolute, it seems Does not 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 here is what it looks like:

Screenshot above

Here's jsfiddle: https://jsfiddle.net/n6cmdcj3/ , but note that this may not help, as the html field does not fit the viewport size - not sure how to do it

+5
source share
3 answers

This can be done quite easily with flexbox . View 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 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>
+3
source 
 #container { float: left; height: 100%; background-color:gray; position: relative; } #header { background-color: green; height: auto; } #main { overflow: auto; background-color: red; height: 70%; overflow-y: scroll -webkit-overflow-y: scroll; -moz-overflow-y: scroll; } #footer { background-color:yellow; height: 25px; }

I would do it like this. There is no reason to get too complicated.

Link: https://jsfiddle.net/n6cmdcj3/3/

I would also use the given pixels for the main id, since you are trying to set the scrollable div content.

Correct me if I am wrong, but I also believe that these should be classes, not id. Classes are designed to reuse names, for example, you would use a class to update the entire color of a div, but you would not use an identifier. The identifier will be used in those cases when you need something specific that will not be implemented anywhere on the site. This is just a good programming practice, and it pays later when you use JavaScript.

ID = Single change item. Class = multiple items.

+1
source

Josh Rutherford's answer is great for flexbox. If you want to use a more traditional layout, you will need to set the top element to a fixed height and use vh units. CSS will look like this:

 .container { height: 100vh; } .top { background-color: #f2f2f2; height: 24vh; overflow: hidden; padding: 20px; } .middle { background-color: #h2h2h2; height: 55vh; padding: 20px; overflow-y: scroll; } .bottom { background-color: #d2d2d2; height: 3vh; padding: 20px; position: fixed; bottom: 0; width: 100%; }

CodePen demo: http://codepen.io/staypuftman/pen/eJvdYv

0
source

Source: https://habr.com/ru/post/1239915/

More articles:


All Articles