zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Höhe des Inneren Div soll immer 50% des äußeren Div betragen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.01.2017, 16:50
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.07.2015
Beiträge: 42
Tomtom84 befindet sich auf einem aufstrebenden Ast
Standard Höhe des Inneren Div soll immer 50% des äußeren Div betragen

Hallo,

ich habe einen äußeren Div-Container, welcher nach links floatet und folgenden css-Code besitzt:

Code:
.image-container-grid {
    padding-top: 72.56%; /*damit bleiben die Bilder responsive 0,7256 = 529px/729 px  (Seitenverhältnis (Höhe/Breite)*/
    display: block;
    margin: 0;
    background-size: cover;
    -moz-background-size: cover;
    background-position: center;
    }
Darin liegt ein zweiter Div Container, welcher halb so hoch wie der äußere Div-Container sein soll. Leider finde ich keine Lösung, dass der innere Div Container sich dynamisch immer genau an die Hälfte des äußeren Div-Container anpasst. Mit absoluten zahlen und 50% für die breite funktioniert es.

Code:
    .text-content-grid
height: 190px;
    width: 50%;
cursor: pointer;
    display: table;
    margin: 0;
    background-size: cover;
    -moz-background-size: cover;
    background-position: center;
    left: 0;
    position: absolute;
    top: 0%;}
Gibt es eine Lösung für die Höhe, sodass der inner div container immer 50% der Höhe des äußeren div-container bekommt?

Danke im voraus!

Viele Grüße
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.01.2017, 17:24
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Was genau möchtest du erreichen? Ich glaube, dass das, was du erreichen möchtest, einfacher und ohne diese Berechnungen zu realisieren ist.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.01.2017, 17:28
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.07.2015
Beiträge: 42
Tomtom84 befindet sich auf einem aufstrebenden Ast
Standard

ich möchte erreichen, dass der innere div container (.text-content-grid) auf allen Bildschirmgrößen immer genau 50% der Höhe des äußeren Div-containers entspricht. Aktuell hat er eine absolute Höhe von 190px... Dafür suche ich eine andere Lösung. Weißt Du was ich möchte?
Mit Zitat antworten
  #4 (permalink)  
Alt 11.01.2017, 08:42
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Du hast den Sinn von HTML / CSS noch nicht verstanden.

HTML und CSS sind dafür ausgelegt Informationen zu übermitteln. Nicht aber um unsinnige Layouts zu erstellen, die nichts mit der Informationsübermittlung zu tun haben. Solche Layoutwünsche können häufig nur mit Tricks umgesetzt werden.

Grundsätzlich richtet sich die Höhe von Containern nach ihrem Inhalt. Du willst genau das Gegenteil erreichen, nämlich dass sich die Höhe eines Containers nicht nach seinem Inhalt, sondern nach den ihn umgebenden Container richtet.

Da so ein Konstrukt zur Informationsübermittlung nicht notwendig ist gibt es dafür in HTML und CSS keine direkte Lösung. Du musst also basteln.

Zunächst musst du dafür sorgen, dass die Container im Dokumentenfluß bleiben. Wenn du dem inneren Container position: absolute (oder auch ein float) verpasst wird er aus dem Dokumentenfluß herausgehoben. Folge: Der äußere und der innere Container können nicht mehr aufeinander reagieren.

Dann benötigt der äußere Container eine Höhe, nach der der innere sich richten kann.

Erforderlichenfalls müssen auch weitere umgebende Container bis html und body Höhenangaben (height, min-height) bekommen.

Sofern diese Vorgaben erfüllt sind kann der innere Container mit Prozentangaben für seine Höhe auf den umgebenden Container reagieren. In deinem Beispiel height: 50%;

Die horizontrale Zentrierung erfolgt dann mittels Flexbox: align-items: center;

Gruss

MrMurphy
Mit Zitat antworten
  #5 (permalink)  
Alt 11.01.2017, 09:19
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Danke MrMurphy fürs ausformulieren dessen, was ich mit meiner Frage bezwecken wollte. Um diese Frage zu beantworten:

Zitat:
Zitat von Tomtom84 Beitrag anzeigen
Weißt Du was ich möchte?
Nein, das weiß ich nicht. Also ich weiß es, aber ich weiß nicht warum. Geht es darum, dass Elemente die gleiche Höhe haben? Geht es darum, dass ein "toller Effekt" mit den 50% erzielt wird? ... Für alles kann es unterschiedliche Lösungsansätze geben.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

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 aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Höhe von umgebendem DIV vistree CSS 2 02.08.2007 12:00
Höhe des div an Bildhöhe anpassen bernd_h_schulz CSS 5 03.04.2007 14:06
Kleiner problem miut der höhe des div elements Griborim CSS 0 15.10.2006 20:45
div Container nimmt automatisch die Höhe des Eltern-div an fidelio CSS 3 12.04.2006 16:34
div hoehe wird nicht 100% des verfuegbaren platzes grossy CSS 1 25.03.2006 07:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:01 Uhr.