Laden...

[erledigt] Höhe in Pixel von DIV Element abfragen wo Höhe auf "Auto" festgelegt ist

Erstellt von Trekki1990 vor 6 Jahren Letzter Beitrag vor 6 Jahren 2.804 Views
Trekki1990 Themenstarter:in
503 Beiträge seit 2008
vor 6 Jahren
[erledigt] Höhe in Pixel von DIV Element abfragen wo Höhe auf "Auto" festgelegt ist

Hallo liebe Community,

ich versuche verzweifelt die Höhe eines DIV-Containers abzufragen, bei dem die Höhe auf "Auto" festgelegt ist. Ich erhalte immer "0". Habe den DIV-Container in ein ASP-Panel umgewandelt und habe genau das Selbe Verhalten. Ich versteh es nicht.

Ziel ist folgendes:
Ich habe ein Main DIV (oder Panel, ist ja egal) und der Abstand zum Rand soll dynamisch angepasst werden. Dabei soll der Abstand genau so hoch sein, wie die Höhe des anderes Footer DIVs / Panels.

Im Prinzip hatte ich mir das so gedacht:

main.Style["bottom"] = pnl_footer.Height.Value.ToString() + "px";

Ich erhalte aber sowohl bei der Höhe als auch der Breite immer "0".
Klärt mich mal einer auf? Wäre euch sehr verbunden... 🤔

Gruß
trekki

16.806 Beiträge seit 2008
vor 6 Jahren

Du kannst nicht Server-Code auf dem Client ausführen.
So funktioniert ASP.NET nicht (auch nicht PHP, NodeJS oder alle anderen Servertechnologien).
Der Client bekommt das HTML schließlich auch erst (HTTP Basics), wenn der Server die Berechnung vollständig durchgeführt hat. Danach hat der Server keinerlei Verbindung zum Client mehr und kann auch nachträglich kein HTML vom Server aus verändern oder gar den DOM lesen.

Sowas geht nur auf dem Client und da bleibt Dir nur JavaScript.

5.657 Beiträge seit 2006
vor 6 Jahren

...wobei die Anforderungen sich bestimmt viel einfacher mit CSS umsetzen lassen würden.

Weeks of programming can save you hours of planning

Trekki1990 Themenstarter:in
503 Beiträge seit 2008
vor 6 Jahren

Hallo Abt, okay. Warum funktioniert dass dann wenn ich eine feste Pixelzahl festlege und die Abfrage? Es funktioniert nur nicht wenn die Container / Panel auf Auto Höhe stehen.

MrSparkle hast du einen Link oder ein Codeschnipsel der mir die Augen öffnet? In CSS? Wenn dann aber nur in Kombination mit CSS / Javascript wie Abt schreibt oder?

Gruß
trekki

D
985 Beiträge seit 2014
vor 6 Jahren

Weil bei Auto der tatsächliche Wert erst nach dem Rendern auf dem Client (also im Browser) feststeht?

Weil bei einem festen Wert sich dieser nicht ändert (egal welcher Client)?

Trekki1990 Themenstarter:in
503 Beiträge seit 2008
vor 6 Jahren

... okay okay ... Ich hatte wirklich ein Brett vorm Kopf. Ans rendern habe ich überhaupt nicht gedacht. Werde ich wohl dann mit Javascript machen. Ich werde meine Lösung dann hier posten.

Gruß
trekki

16.806 Beiträge seit 2008
vor 6 Jahren

Die Pixelzahl (auch die fixen), die Du auf dem Server aufrufst, muss auch gar nicht mit der realen Zahl übereinstimmen, weil der Server nicht weiß, welche CSS Klasse (und welcher Style) greift.

Trekki1990 Themenstarter:in
503 Beiträge seit 2008
vor 6 Jahren

Ich bekomme es einfach nicht hin... Hier mal ein Bild wie ich es eigentlich benötige. Dabei ist der Footer das Problem. Mein Layout funktioniert mit einer fixen Größe des Headers gut. Aber das ist unpraktikabel bei dem Inhalt der dort angezeigt werden kann.

Bin relativ neu im Thema Webprogrammierung und tue mich mit CSS / Javascript und den Ganzen Zusammenhängen noch ein wenig schwer. Die normalen Windows Forms sind nichts dagegen.

