div内のdiv要素の配置とサイズ変更

Question

私はCodePenに次のようなcodeを持っています。私は最初からウェブサイトを作成しようとしています。各セクションは独自のフルページとなるため、セクションクラスを作成しました。最初のセクション（about）の中で、私は2つのdivを作成しました。最終的には、ブラウザのサイズに関係なく、このように見えるようにしたいと考えています。ウィンドウのサイズが変更されると、内容も画面に合わせて自動的にリサイズされます。しかし、私がこれまでに持っていたコードは、ウィンドウが小さくなったときにaboutInfoを移動します（絶対位置に設定しても）。これまで

マイコード：

#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; 
} 

私はいくつかの修正を研究してきたと私はフレキシボックス、jQueryの、およびマージンとパディングのだけでも、修正プログラムを使用できることを読みました。現時点では、どのソリューションが最もうまくいくのか、どのソリューションが使いやすくなるのかよく分かりません。

だから私の質問に要約する：

1. 私は動き回るからそれを維持するためにaboutInfoの位置を固定するにはどうすればよいですか？

2. どのサイズのブラウザにも合わせてウェブサイト全体のコンテンツのサイズを自動的に変更するにはどうすればよいですか？

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

このスタイリングを試してみてください、私は応答divを作るために使用flex

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

を位置決めするためのフレックスを使用するようにCSSを更新しました。 は絶対配置を使用しないでください。

ここには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.