0
私はAJAX呼び出しから返されたコンテンツの配置に苦労しています。ここで要素の配置
は私のHTMLのレイアウト方法の例です：
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<section id="content">
<div id="container">
<div id="about">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia odit culpa excepturi itaque hic laborum odio nam deserunt ipsum dolor rerum repudiandae, quidem voluptatem nisi numquam tempora vel consequuntur harum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam ut error consectetur eum delectus porro dolore repellendus quidem! Ad, dignissimos minus debitis nam sunt aliquid eius quam cum, omnis magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe vero ducimus reprehenderit quibusdam esse sed, porro pariatur illum natus tempore? Iste laborum odio deleniti molestias praesentium delectus repudiandae consequatur corporis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est fugit provident, labore expedita nostrum laborum nesciunt! Assumenda inventore repudiandae dignissimos animi autem, dolorem sint, incidunt officia quam porro, perspiciatis fuga.
</div>
</div> <!-- end of content -->
</section> <!-- end of container -->
</body>
contact.html、bio.htmlなどが...すべてのabout.html
のようなものと、ここでは関係CSSです：
#container {
height: 100vh;
width: 100vw;
background-color: white;
text-align: center;}
#contact {
top: 30%;
background-color: yellow;
padding: 50px 50px;}
#about {
transform: translateY(60%);
background-color: red;
padding: 50px 50px;}
#bio {
transform: translateY(60%);
background-color: blue;
padding: 50px 50px;}
#gallery {
transform: translateY(60%);
background-color: green;
padding: 50px 50px;}
私が持っている問題は、私は、「約」、「連絡先」、「コンテナ」などのidを持つdiv要素のコンテンツを配置しようとすると...のdivが置か取得することはできませんです。連絡先のtopプロパティを30%に設定すると、divは移動せず、ページの上部に固定されます。
私はtransformを使用して他のdivを配置することができましたが、それはハックのようです。これを行う正しい方法は何ですか？あなたの時間をありがとう。