php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 03-10-2007, 13:42
BAsti86
 Newbie
Links : Onlinestatus : BAsti86 ist offline
Registriert seit: May 2005
Ort: bei Magdeburg
Beiträge: 4
BAsti86 ist zur Zeit noch ein unbeschriebenes Blatt
BAsti86 eine Nachricht über ICQ schicken
Standard Div height 100% überschreitet parent div

Hallo,
ich versuche gerade ein 3-Zeilen Layout umzusetzen.
---------------
| Banner
|Menu | Content
| Footer
---------------
Die Gesamthöhe soll dem anzeigbaren Bereich entsprechen.
Es sollen also keine Scrollbars rechts am Browser auftreten. Nur beim Content soll über overflow:scroll gescrollt werden.
Ich versuche es mit verschachtelten div,
beiße aber irgendwie auf granit:
Code:
<div class="container">
 <div class="header">
  Header
 </div>
 <div class="left">
  Menu
 </div>
 <div class="content">
  Content
 </div>
 <div class="footer">
  Footer
 </div>
</div>
mit folgendem CSS:
Code:
 
html, body {
 margin: 0px;
 padding: 0px;
 height: 100%;
}

.container {
 width: 850px;
 height: 100%;
 border: 1px solid blue;
}

.header {
 margin-top: 25px;
 width: 850px;
 height: 180px;
 border: 1px solid black;
}

.content {
 height: 100%;
 overflow: scroll;
 border: 1px solid red;
}

.menu {
 float:left;
 width:200px;
 border: 1px solid green;
}

.footer {
 height: 50px;
 background-color: #aaa
}
Was aber passiert ist, dass height: 100% im content dazu führt, dass die gesamte bildschirmhöhe genutzt wird und nicht 100% vom übergeordneten div "container" - zu erkennen an der roten umrandung die die blaue schneidet.
Ich verliere gerade den Durchblick und stehe mächtig auf dem Schlauch.
Wie bekomme ich "content" auf 100% der höhe von "container"?
Diverse "position:relative" ändern gar nichts, den Tipp solltet ihr also bitte vorher ausprobieren ob er funktioniert, wenn ihr mir dazu raten wollt
Denke ihr könnt mir helfen - Danke
Mit Zitat antworten
  #2 (permalink)  
Alt 03-10-2007, 15:08
jahlives
 Master
Links : Onlinestatus : jahlives ist offline
Registriert seit: Jun 2004
Ort: Hooker in Kernel
Beiträge: 8.279
jahlives ist zur Zeit noch ein unbeschriebenes Blatt
Standard

So wie ich das sehe würde ich sagen works as designed! Der content nimmt 100% vom container, welcher sich wiederum sich wiederum 100% vom body nimmt. Gib dem content eine Höhe in Pixeln und gut ist
__________________
Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."
Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)
Mit Zitat antworten
  #3 (permalink)  
Alt 03-10-2007, 15:27
BAsti86
 Newbie
Links : Onlinestatus : BAsti86 ist offline
Registriert seit: May 2005
Ort: bei Magdeburg
Beiträge: 4
BAsti86 ist zur Zeit noch ein unbeschriebenes Blatt
BAsti86 eine Nachricht über ICQ schicken
Standard

Ja, aber eine feste Höhenangabe wollte ich eben vermeiden,
damit bei allen Bildschirmauflösungen 100% des sichtbaren Bereichs genutzt werden und nicht 40% weiß bleiben aber dafür ne scrollbar erscheint.
Mit Zitat antworten
  #4 (permalink)  
Alt 03-10-2007, 15:35
jahlives
 Master
Links : Onlinestatus : jahlives ist offline
Registriert seit: Jun 2004
Ort: Hooker in Kernel
Beiträge: 8.279
jahlives ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Zitat:
...damit bei allen Bildschirmauflösungen 100% des sichtbaren Bereichs...
Und was glaubst du was passiert wenn du einen div mit Höhe 120px machst und darunter einen mit Höhe 100%? Dann ist die Seite 120px + 100% hoch d.h. mehr als 100%
__________________
Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."
Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)
Mit Zitat antworten
  #5 (permalink)  
Alt 03-10-2007, 15:45
BAsti86
 Newbie
