为什么我的身体不适应网页中的内容

Question

尝试使用叠加网格时为页面添加内容时，我试图放置的内容超出了身体边界？我正在努力解决它，但我不知道如何？我尝试在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>

Answer 1

更改.grey宽度100%。

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: 100%; 
 
    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>

JSFiddle