ugrás a tartalomhoz

divek egymásbaágyazva pozícionálással

Theo76 · 2016. Május. 26. (Cs), 14.02
Sziasztok!

Van egy divekből összerakott felület, aminek az elhelyezésével, és méretezésével van gondom...
  1. <div id="workContent">  
  2.     <div id="workContentBorder">  
  3.         <h1>Alkusz: új kliens felvétele</h1>  
  4.         <div id="workContentData">  
  5. ...tartalom...  
  6.         </div>  
  7.     </div>  
  8. </div>  
css:
  1. #workContent {  
  2.     display: block;  
  3.     position: relative;  
  4.     min-height: 50px;  
  5.     max-height: 500px;  
  6.     height: auto;  
  7.     margin: 70px auto 50px auto;  
  8.     padding: 3px;  
  9.     border-radius: 5px;  
  10.     background: linear-gradient(to top, #C4C4C4 0%,#FFFFFF 100%);  
  11.     z-index: 1;  
  12. }  
  13.   
  14. #workContentBorder, #menuContentBorder {  
  15.     top: 0;  
  16.     right: 0;  
  17.     bottom: 0;  
  18.     left: 0;  
  19.     margin: 5px 5px 17px 5px;  
  20.     border:solid 1px gray;  
  21.     border-radius:3px;  
  22.     padding:5px;  
  23.     padding-bottom: 6px;  
  24.     box-shadow:1px 1px 0 0 rgba(255,255,255,0.8);  
  25. }  
  26.   
  27. #workContentData {  
  28.     display: block;  
  29.     position: relative;  
  30.     width: calc( 100% - 12px );  
  31.     max-height: 423px;  
  32.     top: 0;  
  33.     bottom: 0;  
  34.     left: 0;  
  35.     right: 0;  
  36.     overflow-y: scroll;  
  37.     border-radius: 3px;  
  38.     border-left: solid 1px gray;  
  39.     border-top: solid 1px gray;  
  40.     background: lightgray;  
  41.     box-shadow: 1px 1px 0 0 rgba(255,255,255, 1);  
  42.     min-width: 100px;  
  43.     margin: 0 10px 0 0;  
  44.     padding: 5px;  
  45. }  
Amit kellene csinálnia:
a workContent a fő ablak, középen kell lenni, a magasságát úgy kellene meghatároznom, hogy a div felső széle 70px-re legyen a felső vonalhoz képest, a magasságát mindig az adott tartalom határozza meg (ami a workContentData divbe töltődik be), de a div alsó széle maximum 50px-re lehet kell hogy legyen a a böngésző ablak alsó széléhez képest.
A gond az, hogy eddig csak fixre sikerült megoldanom a méreteket, de ha pl valaki nagyobb felbontáson nézi, akkor túl kicsi lesz, ha alacsony, akkor meg esetleg túl nagy az ablak magassága. Plussz még nem sikerül összehozni, hogy a keret, illetve tartalom div rendesen igazodjanak, csak a méretekkel való játékkal tudom összehozni...

link
‹ adat átadás linkből jQuery-nek jquery currentScript.parent megoldás létezik? ›
 ■
1

Egy megoldás

Hidvégi Gábor · 2016. Május. 26. (Cs), 17.24
Ha jól értem, nagyjából ilyenre van szükséged. A #magas magasságát tudod állítani most kézzel, úgy meg tudod nézni, mi történik különböző magasságú tartalmak esetén.
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4.   <meta charset="utf-8">  
  5. <style>  
  6. #tarto {  
  7.   position: fixed;  
  8.   left: 0px;  
  9.   right: 0px;  
  10.   top: 0px;  
  11.   bottom: 0px;  
  12.   padding: 70px 100px 50px;  
  13. }  
  14. #belso {  
  15.   overflow-y: auto;  
  16.   height: 100%;  
  17.   background: yellow;  
  18. }  
  19. #magas {  
  20.   height: 500px;  
  21.   background: red;  
  22. }  
  23. </style>  
  24. </head>  
  25. <body>  
  26.   <div id="tarto">  
  27.     <div id="belso">  
  28.       <div id="magas">magas</div>  
  29.     </div>  
  30.   </div>  
  31. </body>  
  32. </html>  
2

Köszi a választ! Közben én is

Theo76 · 2016. Május. 30. (H), 09.38
Köszi a választ! Közben én is találtam megoldást rá:
link