Wie div von oben bis zum Ende der Seite dehnen?

Schau, ich weiß, dass es viele Threads mit vielen Lösungen gibt, aber keine von ihnen hat für mich funktioniert. Ich bin ein Anfänger und ich fange gerade an, Webseiten in HTML zu machen. Ich habe schon versucht, eine Website zu erstellen, aber ich hatte das gleiche Problem. Ich habe die vorherige gelöscht und eine neue erstellt und kann das immer noch nicht lösen.Wie div von oben bis zum Ende der Seite dehnen?

Was ich habe versucht, und nicht wirklich funktionieren:

Einstellung Höhe auf 100%/100vh (Methode eins)
Einstellung div min-height auf 100%, so dass es absolute Position und dies zu tun:
```
top: 0px 

bottom: 0px 
```

(Methode zwei)

Wenn ich die Methode 1 ausführe, wird mein div nicht an den unteren Rand der Seite gezogen, wenn Sie die Seite scrollen können, es wird stattdessen auf die 100% Höhe des Browserfensters gestreckt.

Und wenn ich die Methode 2 mache, verschwinden die divs einfach. Ich habe die Grenze nicht gezwungen, sich zu dehnen, damit du es immer noch sehen kannst, aber wenn ich das tun würde, würde es verschwinden.

Und übrigens, ich bin nur ein Anfänger und ich weiß noch nicht einmal die Grundlagen von JavaScript, jQuery usw., so würde ich nur pures HTML und CSS und nicht JavaScript und andere Sachen verwenden wollen, bis ich Lerne sie.

EDIT: Die Divs müssen dehnen, wenn der Text auch hinzugefügt wird, eigentlich ist das eines meiner Hauptprobleme.

Quelle

2016-10-04 SaJmoN

Versuchen Sie dies ... Sie können mit den Stilen Affe machen, um es so zu machen, wie Sie wollen. Ich habe Ihren Rahmen innerhalb .Main und html, body zu

Hinweis: Die Positionierung sieht funky wegen Ihrer Verwendung der absoluten Positionierung für die Ränder von Main. Ich würde das ändern. Aber wenn Sie den Code auf Ihre Seite kopieren, könnte es sein, wonach Sie streben.

html, body { 
 
    height: 100%; 
 
} 
 

 
.page { 
 
    background: linear-gradient(#2d5aa4, #03637c); 
 
    height: 100%; 
 
    margin: 0; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    position: relative; 
 
} 
 

 
.NavigationBar { 
 
    background: linear-gradient(to right, #636363, #4e4e4e); 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    bottom: 0px; 
 
    width: 220px; 
 
    min-height: 100%; 
 
    z-index: 2; 
 
    font-family: BloggerSans; 
 
    font-size: 1.5em; 
 
} 
 
.NavigationBarBorder { 
 
    background: linear-gradient(to right, #292929, #171617); 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 10px; 
 
    min-height: 100%; 
 
    z-index: 3; 
 
} 
 

 
.MainParent { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 

 
.NavigationTop { 
 
    background: linear-gradient(#636363, #4e4e4e); 
 
    position: absolute; 
 
    left: 220px; 
 
    width: calc(100vw - 220px); 
 
    height: 75px; 
 
    z-index: 1; 
 
    font-family: Jaapokki; 
 
    font-size: 2em; 
 
} 
 

 
.Main { 
 
    background: linear-gradient(#ffffff, #e8e8e8); 
 
    position: absolute; 
 
    top: 20vh; 
 
    bottom: 0px; 
 
    width: calc(100vw - 440px); /* set your width */ 
 
    left: 220px; 
 
    margin-left: 90px; /*set your margin here */ 
 
    min-height: 100%; 
 
    z-index: 4; 
 
    padding-left: 40px; 
 
} 
 

 
.MainBorder { 
 
    background: linear-gradient(#f79104, #e9720d); 
 
    position: absolute; 
 
    top: -10px; 
 
    left: 0; 
 
    width: 40px; 
 
    min-height: 100%; 
 
} 
 

 
h1 { 
 
    font-family: 'Jaapokki'; 
 
    text-align: center; 
 
    font-size: 3em; 
 
} 
 

 
.Text { 
 
    font-family: 'BloggerSans'; 
 
    font-size: 2em; 
 
}

<body class="page"> 
 
    <div class="MainParent"> 
 
     <nav class="NavigationBar"> 
 
      <div class="NavigationBarBorder"></div> 
 
      Table of content 
 
     </nav> 
 
     <header class="NavigationTop"> 
 
      Navigation 
 
     </header> 
 
     <div class="Main"> 
 
      <h1>Title</h1> 
 
      <div class="Text"> 
 
       Text </br> 
 
      </div> 
 
      <div class="MainBorder"></div> 
 
     </div> 
 
    </div> 
 
</body>

Quelle

2016-10-04 18:02:50 mhatch

Meine Grenze sollte nicht innerhalb von .Hauptrechner sein, weil es ein wenig durchhalten muss, einfach so: http://i.imgur.com/YniYk5L.png aber danke für deine Antwort. Sorry für seltsame Antwort am Anfang, aber ich dachte, Enter würde nicht wirklich bedeuten "Antwort" oder "Speichern". – SaJmoN

@SaJmoN Verwenden Sie einfach eine negative top 'top: -10px' – mhatch

Ich würde auch empfehlen, geben Sie Ihrem Haupt eine Breite und dann die Positionierung von links. So wie Sie es jetzt haben, verschwindet das Hauptfenster, wenn der Browser verkleinert wird. – mhatch

Wie div von oben bis zum Ende der Seite dehnen?

Antwort

Verwandte Themen