html - Difference between height 100% in FireFox and everyone else -


i'm trying make several nested containers stretch fill page. know there ton's of questions , answers out there , every 1 has different answer none explain why behavior exists.

basically @ arbitrary point "height:100%" stops functioning , have switch on "min-height:100%" , if happen have both present layout massively screwed up.

i have solution works in ie11, ff(latest), , chrome(latest) , 1 works in others doesn't work in ff , can't tell why.

here jsfiddle explaining it, but i'd note jsfiddles display behavior doesn't match browsers @ all i'm going try , write out code. https://jsfiddle.net/2xa8rvek/

basically here's happens. place big block of content in center not scroll when window large enough scroll when window height reduced. observe different behavior based on color shown.

i call senario a when scrollbar shown , window scrolled half way down. call senario b when page height large enough bottom of text block shown.

document

<html> <body>     <div id="content-container">         <div id="page-specific-container">             <div class="content-middle">                 arbitrary amount of content goes here force screen re-size if user wasn't full screen.              </div>                   </div>     </div> </body> </html>

css

* {     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box; }  body, html{     margin: 0;     padding: 0;     font-size: 16pt;         width: 100%;     height: 100%;     background: blue; }  #content-container{     padding-top: 45px; /* navigation */     height: 100%;     background: red; }  #page-specific-container{     /* @ point "height" property alone no longer works scrolling */     /* firefox requires "height: 100%" present or else .content-middle tag doesn't work */     min-height: 100%;     background: yellow; }  .content-middle{     /* if "height:" referenced here @ break layout */     min-height: 100%;     background:purple; }

here's rundown of behavior:

-- height: 100% #page-specific-container , .content-middle

------- scenario show blue strip @ bottom.

------- scenario b show purple way down.

-- min-height: 100% #page-specific-container , .content-middle

------- scenario shows purple in browsers.

------- scenario b shows yellow in ff shows purple in other browsers.

-- min-height: 100% , height: 100% #page-specific-container , min-height:100%; .content-middle

------- scenario show purple way down.

------- scenario b show purple way down.

-- min-height: 100% , height: 100% both #page-specific-container , .content-middle

------- scenario show blue color.

------- scenario b show purple only.

why ff behave differently? why there random depth height: 100% no longer works?

edit: note format of layout breaks flexbox inside #page-specific-container


-

Comments

Post a Comment

Popular posts from this blog

css - SVG using textPath a symbol not rendering in Firefox -

using textpath within symbol doesn't render in firefox. renders fine in latest chrome , ie, when try reference symbol, svg text doesn't render in firefox (37.0.1) - first box appears empty. code below (no external dependencies), there should 2 boxes word test flowing vertically in centre of each. edit: thought issue somehow involved flexbox layout, until paul pointed out issue exists without flexbox layout. the html is: <div> <svg id="not_working" viewbox="0 0 250 1200" preserveaspectratio="xmidymid meet"> <symbol id="test_symbol1" preserveaspectratio="xmidymid meet" viewbox="0 0 250 1200"> <path id="test_symbol_path" d="m 100 1200 l 100 0" /> <text font-size="100" fill="red"> <textpath text-anchor="middle" startoffset="50%" xlink:href="#test_symbol_path...
Read more

Java 8 + Maven Javadoc plugin: Error fetching URL -

i attempting generate javadoc links javadoc dependencies. have tried various means generate javadoc not produce qualified class names references classes dependencies. wanted links java doc simplified class names. however, java api classnames, no links , have qualified class names. working java 8. have following configuration: <plugin> <groupid>org.apache.maven.plugins</groupid> <artifactid>maven-javadoc-plugin</artifactid> <version>2.10.2</version> <configuration> <reportoutputdirectory>${project.basedir}/target</reportoutputdirectory> <destdir>javadoc</destdir> <windowtitle>epiphany</windowtitle> <doctitle>epiphany</doctitle> <show>private</show> <detectlinks>false</detectlinks> <detectoffline...
Read more

order - Notification for user in user account opencart -

thanks helps or points me in right direction. i want show pending notification user in account page after login. notification show when order status pending. after changing other status admin remove notification. this notification show like: your order id: order status: , [ button custom url] if multiple order show multiple order id. open cart version 1.5.6.3 custom theme. $this->load->model('account/order'); $results = $this->model_account_order->getorders(); foreach ($results $result) { $product_total = $this->model_account_order->gettotalorderproductsbyorderid($result['order_id']); $voucher_total = $this->model_account_order->gettotalordervouchersbyorderid($result['order_id']); if( $result['status'] =! 5){ // 5 order status means completed $this->data['orders'][] = array( 'order_id' => $result['order_id'], ...
Read more