Einzelseiten-Web ohne absolute Position

-1

Gibt es eine Möglichkeit, eine einzelne Website ohne absolute Position zu erstellen? Denn wenn ich die Höhe von Containern variabel einstellen möchte, ist die absolute Position etwas peinlich. Ich meine, wenn ich mehr Inhalt in einen Container einlege, sollte der andere darüber nach unten gehen. Ich habe Position statisch und relativ versucht, aber es hat nicht für mich gearbeitet.Einzelseiten-Web ohne absolute Position

Jetzt ist meine CSS wie folgt aussieht:

 <style> 
     #header {position: absolute; top: 0; left: 0; width: 100%; height: 20%;} 
     #main {position: absolute; top: 20%; left: 0; width: 100%; height: 80%;} 
    #about {position: absolute; top: 100%; left: 0; width: 100%; height: 100%;} 
#contact {position: absolute; top: 200%; left: 0; width: 100%; height: 50%;} 
    </style> 

    <body> 
    <div id="header"> 
    content.... 
    </div> 

    <div id="main"> 
    content... 
    </div> 

    <div id="about"> 
    long content which is covered with next div, because its "top" atribute settings 
    </div> 

<div id="contact"> 
div which covers previous one's end 
</div>

Aber wenn einige Behälter länger sein muss, Problem ist hier ..

Vielen Dank für jede Hilfe!

Quelle

2016-07-24 H Sturma

Bitte spezifischere und Ihr Problem so minimal wie möglich einzuengen reale Art von Hilfe zu bekommen – bugwheels94

@ user1533609 ich bearbeiten mit einigem Code gemacht habe. Ich brauche Container mit veränderbaren oberen Rand und Höhe –

Ich verstehe nicht. Kennen Sie die Grundlagen des HTML-Flow? Wenn Sie Ihren 100% -Breiten-Container oben mit einer Mindesthöhe von 20% (seines ursprünglichen Elements, wahrscheinlich ?) Platzieren, würde er sich erweitern, wenn Sie mehr Inhalt hinzufügen. Es ist mir nicht klar, warum Sie absolute Positionierung überhaupt verwenden. –

Das hängt vom Stil Ihrer Website ab. Natürlich können Sie Anker einrichten und eine einseitige Scroll-Website haben, aber ich glaube nicht, dass das Ihre Frage beantwortet.

Mein Vorschlag ist zu versuchen, absolut positionierte Elemente als Behälter zu verwenden und Ihre tatsächliche Schablone in ihnen zu haben.

Es wäre hilfreich, wenn Sie einen aktuellen Code oder ein bestimmtes Problem, das Sie haben, zur Verfügung stellen, da es momentan zu vage ist.

Quelle

2016-07-24 23:13:30 Joundill

Wenn ich alle Container wie bei Beispiel im Code, den ich hier schrieb, setze, wenn Text länger ist als eingestellte Höhe, wird er nicht in voller Größe angezeigt, weil der obere Rand des nächsten Containers ihn bedeckt. –

Ich gebe Ihnen eine Antwort auf das, was Sie vielleicht fragen, obwohl es nicht klar ist. Ich hoffe, das ist nicht zu einfach.

Entfernen Sie die Positionseigenschaft vollständig.

Haben Sie einfach eine div (die standardmäßig 100% Breite) als Kopfzeile an der Spitze Ihres HTML. Der Inhalt sollte in einem anderen div darunter sein.

Divs haben standardmäßig 100% Breite und ihre Höhe hängt von der Höhe ihres Inhalts ab. Sie werden wachsen, um größere Inhalte aufzunehmen. Diese Verhaltensweisen sind, weil sie die Eigenschaft display: block haben.

Quelle

2016-07-24 23:21:35

es funktioniert mit Positionierung! aber jetzt deckt der Hintergrund nur den Raum mit Inhalt ab, aber nicht den Rest von divs Höhe, wie es mit der absoluten Position tut. Wie könnte ich das bitte reparieren? (Entschuldigung für solche grundlegenden Fragen) –

Es funktioniert mit welcher Positionierung? Relativ? Meinst Du "ohne Positionierung"? Weder Ihr Code noch Ihre Frage erwähnen irgendeinen Hintergrund; Ist das jetzt das einzige Problem? Wenn ja, aktualisieren Sie Ihre Frage, damit wir sehen können, was passiert. Ich setze Hintergrundfarben für alle divs, und keiner von ihnen überlappt, wenn ich den Code lief, den Sie zur Verfügung gestellt haben. –

Sie haben% verwendet, was, wenn ich mich richtig erinnere, relativ zum übergeordneten Element ist. vh (Ansichtsfensterhöhe) ist relativ zur Höhe des Bildschirms (100vh ist die volle Höhe des Bildschirms). Ich habe die Hintergrundfarbe nur hinzugefügt, damit sie einfacher zu sehen ist.

<style> 
#header { 
    background-color: #777; 
    height: 20vh; 
} 
#main { 
    background-color: #999; 
    height: 80vh; 
} 
#about { 
    background-color: #777; 
    height: 100vh; 
} 
#contact { 
    background-color: #999; 
    height: 50vh; 
} 
</style>

Quelle

2016-07-25 06:01:54

Sie können auch min-height anstelle von height verwenden. Es wird es bei Bedarf größer erweitern lassen –

Antwort

Verwandte Themen