두 divs가 서로 겹쳐지고 있습니다. 어떻게 피하는가?

저는 부트 스트랩과 웹 개발에 익숙합니다. 나는 길이와 폭의 비율을 항상 16 : 9로 유지하는 반응 형 div를 만들고 싶었다. 이 응답 부분 위에 머리글 및 바닥 글 구역이 있습니다. 그러나 머리글과 바닥 글 섹션은 서로 쌓여 있습니다. 어떤 도움을 주시면 감사하겠습니다.두 divs가 서로 겹쳐지고 있습니다. 어떻게 피하는가?

HTML

<div class="post-card-outer"> 
       <div class="post-card-inner"> 
        <div class="space-header"> 
        </div> 
        <div class=" post-content"> 
         <div class="col-sm-6 content-leftcol"> 
          <div class="image-sec-post-card"> 
           <img class = "image-post-card" src="3.jpeg"> 
          </div> 
         </div> 
         <div class="col-sm-6 content-rightcol"> 
          right 
         </div> 
        </div> 
        <div class="space-footer"> 
         GGDYGDYGDYGDYGYDGDGYD 
        </div> 
       </div><!--post-card-inner--> 
      </div><!--post-card-outer-->

CSS를 헤더가 맨 위에 것으로 의미가 잘 경우

.post-card-outer{ 
    width: 100%; 
    padding-bottom: 56.25%; /* 16:9= 56.25 %; 4:3 = 75%*/ 
    position: relative; 
    background: coral; 
    margin-top:50px; 
} 
.post-card-inner{ 
    position: absolute; 
    top: 0; bottom: 0; left: 0; right: 0; 
} 
.space-header {margin-top:-10px; height:10px; background-color:red;} 
.space-footer {margin-bottom:-10px; height:10px; background-color:red;color:white;} 
.post-content{ 
    min-height:100%; background-color:green; 
    position:absolute; 
    top: 0; bottom: 0; left: 0; right: 0; 
} 
.content-leftcol{ 
    background-color:black; 
    width:50%; 
    height:100%; 
} 
.content-rightcol{ 
    background-color:blue; 
    width:50%; 
} 
.image-sec-post-card{ 
    border:1px solid white; 
    vertical-align: middle; 
    overflow: hidden; 
} 
.image-post-card{ 
    max-width:100%; 
    max-height:100%; 
    border:1px solid green; 
}

출처

2016-09-04 Pavan Kumar

및 바닥 글은 다음 페이지/요소의 맨 아래에있을 의미 귀하 절대 위치 또는 고정 위치를 사용할 수 있습니다.

절대 위치 지정을 사용하면 요소가 자동으로 창/요소의 왼쪽 상단으로 설정됩니다. 그리드에서 (0,0) 위치로 생각할 수 있습니다. 요소의 위치를 절대적으로 결정하면 TOP, RIGHT, BOTTOM 및 LEFT 속성을 사용할 수 있습니다. 이러한 속성은 요소의 출처에 직접적인 영향을줍니다. 예 : Top : 0은 요소를 맨 위의 창에 배치하고 Bottom : 0은 요소를 맨 아래에 배치합니다. 요소와 창의 측면 사이에 약간의 공간을두고 싶다면 간단히 숫자를 늘릴 수 있습니다. 상단 : 20px 또는 상단 : 2vh

위와 아래로 스크롤하려고해도 요소가 정적이고 움직이지 않을 것이라는 점을 제외하면 고정 위치는 거의 같습니다. 이것은 고정 된 탐색 모음과 고정 된 바닥 글을 얻는 방법입니다.

.space-header {margin-top:-10px; height:10px; background-color:red;top:0;position:absolute;} 

.space-footer {margin-bottom:-10px; height:10px; background-color:red;color:white;bottom:0;position:absolute;}

출처

2016-09-04 06:11:26

body{ margin:0; padding:0; color:#fff;} .space-header {height:50px; background-color:red;} .space-footer {height:50px; background-color:red;color:white;} .post-content{min-height:100%; background-color:green;} .content-leftcol{background-color:black;width:50%;height:47vw; float:left;} .content-rightcol{background-color:blue;width:50%;height:47vw; float:left;} .image-sec-post-card{border:1px solid white;vertical-align: middle;overflow: hidden;}.image-post-card{max-width:100%; max-height:100%; border:1px solid green;} .clearfix{clear:both; float:none;} 

<body><div class="space-header">Header 
       </div> 
        <div class="clearfix"></div> 
       <div class=" post-content"> 
        <div class="col-sm-6 content-leftcol"> 
         <div class="image-sec-post-card"> 
          <img class = "image-post-card" src="3.jpeg">Left 
         </div> 
        </div> 
        <div class="col-sm-6 content-rightcol"> 
         right 
        </div> 
         <div class="clearfix"></div> 
       <div class="space-footer"> 
        Footer 
       </div> 
      </div> </body>

출처

2016-09-04 06:32:49 Febin

두 divs가 서로 겹쳐지고 있습니다. 어떻게 피하는가?

답변

관련 문제