Positionieren und Ändern der Größe div Elemente innerhalb eines div

Question

Ich habe die folgenden code auf CodePen und ich versuche, eine Website von Grund auf neu zu erstellen. Jeder Abschnitt wird seine eigene ganze Seite sein, weshalb ich die Abschnittsklasse erstellt habe. In meinem ersten Abschnitt (ungefähr) habe ich zwei divs erstellt. Letztendlich möchte ich, dass es so aussieht, egal wie groß der Browser ist . Wenn das Fenster in der Größe geändert wird, sollte der Inhalt automatisch an die Größe des Bildschirms angepasst werden. Aber der Code, den ich bisher habe, verschiebt die aboutInfo, wenn das Fenster kleiner wird (obwohl ich die Position auf absolut setze).

Mein Code so weit:

#about { 
    background-color: #D1C9BE; 
    position: relative; 
} 

#aboutImage { 
    border-style: dashed; 
    border-color: red; 
    background-color: white; 

    position: absolute; 
    height: 150px; 
    width: 150px; 
    top: 50%; 
    transform: translateY(-50%); 
    left: 300px; 
} 

#aboutInfo { 
    border-style: dotted; 
    border-color: black; 
    background-color: white; 
    font-size: 35px; 
    text-align: right; 

    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    right: 200px; 
} 

Ich habe ein paar Korrekturen recherchiert und ich habe gelesen, dass ich Flexbox, jQuery, und auch nur ein Update von margin und padding verwenden kann. An dieser Stelle bin ich mir nicht sicher, welche Lösung am besten funktioniert und welche einfacher zu verwenden ist.

Also meine Fragen zusammenfassen:

1. Wie behebe ich die Position der Unternehmeninformationen, damit er nicht bewegen?

2. Wie kann ich den Inhalt der gesamten Website automatisch an die Größe eines Browsers anpassen?

Answer 1

body { 
    margin: 0; 
} 

html, body { 
    height:100%; 
    position: relative; 
} 

/* FULLPAGE */ 
.section { 
    height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 

} 

/* ABOUT */ 
#about { 
    background-color: #D1C9BE; 
    position: relative; 
} 

#aboutImage { 
    border-style: dashed; 
    border-color: red; 
    background-color: white; 
    height: 150px; 
    width: 150px; 
} 

#aboutInfo { 
    border-style: dotted; 
    border-color: black; 
    background-color: white; 
    margin-left: 20px; 
    font-size: 35px; 
    text-align: right; 

} 

#aboutInfo p { 
    font-size: 15px; 
} 


/* SKILLS */ 
#section2 { 
    background-color: #D8B17B; 
} 

/* PROJECTS */ 
#section3 { 
    background-color: #9E9283; 
} 

/* OTHER */ 
#section4 { 
    background-color: #70614C; 
} 

Answer 2

dieses Styling Versuchen Sie, ich habe Ihre CSS aktualisiert flex verwenden für

Positionierung

body { 
    margin: 0; 
} 

html, body { 
    height:100%; 
    position: relative; 
} 

/* FULLPAGE */ 
.section { 
    height: 100vh; 
    display: flex; 
    justify-content: space-around; 
    align-items: center; 

} 

/* ABOUT */ 
#about { 
    background-color: #D1C9BE; 
    position: relative; 
} 

#aboutImage { 
    border-style: dashed; 
    border-color: red; 
    background-color: white; 
    height: 150px; 
    width: 150px; 
} 

#aboutInfo { 
    border-style: dotted; 
    border-color: black; 
    background-color: white; 

    font-size: 35px; 
    text-align: right; 

} 

#aboutInfo p { 
    font-size: 15px; 
} 


/* SKILLS */ 
#section2 { 
    background-color: #D8B17B; 
} 

/* PROJECTS */ 
#section3 { 
    background-color: #9E9283; 
} 

/* OTHER */ 
#section4 { 
    background-color: #70614C; 
} 

Answer 3

Verwenden flex in Reaktion divs zu machen. Verwenden Sie nicht die absolute Positionierung dafür.

Hier ist eine aktualisierte Codepen.

.section { 
    display: flex; 
    padding: 0 48px; /* adds space to edges of screen */ 
    align-items: center; /* vertical centering */ 
} 

.section > :first-child { 
    margin-right: 48px; /* sets distance between boxes */ 
} 

Here is a great article from MDN on using flex.