Laden...

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

Letzter Beitrag vor 7 Jahren 14 Posts 2.818 Views
[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

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.

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

Weeks of programming can save you hours of planning

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

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)?

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

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.

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

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.

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.

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

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

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