Posizionare verticalmente tre elementi: scatola flessibile, scatola di scorrimento e scatola fissa

Il seguente è possibile anche con css? In caso contrario, quali eventi javascript verrebbero utilizzati anche se la casella verde cambia contenuto?Posizionare verticalmente tre elementi: scatola flessibile, scatola di scorrimento e scatola fissa

mi piacerebbe verticale posizione di tre caselle:

La prima (quella verde) può avere una certa quantità variabile di contenuti, e la casella dovrebbe espandersi per adattarsi al contenuto. Questa casella dovrebbe essere a filo con la parte superiore del browser.
L'ultimo, quello giallo, avrà una quantità fissa di contenuto (nel senso che so quale sia il contenuto in "tempo di compilazione"). Questa casella dovrebbe essere allineata alla parte inferiore del browser.
Quello centrale, quello rosso, avrà una quantità di contenuto flessibile, e dovrebbe estendersi dal fondo della scatola verde alla parte superiore della scatola gialla, e internamente deve essere scorrevole se il suo contenuto è più grande di la dimensione della scatola.

Questo è quello che ho ottenuto finora, e non funziona abbastanza - non riesco a rendere il fondo della scatola gialla a filo con il fondo del viewport in modo tale da lascia che la scatola rossa occupi tutto lo spazio extra (es. posizione: l'assoluto non sembra aiutare).

#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>

E questo è quello che sembra:

Ecco un jsfiddle: https://jsfiddle.net/n6cmdcj3/, ma nota non potrebbe aiutare, come la casella HTML non obbedisce le dimensioni viewport - non sicuro di come fare in modo

fonte

2016-01-05 Colin

la prego di fare un esempio di lavoro sul jsfiddle.net o codepen.io o simili? – HerrSerker

Fatto, ma guarda il commento. – Colin

più 1 per nice lipsum :) –

Questo può essere fatto abbastanza facilmente con flexbox. Controlla la compatibilità support tables.

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

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

 
#header { 
 
    background-color: green; 
 
} 
 

 
#main { 
 
    overflow: hidden; 
 
\t overflow-y: scroll; 
 
\t -webkit-overflow-scrolling: touch; 
 
    background-color: red; 
 
\t flex: 1; 
 
\t 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>

fonte

2016-01-05 17:17:07

#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; 
}

vorrei farlo in questo modo. Nessun motivo per diventare troppo complicato.

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

Vorrei anche utilizzare pixel impostati per l'id principale, dal momento che si sta tentando di stabilire un div contenuto di scorrimento.

Correggimi se sbaglio ma, credo anche che queste dovrebbero essere classi non id. Le classi sono per nomi riutilizzabili, ad esempio, si utilizzerà una classe per aggiornare tutto il colore delle div ma non si utilizzerà un id. Un ID verrà utilizzato nei casi in cui è necessario qualcosa di specifico che non verrà implementato in nessun altro sito. È solo una buona pratica di programmazione e si paga in seguito quando si utilizza JavaScript.

ID = elemento cambio singolo Classe = elementi riutilizzabili multipli.

fonte

2016-01-05 17:14:13 ARLCode

Questo non funziona. – staypuftman

Nessun sigaro. Il piè di pagina non è allineato con la parte inferiore della finestra del browser. – Colin

> -> Aspetta, lol. Mi dispiace, ho salvato quello sbagliato. – ARLCode

risposta di Josh Rutherford è grande per FlexBox. Se si desidera utilizzare un layout più tradizionale, sarà necessario impostare l'elemento superiore su un'altezza fissa e utilizzare le unità vh.La CSS sarà simile a questa:

.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%; 
}

Demo on CodePen: http://codepen.io/staypuftman/pen/eJvdYv

fonte

2016-01-05 17:25:27 staypuftman

Nessun sigaro: il fondo del centro non è a filo con la parte superiore del fondo - la barra di scorrimento lo rivela, se si modifica la dimensione del browser. Quella altezza: il 61% è ciò che lo causa. – Colin

Puoi regolare l'altezza della sezione centrale per sfalsare il footer fisso, l'hai fatto solo per te. – staypuftman

Tuttavia, ciò richiederà una nuova regolazione se il contenuto della casella superiore cambia o se la dimensione del browser cambia. – Colin

Posizionare verticalmente tre elementi: scatola flessibile, scatola di scorrimento e scatola fissa

risposta

Problemi correlati