테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

우측과 하단이 켭치는 문제 드립니다. 채택완료

Ezer 5년 전 조회 3,442
답변 4
목록

안녕하세요.

우측과 하단이 켭치는 문제를 해결하고자 도움을 요청 드립니다.

우측에 구글광고와 환율정보등을 추가 했더니, 이런 문제점이 생겼습니다.

고수님들의 조언 부탁드립니다. 감사합니다.

#그누보드5 #우측 #하단
댓글을 작성하려면 로그인이 필요합니다.

답변 4개

채택된 답변
+20 포인트
sad4u
sad4u
5년 전

스샷처럼 되야 되는지 맞는지 모르겠습니다. 만약에 저렇게 되어야 한다면 CSS 부분이 문제인거 같습니다. 

mobile.css 에서 몇부분 수정해야 될거 같네요. 

개발자도구로 보고 복붙한 부분이라 보기 좀 그렇지만, 주석할 부분은 주석하고 추가할 부분은 추가하면 될거 같네요

 

 

@media (min-width: 970px)

mobile.css?…=191202:148

#container {

  1. /* padding-right: 290px; */
  2. /* position: relative; */

}

mobile.css?…=191202:140

#container {

  1. /* position: relative; */
  2. /* min-height: 300px; */

}

@media (min-width: 970px)

mobile.css?…=191202:149

#idx_left {

  1. min-height: 760px;
  2. width: 70%;
  3. float: left;

}

@media (min-width: 970px)

mobile.css?…=191202:150

#idx_right {

  1. /* position: absolute; */
  2. top: 0;
  3. right: 0;
  4. width: 300px;
  5. width: 29%;
  6. float: right;

}

 

 

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

E
Ezer
5년 전
세세하게 신경써 주셔서 감사합니다. 아주 잘 됩니다. 정말 정말 감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

E
Ezer
5년 전

[변경 전]
@media (min-width: 970px){
    #wrapper {margin:0 auto; max-width:1200px}
    #container {padding-right:290px;position:relative}
    #idx_left{padding:20px 10px;min-height:760px }
    #idx_right{position:absolute;top:0;right:0;width:300px;margin:20px 0;padding:0 10px}
    .pc_sound_only{display:inline-block;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;width:1px !important;height:1px !important;font-size:0 !important;line-height:0 !important;overflow:hidden}
    #container_title {font-size:1.846em;margin:0 0 10px}
}

[변경 후]
@media (min-width: 970px){
    #wrapper {margin:0 auto; max-width:1200px}
    #container {padding-right:290px;position:relative}
    #idx_left{padding:20px 10px;min-height:1400px }
    #idx_right{position:absolute;top:0;right:0;width:300px;margin:20px 0;padding:0 10px}
    .pc_sound_only{display:inline-block;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;width:1px !important;height:1px !important;font-size:0 !important;line-height:0 !important;overflow:hidden}
    #container_title {font-size:1.846em;margin:0 0 10px}
}

에서 min-height:760px 를 min-height:1400px 로 수정하여 해결


검토해 주신 모든 분께 감사합니다. 좋은 하루되세요.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

s
sinbi Expert
5년 전

https://sir.kr/qa/333038

https://codepen.io/sinbi/pen/KKMdmXm  (overflow 있고 없고 차이를 비교해 보세요.)

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

s
sinbi Expert
5년 전

크롬인데, 겹쳐 보이지 않습니다.

Ctrl + F5 새로고침 해보세요.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

E
Ezer
5년 전
안녕하세요 바로 검토해 주셔서 감사합니다.
특정 조건일때 일어나는 현상입니다.
https://www.uknara.com/bbs/board.php?bo_table=jobs

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인