Announcement

Collapse
No announcement yet.

Height 100% - scrolling nur inneres div

Collapse
X
Collapse
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Height 100% - scrolling nur inneres div

    Hey Leute, ich steig einfach nicht durch^^

    Erstemal zum Aufbaue meiner seite:
    Links oben Logo,
    Darunter die Navigaion
    Oben rechts LogIn
    Darunter der Content

    Die Seite soll immer 100% haben, wenn nun aber der Inhalt einer Seite zu groß wird, soll nur das Content - "Fenster" in meinem Fall ein UserControl(asp.net) scrollen.
    Klappt auch soweit, allerdings gibt es 2 Bugs:
    1) Ich arbeite über dem Content mit margin, da das Content-Fenster aber 100% hat it es immer größer höher als es sein soll. (auch nicht zu beheben mit padding oder magrin - 160px)
    2) das Content-Fenster hat einen Hintergrund (nach unten hin gekachelt), wenn etwas so lang ist, dass es über diese höhe hinaus geht, schneidet es den Hintergrung einfach ab.
    Ich hoffe es was einigermaßen Verständlich und Ihr könnt mir helfen, hier mal der Quellcode:

    <style type="text/css">
    .styleHideShow
    {
    display: none;
    }
    .body
    {
    margin: 0;
    padding: 0;
    height: 100%;
    background-image: url('./Images/Main/HG-kachelbar.png');
    }
    .wrapper
    {
    width: 100%;
    margin: 0px auto auto 0px;
    min-height: 100%;
    height:auto !important;
    background-image: url('./Images/Main/HG-kachelbar.png');
    }
    .footer
    {
    position:fixed;
    margin:auto auto 0px 0px;
    bottom: 0px;
    }
    </style>

    <body class="body">
    <form id="form1" runat="server">
    <div class="wrapper" style="position: fixed"></div>
    <div style="float: left;">
    <div style="width: 200px; height: 200px; float: left; margin: 0px auto auto
    10px; position: fixed; background-image: url('./Images/Main/HG-
    kachelbar.png'); ">
    <div style="margin-left: 40px; position: fixed;">
    <asp:Image ID="Image2" Width="180" Height="180"
    ImageUrl="~/Images/Main/Logo2.png" runat="server" />
    </div>
    <div style="width: 200px; height: auto; float: left; position: fixed;
    margin-top: 200px; margin-left: 20px;">
    <asp:ContentPlaceHolder ID="cphLogIn" runat="server">
    </asp:ContentPlaceHolder>
    </div>
    </div>
    <div style="float: left; margin-bottom: auto; margin-left: 300px; margin-
    right: 0px; margin-top: 0px;">
    <div style="width: 916px; height: 100% !important; display: block;
    min-height: 100%; position:absolute; ">
    <div style="width: 916px; height: 100% !important; min-height:
    100%; display: block; background-repeat:repeat-y; padding-top:
    160px; padding-bottom:-160px; background-image: url
    ('./Images/Main/mittelteil-mitte.png');">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <asp:ContentPlaceHolder id="cphContent" runat="server" >

    </asp:ContentPlaceHolder>
    </ContentTemplate>
    </asp:UpdatePanel>
    </div>
    </div>
    <div style="position: fixed; height: 150px; background-image: url
    ('./Images/Main/HG-kachelbar.png');">
    <div style="margin: 40px 0px 0px 500px;">
    <asp:ContentPlaceHolder ID="cphNavigation" runat="server">
    </asp:ContentPlaceHolder>
    </div>
    <div style="width: 916px; height: 25px; background-repeat:no-
    repeat; background-image: url('./Images/Main/mittelteil-top.png')">
    </div>
    </div>
    </div>
    </div>

    <div class="footer" style="width: 100%; height: 35px; ">
    <asp:ContentPlaceHolder id="cphFooter" runat="server">
    </asp:ContentPlaceHolder>
    </div>
    </form>
    </body>
    Tags: 100%, divs, geschachtelt, height, scroll
  • #2
    Das unformatierte brösel ich jetzt nicht auf. Ev. suchst du

    http://www.css4you.de/overflow.html
    Christian

    Comment

    • #3
      Eigentlich dachte ich auch, dass er es so formatiert, wie ich es geschrieben habe,.. hat er anscheinend nicht, sry, nicht auf vorschau geklickt!

      Overflow scrollen nützt mir leider nichts, da die scrollbalken im inneren des divs sind,.. diese sollen aber am Seitenrand dargestellt werden.

      Vielen Dank trotzdem schon mal

      Comment

      • #4
        Hier noch einmal der formatierte code:
        Hoffe passt so, hab den mal schnell umgeändert
        HTML Code:
        <body class="body">
   <form id="form1" runat="server"> 
 
      <div class="wrapper" style="position: fixed"></div>
      <div style="float: left;">
          <div style="width: 200px; height: 200px; float: left; margin: 0px auto auto 10px; position: fixed; background-image: url   ('./Images/Main/HG-kachelbar.png'); ">
               <div style="margin-left: 40px; position: fixed;">
                     <asp:Image ID="Image2" Width="180" Height="180" ImageUrl="~/Images/Main/Logo2.png" runat="server" />
               </div>
               <div style="width: 200px; height: auto; float: left; position: fixed; margin-top: 200px; margin-left: 20px;">
                        <asp:ContentPlaceHolder ID="cphReiter" runat="server">
                        </asp:ContentPlaceHolder>
               </div>
         </div>
         <div style="float: left; margin-bottom: auto; margin-left: 300px; margin-right: 0px; margin-top: 0px;">
                  <div style="width: 916px; height: 100% !important; display: block; min-height: 100%; position:absolute; ">
                          <div style="width: 916px; height: 100% !important; display: block; min-height:100%; overflow:visible; display: block; background-repeat:repeat-y; padding-top:160px; padding-bottom:-160px; background-image: url('./Images/Main/mittelteil-mitte.png');">
                                  <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                                          <ContentTemplate>
                                                   <asp:ContentPlaceHolder id="cphContent" runat="server" >
                                                   </asp:ContentPlaceHolder>
                                          </ContentTemplate>
                                  </asp:UpdatePanel>
                         </div>
               </div>
               <div style="position: fixed; height: 150px; background-image: url('./Images/Main/HG-kachelbar.png');">
                         <div style="margin: 40px 0px 0px 500px;">
                                  <asp:ContentPlaceHolder ID="cphNavigation" runat="server">
                                  </asp:ContentPlaceHolder>
                         </div>
                         <div style="width: 916px; height: 25px; background-repeat:no-repeat; background-image: url('./Images/Main/mittelteil-top.png')">
                         </div>
                </div>
        </div>
</div>
 
<div class="footer" style="width: 100%; height: 35px; ">
       <asp:ContentPlaceHolder id="cphBanner" runat="server">
       </asp:ContentPlaceHolder> 
</div> 
</form>
</body>

        Comment

        • #5
          Moin,

          Originally posted by Pyroca View Post
          Overflow scrollen nützt mir leider nichts, da die scrollbalken im inneren des divs sind,.. diese sollen aber am Seitenrand dargestellt werden.
          Dann muss ich Dich enttäuschen. Scrollbalken sind immer im dazugehörigen Element und können nicht woanders sein. Wenn Du nur Deinen Content scrollen willst, kriegst Du die Scrollbalken auch nur am Rand dieses Elements und nirgendwo anders.

          Allerdings solltest Du Dein Vorgehen überdenken, weil das Platzverschwendung und in keiner Weise nutzerfreundlich ist. Ich erlebe das auf meinem Netbook leider immer viel zu oft. Da gibts einen 200px-Banner oder größer und der Hauptinhalt hat dann in diesem Fall bei mir noch ca. 300px, also grad mal die Hälfte des Bildschirms. Und darin soll ich dann scrollen und ich frag mich aus welchem Grund das Banner der Site wichtiger sein soll als der Inhalt.

          Und nochwas, ich hab keine Ahnung, was der ASP-Code macht, aber ansonsten sehe ich nur divs, divs und nochmal divs. Kochst Du div-Suppe? Abgesehen davon scheint Dir das Konzept der Trennung von Inhalt und Layout fremd zu sein, was die Arbeit an einer Website nicht wirklich leichter macht. Vielleicht gibts da einfach noch ne Menge Grundwissen, was zu vervollständigen wäre...

          Liebe Grüße,
          -Efchen

          Comment

          • #6
            Hey, das der Inhalt scrollt und die scrollbalken an der Seite sind hab ich aber schon hinbekommen, es bestehen lediglich noch 2 bugs.
            Ich bin auch kein div freund, bin eigentlich .Net Entwickler,...

            Was genau meinst du mit trennung? Das hier ist eine Masterpage, der .net code sind Placeholder, dementsprechend trenne ich doch schon,.. die Masterpage muss nur einmal fertig geschrieben sein, der Inhalt der einzelnen Seiten wir dann in die Placeholder eingesetzt,...

            aber trotzdem vielen Dank.
            Ich werde einfach weiter durchtesetn!

            Comment

            • #7
              Moin,
              Originally posted by Pyroca View Post
              Hey, das der Inhalt scrollt und die scrollbalken an der Seite sind hab ich aber schon hinbekommen
              Dann lass uns doch an Deinem Wissen teilhaben, dann hat die Aussage hier sogar noch einen Wert für nachfolgende Leser.
              Es wäre mir nämlich neu, dass das so geht. Wenn Du nicht gerade irgendwie trickst.

              Ich bin auch kein div freund
              Ich schon. Aber es muss - wie alle anderen HTML-Tags - richtig angewendet werden.

              Was genau meinst du mit trennung?
              Ich spreche von der Trennung von Inhalt und Layout und davon, dass Inline-Styles (die Du verwendest) da nicht in das Konzept passen.

              Das hier ist eine Masterpage, der .net code sind Placeholder, dementsprechend trenne ich doch schon
              Das sind alles keine Begriffe, die bei HTML auftauchen, daher habe ich das Gefühl, dass es sowieso nicht um eine normale Website geht.

              die Masterpage muss nur einmal fertig geschrieben sein, der Inhalt der einzelnen Seiten wir dann in die Placeholder eingesetzt
              Es sei denn, Du sprichst von einer Seite, der die gewünschten, anzuzeigenden Seiten als Parameter übergeben werden, die dann in Deiner "Masterpage" included werden. Aber das hat ja nichts mit Trennung von Inhalt (HTML) und Layout (CSS) zu tun.

              es bestehen lediglich noch 2 bugs.
              Irgendwas, wo Du Hilfe benötigst? Weil im Moment stehen hier nur Fragen, aber noch keine verwertbaren Antworten.

              Liebe Grüße,
              -Efchen

              Comment

              • #8
                Hey,
                ja das mit dem .Net lassen wir mal außen vor,..

                Die Geschichte mit dem Inline-CSS ist auch nur eine Sache des Frustes^^
                ansonsten mach ich das alles mit im CSS-COde bereich,... da mein Visual Sudio intellisense mir das aber schneller im Inline-Css vorgibt, ging es so schneller,..

                Kurze erklärung zum scrollen:

                Im Endeffekt steht es im COde ja schon beschrieben,.. es wird das ganze Div unter das obere Div geschoben,.. somit ist die Scrollbar nicht im inneren Frame, sondern außen,.. aber hier bin ich selber nicht ganz durchgestiegen mit dem "position" damit hab ich iwie einiges rumprobiert,.. bei gelegenheit noch mal mehr xD

                Comment

                Previous template Next
                Working...
                X