Question

首先为你即将看到的非常混乱的代码道歉，这个游戏还是新手！

我希望每个部分与浏览器窗口大小相同，此刻似乎工作正常。但是我遇到了一个问题，当我添加一定量的内容，图像或任何内容时，内容溢出到上面的div中。

HTML

    <div class="header">
</div>
<div id="work">
    <div class="project clouds 1">
        <div class="center">
            <div class="icon"></div>
            <p class="pTitle">Title</p>
            <p class="pSub">Sub</p>
            <p class="pAbout">Lorem ipsum dolor sit amet, consectetur adipiscing elit.     Donec vel massa erat. Donec urna odio, pulvinar a cursus eu, lobortis non odio. Donec lorem sem, adipiscing vitae velit vel, vestibulum mattis nisi. Duis ullamcorper vitae dui vitae porta. Maecenas ultrices quam quam, eu tristique dolor placerat fermentum. Pellentesque cursus volutpat odio et aliquam. Proin erat felis, cursus sed ligula in, commodo gravida purus. Donec vestibulum purus a ante sagittis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus tempor ultrices tellus, et tempus risus lobortis at. Nunc placerat elementum dui, id tincidunt ante pellentesque sit amet.

Phasellus ut accumsan ipsum, a bibendum ante. In in sagittis elit. Pellentesque et urna id metus fermentum convallis sodales ut velit. In vel blandit sapien, at mattis risus. Nunc eleifend nibh in massa vestibulum, vel mattis odio scelerisque. Praesent faucibus nibh a arcu suscipit, non pretium arcu venenatis. Sed ornare sit amet nisi in rhoncus. Phasellus et ligula ullamcorper, ullamcorper turpis rhoncus, elementum leo.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam semper mattis turpis, vel vulputate nibh ornare at. Mauris non tincidunt diam. Nulla arcu velit, rhoncus id nisi quis, posuere varius turpis. Sed ut leo tortor. Duis blandit, sapien quis laoreet suscipit, nibh felis scelerisque arcu, vitae convallis leo augue at leo. Proin eget neque rhoncus justo lobortis vehicula. Sed posuere tellus porttitor diam congue, ut imperdiet libero egestas. Aliquam pulvinar ligula ac erat suscipit tempus. Sed sed lacus vitae orci porttitor fringilla nec id tortor. Mauris sapien lorem, pretium eu turpis sed, luctus interdum augue. Fusce sed ligula sollicitudin, gravida libero vitae, ultricies nunc. Ut rhoncus tortor id laoreet tincidunt. Etiam pulvinar enim id purus convallis dictum. Donec suscipit lectus in adipiscing fermentum. Curabitur cursus commodo mauris vel imperdiet.</p>
         </div>
    </div>
</div>
<div class="project ice 2">
    <div class="center">
        <div class="icon"></div>
        <p class="pTitle">Title</p>
        <p class="pSub">Sub</p>
        <p class="pAbout">About</p>
    </div>
</div>

CSS

body {
width:100%;
margin:0 auto;
}

.header {
height:100vh;
background-color:#2c3e50;
width:100%;
color:#fff;
font-family:'Open Sans', sans-serif;
font-weight:300;
font-size:1.7em;
}

.header .alignRight {
text-align:right;
position:relative;
top:45%;
transform:translate(0,-50%);
-webkit-transform:translate(0,-50%);
-moz-transform:translate(0,-50%);
-o-transform:translate(0,-50%);
-ms-transform:translate(0,-50%);
width:500px;
margin:0 auto;
}

.header .alignRight span {
font-weight:400;
}

.viewWork {
margin-top:15px;
}

.viewWork a {
text-transform:capitalize;
font-size:.6em;
text-decoration:none;
color:rgba(255,255,255,.4);
border-top:1px solid rgba(255,255,255,.0);
border-bottom:1px solid rgba(255,255,255,.0);
-webkit-transition:.5s;
transition:.5s;
padding:4px;
}

.viewWork a:hover {
color:#fff;
border-color:#fff;
}

/* End Header/Section 1 */
/* Start Portfolio/Section2 */


.project {
height:100vh;
background-color:#2c3e50;
width:100%;
color:#1c1c1c;
font-family:'Open Sans', sans-serif;
font-weight:300;
font-size:1em;
}

.project .center {
text-align:center;
position:relative;
top:5rem;
transform:translate(0,-20%);
-webkit-transform:translate(0,-20%);
-moz-transform:translate(0,-20%);
-o-transform:translate(0,-20%);
-ms-transform:translate(0,-20%);
width:800px;
margin:0 auto;
}

.project .center span {
font-weight:400;
}

.icon {
margin:0 auto;
background-color:red;
width: 40px;
height:40px;
}

.clouds {
background-color:#f2f2f2;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border-bottom:1px solid #d6d6d6;
}

.ice {
background-color:#fff;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border-bottom:1px solid #d6d6d6;
}

.project .center p{
margin:0;
padding-top:12px;
}

JSFiddle

再次，对于凌乱的代码感到抱歉，但我相信你能看到我的问题。我想从每个部分的顶部开始相同的距离。谢谢:)）

Answer 1

从.project .center {

中删除这些样式

transform:translate(0,-20%);
-webkit-transform:translate(0,-20%);
-moz-transform:translate(0,-20%);
-o-transform:translate(0,-20%);
-ms-transform:translate(0,-20%);

参见 JSFiddle

添加更多内容溢出到其他div

1 个答案: