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

<div id="workContent">
    <div id="workContentBorder">
        <h1>Alkusz: új kliens felvétele</h1>
        <div id="workContentData">
...tartalom...
        </div>
    </div>
</div>
css:

#workContent {
    display: block;
    position: relative;
    min-height: 50px;
    max-height: 500px;
    height: auto;
    margin: 70px auto 50px auto;
    padding: 3px;
    border-radius: 5px;
    background: linear-gradient(to top, #C4C4C4 0%,#FFFFFF 100%);
    z-index: 1;
}

#workContentBorder, #menuContentBorder {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 5px 5px 17px 5px;
    border:solid 1px gray;
    border-radius:3px;
    padding:5px;
    padding-bottom: 6px;
    box-shadow:1px 1px 0 0 rgba(255,255,255,0.8);
}

#workContentData {
    display: block;
    position: relative;
    width: calc( 100% - 12px );
    max-height: 423px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: scroll;
    border-radius: 3px;
    border-left: solid 1px gray;
    border-top: solid 1px gray;
    background: lightgray;
    box-shadow: 1px 1px 0 0 rgba(255,255,255, 1);
    min-width: 100px;
    margin: 0 10px 0 0;
    padding: 5px;
}
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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta charset="utf-8">
<style>
#tarto {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  padding: 70px 100px 50px;
}
#belso {
  overflow-y: auto;
  height: 100%;
  background: yellow;
}
#magas {
  height: 500px;
  background: red;
}
</style>
</head>
<body>
  <div id="tarto">
    <div id="belso">
      <div id="magas">magas</div>
    </div>
  </div>
</body>
</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