html - Scrolling of whole page instead of inner div only -

-

i'm fiddling css again again...

http://www.kebax.dk/test.php

as see, container called map scrolling independently of rest of container. how can make whole page scroll when more content placed in content?

i have tried using overflow attribute, without luck...

edit future references:

        body {             background:#000000;             margin:0;             padding:0;             overflow:scroll;             overflow-x:hidden;         }          #container{             position: relative;             height: 100%;             width: 950px;;             background: yellow;             margin-left:auto;             margin-right:auto;             overflow:auto;         }          #map {             position:absolute;             top:80px;             bottom:0;             left:0;             right:0;             background:#fff;             overflow:auto;             overflow-x:hidden;         }          #header {             height:80px;             width:900px;             background:#333;             margin:0;             padding:0;         }         #header h1 {             color:#fff;             margin:0;             padding:0;         }          #leftgradient {             width:50px;             height:80px;             float:left;             background:#096;             background: -webkit-gradient(linear, left top, right top, from(#000000), to(#333333));         }          #rightgradient {             width:50px;             height:80px;             float:right;             background:#096;             background: -webkit-gradient(linear, left top, right top, from(#333333), to(#000000));         }          #toppanel {             background:#179ae8;             width:950px;             height:50px;         }          #leftpanel {             background:#179ae8;             width:100px;             height:250px;             float:left;         }          #content {             background:#099;             width:850px;             margin-left:100px;         }    <div id="container">     <div id="leftgradient"></div>     <div id="rightgradient"></div>     <div id="header">         <header>                 <h1>                 heading             </h1>         </header>     </div>      <div id="map">         <div id="toppanel">             top         </div>         <div id="leftpanel">             lefty         </div>         <div id="content">             lots of text!!         </div>     </div> </div>

if understand correctly, need remove boatload of css declarations:

  • on body, remove: overflow: hidden.
  • on #container, remove: height: 100%, overflow: auto, position: relative.
  • on #map, remove:
    • position: absolute, left: 0, bottom: 0, right: 0, top: 80px
    • overflow-x: hidden, overflow-y: auto.

now can scroll page (tested in firefox only).

removing stuff possibly broke functionality on page. let me know if there anything, , can see finding way add in missing functionality.

to fix issue in comments, add:

  • html, body { height: 100% }
  • on #container, add min-height: 100%.

now, can see yellow background poking out on #container. way fix change yellow white, , use background image this:

enter image description here
(save , use it)

on #container:

background: #fff url(http://i.stack.imgur.com/q1sp1.png) repeat-y

you need remove white background-color #map.


Comments

Post a Comment

Popular posts from this blog

Javascript line number mapping -

-
magically formatted comments change reported line number of javascript errors in browsers; this: //@line n "f" n line number , f file name. unfortunately, //@line appears ungoogleable. know there documentation on feature, , browsers support it? (i found references here , here .) from can find available in mozilla based browsers. it using js_setoptions command can turn these options on or off depending on values passed. https://developer.mozilla.org/en/js_setoptions
Read more

c# - Is it possible to remove an existing registration from Autofac container builder? -

-
something along lines: builder.registertype<mytype>().as<itype>(); builder.registertype<mytype2>().as<itype>(); builder.deregistertype<mytype>().as<itype>() var container = builder.build(); var types = container.resolve<ienumerable<itype>>(); assert.istrue(types.count == 1); assert.istrue(types[0].gettype == typeof(mytype2)); scenario: go through bunch of assemblies , go register types want make sure have 1 implementation of given type. need before create container. track on own nice if autofac me bit. this cannot done directly using containerbuilder , unless start on new one. mind you, having first built container should able construct new container filtering away unwanted types , reusing registrations first container. this: ... var container = builder.build(); builder = new containerbuilder(); var components = container.componentregistry.registrations .where(cr => cr.activator.limittype != typ...
Read more

php - Mysql PK and FK char(36) vs int(10) -

-
i have read mysql can handle indexes , searches better if tables keys integers rather char(36) uuid's. is worth converting int(10)? note: use 1 server , have have plans use multiple databases concurrently therefore removing 1 of big reasons using uuid. our tables innodb if makes difference. thanks in advance. usually rdbms can handle integer keys pk more efficient, other datatypes. reason how build index column, yes: long dont require string (or other typed) keys, should use integers. however: char(36) , int(10) far away being equal, because int(10) much smaller, char(36). dont know, if require many different keys, should keep in mind. update, complete last paragraph: int(10) 32-bit, char(36) 36 - ^byte^ (= 288-bit). not mean, int consumes less space, means, char(36) has 4 times more different keys.
Read more