Gruß
trekki

D
152 Beiträge seit 2013
vor 6 Jahren
16.806 Beiträge seit 2008
vor 6 Jahren

Und Du tust Dich leichter wenn Du vordefinierte Gridsysteme wie Bootstrap verwendest.
Du wirst aber nicht drum herum kommen Dich intensiv mit HTML und CSS zu beschäftigen.

T
415 Beiträge seit 2007
vor 6 Jahren

HTML und CSS haben tatsächlich wenig mit dem Windows Forms Layout zu tun. Ich kann dir auch CSS Flexbox ans Herz legen. Einen guten Einstieg findest du hier:

Channel 9 Flexbox

Ansonsten lohnt es sich auch sehr mal einen Udemy Kurs zu Bootstrap zu kaufen und den mal in Ruhe durchzuarbeiten. Danach sollte dir das Ganze Thema deutlich leichter fallen.

Trekki1990 Themenstarter:in
503 Beiträge seit 2008
vor 6 Jahren

Vielen Dank für eure Vorschläge. Der Tipp von david ist Bombe! Kannte ich vorher gar nicht. Hat auch schon geholfen. Nur habe ich jetzt ein seltsames Phänomen.

Das ist mein CSS:

<style type="text/css">
        html, body, form {
            height:100%;
            margin: 1px;
            min-height:100%;
            overflow:hidden;
        }

        body {
            display: flex;
            flex-direction: column;
        }

        .StickyHeader {
            flex: 0 0 auto;
        }

        .StickyContent {
            flex: 1 1 auto;
            overflow-y: scroll;
        }

        .StickyFooter {
            flex: 1 1 auto;
        }
    </style>

Das Layout passt. Ich habe das in einer simplen HTML-Datei vorher mir noch mal angeschaut. Wenn ich jetzt das Layout in meine ASPX Seite übertrage, haut es nicht hin. Der Footer ist nicht unten fixiert, sondern schließt direkt an den variablen Content unten an.

Ich habe herausgefunden dass es an dem FORM-Tag liegt. Wenn ich das entferne gehts. Das kann ich aber nicht entfernen, da ja sonst meine Servercontrols nicht mehr arbeiten.

Jetzt habe ich endlich eine Lösung und dann funkt einem wieder was anders dazwischen. Habt Ihr noch einen Tipp?

Gruß
trekki

Trekki1990 Themenstarter:in
503 Beiträge seit 2008
vor 6 Jahren

Ich habe jetzt im CSS BODY durch FORM ersetzt. Jetzt ist er fixiert. Aber auch nicht richtig. Wenn das DataGrid View so viel Daten enthält das es über das Browserfenster hinaus geht und gescrollt werden muss, ruscht der footer korrekt nach unten und bleibt da auch. Wird das DataGridView wieder kleiner, wandert der aber mit nach oben und es bleibt ein weißer Rand um unteren Ende. Muss ich hier noch was an den Flex Eigenschaften des Footers drehen?

Gruß
trekki

Trekki1990 Themenstarter:in
503 Beiträge seit 2008
vor 6 Jahren

Ich habs! Ich hatte beim Footer ...

flex: 1 1 auto;

... statt ...

flex: 0 0 auto;

... stehen.

Hier mein korrigiertes CSS:

<style type="text/css">
        html, body, form {
            height:100%;
            margin: 1px;
            min-height:100%;
            overflow:hidden;
            font-family:'Open Sans';
        }

        form {
            display: flex;
            flex-direction: column;
        }

        .StickyHeader {
            flex: 0 0 auto;
        }

        .StickyContent {
            flex: 1 1 auto;
            overflow-y: scroll;
        }

        .StickyFooter {
            flex: 0 0 auto;
        }
</style>

HTML:

<html>
<body>
   <form runat="server">
      <div class="StickyHeader">HEADER FROM MASTERPAGE</div>
      <div class="StickyHeader">HEADER FROM CONTENT</div>
      <div class="StickyContent">CONTENT</div>
      <div class="StickyFooter">FOOTER</div>
   </form>
</body>
</html>

Danke für die Anregungen!

Gruß
trekki