우측과 하단이 켭치는 문제 드립니다.
관련링크
본문
안녕하세요.
우측과 하단이 켭치는 문제를 해결하고자 도움을 요청 드립니다.
우측에 구글광고와 환율정보등을 추가 했더니, 이런 문제점이 생겼습니다.
고수님들의 조언 부탁드립니다. 감사합니다.
답변 4
스샷처럼 되야 되는지 맞는지 모르겠습니다. 만약에 저렇게 되어야 한다면 CSS 부분이 문제인거 같습니다.
mobile.css 에서 몇부분 수정해야 될거 같네요.
개발자도구로 보고 복붙한 부분이라 보기 좀 그렇지만, 주석할 부분은 주석하고 추가할 부분은 추가하면 될거 같네요
@media (min-width: 970px)
mobile.css?…=191202:148
#container {
- /* padding-right: 290px; */
- /* position: relative; */
}
mobile.css?…=191202:140
#container {
- /* position: relative; */
- /* min-height: 300px; */
}
@media (min-width: 970px)
mobile.css?…=191202:149
#idx_left {
- padding: 20px 10px;
- min-height: 760px;
- width: 70%;
- float: left;
}
@media (min-width: 970px)
mobile.css?…=191202:150
#idx_right {
- /* position: absolute; */
- top: 0;
- right: 0;
- width: 300px;
- margin: 20px 0;
- padding: 0 10px;
- width: 29%;
- float: right;
}
크롬인데, 겹쳐 보이지 않습니다.
Ctrl + F5 새로고침 해보세요.
[변경 전]
@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 로 수정하여 해결
검토해 주신 모든 분께 감사합니다. 좋은 하루되세요.