• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Höhe automatisch im eingeschachtelten Div setzten

Y

yss

Mitglied
Hallo Leute
ich habe ein Problem mit Css, da ich es nicht so gut schriftlich erklären kann habe ich ein kleines Video gemacht:
YouTube - CSS Problem
Qualität ist zwar net so gut aber man kann alles sehen xD
 
Wenn ich das richtig verstanden habe, musst du die 100% weglassen, denn das entspricht den 100% der Fensterhöhe.
Oder bei den 100% overflow: auto bzw. overflow: scroll setzen.
 
Also, dass mit dem Höhe weglassen geht nicht, da wird nichts mehr angezeigt. Damit wir vom gleichen Div sprechen, hier der Aufbau:
HTML: 
<body>
  <div id="content">
    <div id="weppstore">
      <div id="contentview">
        <div class="storeview">
          <!-- Inhalt der Angepasst werden soll -->
        </div>
      </div>
    </div>
  </div>
</body>
Und hier die aktuellen Höhenangaben:
  • Body: height: auto
  • content: height: auto; overflow: visible
  • weppstore: height: 100%
  • contentview: height: 100%, overflow: visible;
  • storeview: height: 100%, overflow: visible

Wo muss ich jetzt was machen?
 
Ok, habs jetzt durch ausprobieren hinbekommen, doch nun liegt das nächste Problem vor der Tür:
Nun wird die Höhe von Anfang an angepasst, obwohl das Div versteckt ist. Wie bekomme ich es hin dass die Höhe beim aktuellen Div immer so ist, dass das letzte Element im Div noch angezeigt wird, danach ist Schluss?
 
height: auto kannst du überall weglassen, das ist der Standardwert.
overflow: visible führt dazu, dass der Inhalt über die Höhe herausragt.
Setze mal bei contentview und storeview ein overflow: scroll oder overflow: auto
Wenn beide höher als 100% werden, musst du das ebenfalls noch bei weppstore tun.

Ansonsten lade mal deine Konstruktion hoch, damit man alles im Zusammenhang sieht.
 
Ok, hab es gemacht, aber es wird immer noch abgeschnitten.
HTMLcode:
HTML: 
<body id="body" onload="setConsole();countConsole();creatClock();startframework();">
  
  <!-- ***1. Ebene*** -->
  <div id="desktop">    
    <!-- Webppstore -->
    <div id="weppstore">
    	<!--<div class="headbar">-->
    	<div class="tabbar">
    		<!--<h1 id="pagetitle">Weppstore</h1>
    		<div class="backbutton" id="backbutton" onclick="goback()">Home</div>
    		<div class="button" onclick="hideWeppstoreApp()">Close</div>
    		<div class="puffer" id="hallo123" title="">Hallo</div>-->
    		<div class="item" title="store">
    			<img src="bilder/home.png" alt="Weppstore" />
    		</div>
    		<div class="item" title="podcast">
    			<img src="bilder/home.png" alt="Weppstore" />
    		</div>
    		<div class="item" title="home">
    			<img src="bilder/home.png" alt="Weppstore" />
    		</div>
    		<div class="item">
    			<img src="bilder/home.png" alt="Weppstore" />
    		</div>
    		<div class="item">
    			<img src="bilder/home.png" alt="Weppstore" />
    		</div>
       	</div>

    	<div class="contentview" id="contentview">
    		<div class="listview" id="home" name="Home">
    			<div class="whiteitem" title="store">
    				Store
    			</div>
    			<div class="grayitem" title="testhome">
    				Hallo2
    			</div>
    			<div class="blackitem">
    				Hallo3
    			</div>
    		</div>
    		<div class="storeview" id="store">
    			<div class="grayitem" title="podcast">
    				<img src="bilder/programme.png" alt="Limetlogo" />
    			</div>
    			<div class="blackitem">
    				<img src="bilder/programme.png" alt="Limetlogo" />
    			</div>
    			<div class="blackitem">
    				<img src="bilder/programme.png" alt="Limetlogo" />
    			</div>
    			<div class="grayitem" title="podcast">
    				<img src="bilder/programme.png" alt="Limetlogo" />
    			</div>
    			<div class="blackitem">
    				<img src="bilder/programme.png" alt="Limetlogo" />
    			</div>
    			<div class="blackitem">
    				<img src="bilder/programme.png" alt="Limetlogo" />
    			</div>
    			<div class="grayitem" title="podcast">
    				<img src="bilder/programme.png" alt="Limetlogo" />
    			</div>
    			<div class="blackitem">
    				<img src="bilder/programme.png" alt="Limetlogo" />
    			</div>
    			<div class="blackitem">
    				<img src="bilder/programme.png" alt="Limetlogo" />
    			</div>
    			<div class="grayitem" title="podcast">
    				<img src="bilder/programme.png" alt="Limetlogo" />
    			</div>
    			<div class="blackitem">
    				<img src="bilder/programme.png" alt="Limetlogo" />
    			</div>
    			<div class="blackitem">
    				<img src="bilder/programme.png" alt="Limetlogo" />
    			</div>
    			<div class="grayitem" title="podcast">
    				<img src="bilder/programme.png" alt="Limetlogo" />
    			</div>
    			<div class="blackitem">
    				<img src="bilder/programme.png" alt="Limetlogo" />
    			</div>
    			<div class="blackitem">
    				<img src="bilder/programme.png" alt="Limetlogo" />
    			</div>
    			<div class="grayitem" title="podcast">
    				<img src="bilder/programme.png" alt="Limetlogo" />
    			</div>
    			<div class="blackitem">
    				<img src="bilder/programme.png" alt="Limetlogo" />
    			</div>
    			<div class="blackitem">
    				<img src="bilder/programme.png" alt="Limetlogo" />
    			</div>
    		</div>
    	</div>
    </div>

  </div>
</body>
CSS-Definitionen:
HTML: 
body {
     margin: 0px;
     width: 320px;
}

#desktop {
    margin: 0px;
    font-family: Helvetica;
    visibility: hidden;
    width: 320px;
    background-image: url(backgrounds/leopard.jpg);
    }
#weppstore{
	width: 320px;
    height: 416px;
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
    visibility: hidden;
    margin: 0;
    font-family: Helvetica;
    background: #FFFFFF;
    color: #000000;
    -webkit-user-select: none;
    -webkit-text-size-adjust: none;
    overflow: scroll;
}
.contentview{
	width: 320px;
	height: 100%;
	margin: 0px;
	overflow: scroll;
}
.storeview{
	width: 320px;
	height: 100%;
	position: absolute;
	margin: 0px;
	visibility: hidden;
	overflow: scroll;
}

.listview{
	width: 320px;
	height: 100%;
	position: absolute;
	margin: 0px;
	visibility: hidden;
}

Wenn du dir das mal anschauen willst: http://mactouch.eu/limet/developer/versionen/public-version2(beta4)/
(Brauchst aber Safari oder iPhone OS), wie du dann zu der Stelle kommst siehst du ja im Video ;-)
 
Sieht das bei dir auch so aus wenn du die Seite von deinem Link aufrufst?
iphon-2.png (iBBdemo4 Win )
Im Safari4 (Win) sieht es ähnlich aus.
Entferne ich das overflow: scroll; aus .contentview passen die divs horizontal in den Viewport.

Das vertikale Scrollen funktioniert bei mir.
 
Ne, bei mir passt es:
IMG_0016.PNG

IMG_0017.PNG
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben