내가 뭘 잘못하고 있는지 잘 모르겠지만, 무엇을 시도해도 #service-brief-message내용에 따라 컨테이너의 높이를 조정할 수 없습니다 .
나는 추가 display: block하고 심지어 도움을주기 위해 패딩을 주었지만 해결되지 않았습니다.
아무도 내가 뭘 잘못하고 있는지 알아?
#red, #blue {
width: 100%;
height: 200px;
}
#red {
background: red;
}
#blue {
background: blue;
}
#service-brief-message {
background: #FFF;
width: 100%;
height: auto;
padding: 20px 0;
display: block;
position: relative;
}
#service-brief-message-container {
color: #2a2a2a;
text-align: center;
position: absolute;
width: 80%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}<div id="red">
</div>
<div id="service-brief-message">
<div id="service-brief-message-container">
<h1 class="section-title">CUSTOM TAILORED WEBSITE DESIGN SOLUTIONS</h1>
<h3 class="section-description" id="service-brief-description">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</h3>
</div>
</div>
<div id="blue">
</div>#service-brief-message-container다음과 같이 절대 위치를 제거하면 트릭이 수행됩니다.
#service-brief-message {
background: green;
width: 100%;
height: auto;
display: block;
position: relative;
}
#service-brief-message-container {
color: #2a2a2a;
text-align: center;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다