0
嘗試使用疊加網格時爲頁面添加內容時，我試圖放置的內容超出了身體邊界？我正在努力解決它，但我不知道如何？我嘗試在CSS中創建一個身體參考，並調整高度，但沒有進展。這是我的代碼。爲什麼我的身體不適應網頁中的內容
header {
height: 900px;
background-image: url('../img/large-banner-image.png');
background-repeat: no-repeat;
background-position: center top;
}
span {
font: 60px Pacifico, sans-serif;
font-weight: 400;
}
.Header-Type {
vertical-align: -16px
}
img {
display: inline-block;
margin: 17px;
}
h1 {
text-align: center;
position: relative;
top: 62px;
right: 13px;
}
h2 {
font: 22px Raleway, sans-serif;
font-weight: 700;
}
p {
font: 36px Raleway, sans-serif;
font-weight: 300;
text-align: center;
position: relative;
top: 90px;
}
.grey {
text-align: center;
position: relative;
height: 427px;
width: 1600px;
background-color: #e3e3e3;
bottom: -250px;
z-index: -1
}
.Phone {
float: right;
position: relative;
display: inline-block;
top: -567px;
right: 33.5%;
border-style: solid;
}
.Down-Arrow {
text-align: center;
position: relative;
top: -574px;
}
.white-button1 {
float: right;
display: inline-block;
position: absolute;
right: 53%;
bottom: -260px;
border-style: solid;
z-index: 1;
}
.white-button2 {
float: right;
display: inline-block;
position: absolute;
right: 53%;
bottom: -60px;
border-style: solid;
z-index: 1;
}
.white-button3 {
float: right;
display: inline-block;
position: absolute;
right: 44%;
bottom: 19px;
border-style: solid;
}
.black-button {
float: right;
display: inline-block;
position: absolute;
right: 43.4%;
bottom: -170px;
border-style: solid;
}
.cursor {
float: right;
display: inline-block;
position: absolute;
right: 43.4%;
bottom: -172px;
border-style: solid;
}
.angle {
float: right;
display: inline-block;
position: absolute;
right: 35.8%;
bottom: -267px;
border-style: solid;
}
.cursor {
float: right;
display: inline-block;
position: absolute;
right: 43.4%;
bottom: -174px;
border-style: solid;
z-index: 1;
}
.content-alt {
float: left;
margin-left: 100px;
margin-left: 5%;
position: absolute;
top: 750px;
left: 170px;
width: 20%;
}
.content-alt2 {
float: left;
margin-left: 100px;
margin-left: 5%;
position: absolute;
top: 918px;
left: 170px;
width: 20%;
}
.content {
float: right;
margin-right: 100px;
margin-right: 5%;
position: absolute;
top: 750px;
right: 165px;
width: 20%;
}
.content2 {
float: right;
margin-right: 100px;
margin-right: 5%;
position: absolute;
top: 918px;
right: 165px;
width: 20%;
}
.alternate {
float: left;
margin-left: 100px;
margin-left: 5%;
position: absolute;
left: 110px;
width: 36%;
}
.other {
display: none;
text-align: center;
}
.near-bottom {
display: none;
text-align: center;
}
footer {
word-spacing: 30px;
}
.text {
font: 16px HelveticaNeue, sans-serif;
line-height: 1.6;
font-weight: 400;
}
.footer {
display: none;
font: 16px HelveticaNeue, sans-serif;
font-weight: 400;
}
.Image {
display: none;
text-align: center;
}<header>
<h1> <img style="vertical-align:middle" src="img/focus.png" /><span class="Header-Type">Focus</span></h1>
<p>A landing page for your app with focus</p>
</header>
<div class="Down-Arrow">
<img src="img/down-arrow.png" />
</div>
<div id="white">
<div class="Phone">
<img src="img/iphone.png" />
</div>
<div class="white-button1">
<img src="img/white-dot.png" />
</div>
<div class="white-button2">
<img src="img/white-dot.png" />
</div>
<div class="white-button3">
<img src="img/white-dot.png" />
</div>
</div>
<div class="black-button">
<img src="img/Black-dot.png" />
</div>
<div class="cursor">
<img src="img/cursor.png" />
</div>
<div class="angle">
<img src="img/angled-line.png" />
</div>
<div class="grey"></div>
<div id="text-content">
<div class="content-alt">
<h2>Great Feature</h2>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
</div>
<div class="content">
<h2>Great Feature</h2>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
</div>
<div class="content-alt2">
<h2>Another Great Feature</h2>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
</div>
<div class="content2">
<h2>Another Great Feature</h2>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
</div>
</div>
<div class="alternate">
<h2>Get The App Today!</h2>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla nisl congue congue. Maecenas nec condimentum libero, at elementum mauris. Phasellus eget nisi dapibus, ultricies nisl at, hendrerit risusuis ornare luctus id sollicitudin
ante lobortis at.</div>
</div>
<div class="other">
<h3>「Focus is an app that is extremely useful. I would reccomend it to anyone.」</h3>
<div>Kyle Turner, Blogger</div>
</div>
<div class="Image">
<img src="img/people.png" />
</div>
<div class="near-bottom">
<h4>Say Hi & Get in Touch</h4>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse.</div>
</div>
<footer>
<p class="footer">Contact Download Press Email Support</p>
</footer>
意味着高度爲人體不會底部 – Struggler