Links : Onlinestatus : BAsti86 ist offline
Registriert seit: May 2005
Ort: bei Magdeburg
Beiträge: 4
BAsti86 ist zur Zeit noch ein unbeschriebenes Blatt
BAsti86 eine Nachricht über ICQ schicken
Standard

Exakt dieser Sachverhalt ist mein Problem.
Also interpretiere ich das so, dass es dafür keine "vernünftige" Lösung gibt?
Dann werde ich um einen festen Wert nicht drumherumkomen.
Mit Zitat antworten
  #6 (permalink)  
Alt 03-10-2007, 15:55
jahlives
 Master
Links : Onlinestatus : jahlives ist offline
Registriert seit: Jun 2004
Ort: Hooker in Kernel
Beiträge: 8.279
jahlives ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Gib einen festen Wert vor, der ungefähr hinkommt. Dann kannst du immer noch mittels JS eine Korrektur machen, damit nicht zu viel ungenutzter Platz bleibt.

Gruss

tobi
__________________
Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."
Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)
Mit Zitat antworten
  #7 (permalink)  
Alt 03-10-2007, 16:02
strauberry
 Registrierter Benutzer
Links : Onlinestatus : strauberry ist offline
Registriert seit: Nov 2002
Beiträge: 616
strauberry ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Ich würde alle drei divs absolute positionieren.

Den oberen mit top:0; left: 50%
den mittleren mit top:höhe des oberen divs, bottom: höhe des unteren divs, left: 50%
das untere mit bottom: 0

Bei allen drei setzt du margin-left auf -(Breite deiner divs/2). Dann sind die auch zentriert...

Habs nichts getestet, in der Richtung sollte es aber gehen.
Mit Zitat antworten
  #8 (permalink)  
Alt 03-10-2007, 17:02
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.722
Kropff befindet sich auf einem aufstrebenden Ast
Standard

vielleicht meinst du faux frames

gruß
peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #9 (permalink)  
Alt 03-10-2007, 19:18
BAsti86
 Newbie
Links : Onlinestatus : BAsti86 ist offline
Registriert seit: May 2005
Ort: bei Magdeburg
Beiträge: 4
BAsti86 ist zur Zeit noch ein unbeschriebenes Blatt
BAsti86 eine Nachricht über ICQ schicken
Lightbulb

Zitat:
Original geschrieben von strauberry
Ich würde alle drei divs absolute positionieren.

Den oberen mit top:0; left: 50%
den mittleren mit top:höhe des oberen divs, bottom: höhe des unteren divs, left: 50%
das untere mit bottom: 0

Bei allen drei setzt du margin-left auf -(Breite deiner divs/2). Dann sind die auch zentriert...

Habs nichts getestet, in der Richtung sollte es aber gehen.
Ja, genau das ist meine gewünschte Lösung!
Vielen Dank.
Hätte ich irgendwie auch selber drauf kommen können, aber ich war so in mein height und relative mit 100% verstrickt, dass ich nicht drauf kam die höhenangabe wegzulassen und einfach top- und bottom-punkte zu definieren.

Das verschachtelete Div habe ich behalten, durch margin: 0 auto 0 auto; im obersten container habe ich auch alles zentriert.
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

PHP Server Monitor

PHP Server Monitor ist ein Skript, das prüft, ob Ihre Websites und Server betriebsbereit sind.

11.09.2018 Berni | Kategorie: PHP/ Security
PHP WEB STATISTIK ansehen PHP WEB STATISTIK

Die PHP Web Statistik bietet Ihnen ein einfach zu konfigurierendes Script zur Aufzeichnung und grafischen und textuellen Auswertung der Besuchern Ihrer Webseite. Folgende zeitlichen Module sind verfügbar: Jahr, Monat, Tag, Wochentag, Stunde Folgende son

28.08.2018 phpwebstat | Kategorie: PHP/ Counter
Affilinator - Affilinet XML Produktlisten Skript

Die Affilinator Affilinet XML Edition ist ein vollautomatisches Skript zum einlesen und darstellen der Affili.net (Partnerprogramm Netzwerk) Produktlisten und Produktdaten. Im Grunde gibt der Webmaster seine Affilinet PartnerID ein und hat dann unmittelb

27.08.2018 freefrank@ | Kategorie: PHP/ Partnerprogramme
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 03:00 Uhr.