Höhe an div übergeben

  • JavaScript

Es gibt 2 Antworten in diesem Thema. Der letzte Beitrag () ist von mikeb69.

    Höhe an div übergeben

    Hallo,

    bin mal wieder an einem Punkt an dem ich nicht weiter komme.
    Nichts aussergewöhnliches und vermutlich nur einen Hauch von dem entfernt was ich versuche.

    Die Höhe soll auf einen bestimmten berechneten Punkt gesetzt werden.

    divHeight enthält einen Wert der zur div-Höhe passen könnte und im alert wird immer der gleiche Wert angezeigt, wie er eben sein soll.
    Dennoch ist das div immer unterschiedlich hoch.

    Warum ?

    HTML-Quellcode

    1. <script src="~/Scripts/jquery-1.10.2.js"></script>
    2. <script type="text/javascript">
    3. var width = window.innerWidth || // alle Browser
    4. (window.document.documentElement.clientWidth || // IE im Standard-Mode
    5. window.document.body.clientWidth); // IE im Quirks-Mode
    6. var height = window.innerHeight ||
    7. (window.document.documentElement.clientHeight ||
    8. window.document.body.clientHeight);
    9. window.onload = function () {
    10. var divHeight = document.getElementById("main").clientHeight;
    11. //alert(height - 200);
    12. document.getElementById("main").style.height = (height - 200);
    13. }
    14. </script>
    16. <div id="main" class="container body-content">
    17. @RenderBody()
    18. <hr />
    19. <footer>
    20. <p>bla bla</p>
    21. </footer>
    22. </div>


    Gruss

    mikeb69

    @Mokki

    bei mir hat es nicht geklappt.

    Hab jetzt diese Lösung gefunden.

    HTML-Quellcode

    1. <script type="text/javascript">
    2. $(window).bind("resize", function () {
    3. var width = window.innerWidth || // alle Browser
    4. (window.document.documentElement.clientWidth || // IE im Standard-Mode
    5. window.document.body.clientWidth); // IE im Quirks-Mode
    6. var height = window.innerHeight ||
    7. (window.document.documentElement.clientHeight ||
    8. window.document.body.clientHeight);
    9. // Breite anpassen
    10. $(".test").width(600);
    11. // Höhe anpassen
    12. $("#main").height(height - 200);
    13. });
    15. function resize () {
    16. var width = window.innerWidth || // alle Browser
    17. (window.document.documentElement.clientWidth || // IE im Standard-Mode
    18. window.document.body.clientWidth); // IE im Quirks-Mode
    19. var height = window.innerHeight ||
    20. (window.document.documentElement.clientHeight ||
    21. window.document.body.clientHeight);
    22. // Breite anpassen
    23. $(".test").width(600);
    24. // Höhe anpassen
    25. $("#main").height(height - 200);
    26. };
    27. </script>

    mit diesem HTML

    HTML-Quellcode

    1. <body onload="resize()">
    2. <ul id="menu">
    3. <li>@Html.ActionLink("Home", "Index", "Home")</li>
    4. <li>@Html.ActionLink("Movies", "Index", "Movies")</li>
    5. <li>@Html.ActionLink("About", "About", "Home")</li>
    6. </ul>
    7. <div id="main" style="border: 2px solid black; overflow:auto;">
    8. <div class="test" style="background-color: blue;">11111111</div>
    9. <div class="test" style="background-color: red;">22222222222222222222222222222222222222222222222222222222222222222222222222222222</div>
    10. <div class="test" style="background-color: green;">33333333333333333333333333333333333333</div>
    11. <div class="test" style="background-color: yellow;">444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444</div>
    12. @RenderBody()
    13. <p>Copyright W3schools 2012. All Rights Reserved.</p>
    14. </div>
    15. </body>

    Hoffe es klappt am Dienstag dann im Live Projekt auch.

    Schönes Wochenende

    mikeb69

Facebook
Telefonspende