CSS 폭이 작동하지 않음

본문 너비 100 %와 한 열 너비를 30 %로, 다른 너비를 70 %로하여 두 개의 열 레이아웃 페이지를 구현하려고합니다. 그러나 두 번째 열 [너비 : 70 %]는 작동하지 않습니다.CSS 폭이 작동하지 않음

HTML :

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
</head> 
<body> 
    <div class="offer-details">aaaaaaaaaaaaaaaaaaaaaaaaa</div> 
    <div class="offer-map">bbbbbbbbbbbbbbbbbbbbbbbbbbbb</div> 
</body> 
</html>

CSS

html { 
    height: 100%; 
} 

body { 
    background-color: #F3F3F3; 
    width: 100%; 
    height: 100%; 
    font-family: 'Helvetica Neue', helvetica, Arial, sans-serif; 
    overflow: hidden; 
} 

* { 
    margin: 0; 
    padding: 0; 
} 

.offer-details { 
    float: left; 
    width: 30%; 
    height: 100%; 
    background-color: inherit; 
    text-align: justify; 
    overflow: auto; 
} 

.offer-map { 
    float: left; 
    width: 70%; 
    height: 100%; 
    background-position: center center; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    -webkit-transition: opacity 1s cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    border-left: 5px solid #E1E1E1; 
    overflow: auto; 
    background-color: white; 
}

jQuery를 여기

$(function() { 
     var width = $(document).width()+"px"; 
     var height = $(document).height()+"px"; 
     $('body').css({'width': width, 'height': height}); 
    })

는 jsfiddle입니다. 두 번째 열의 69 %를 표시하려고 시도했지만 화면을 덮지는 않습니다. 스크린을 덮기 위해 어떻게 30 %와 70 %의 컬럼을 만들 수 있습니까?

전체 화면 jsfiddle : http://jsfiddle.net/yBNEr/2/embedded/result/

감사합니다!

출처

2012-10-08 rnk

.offer-map에 5px 왼쪽 테두리가 있기 때문입니다. 상자 모델로 인해 실제 너비가 .offer-map 70 % + 5px가됩니다.

하나의 해결책은 브라우저 지원 다릅니다하지만 예를 들어

.offer-map { 
    box-sizing: border-box; 
}

, border-box에있는 상자의 크기를 변경하는 것입니다. 문제가 .offer-map가 border-left의를 가지고 있다는 사실에서 유래, http://jsfiddle.net/yBNEr/3/

또 다른 옵션은 음의 오른쪽 여백이 왼쪽 테두리를 상쇄하는 것입니다, 예를 들어

.offer-map { 
    margin-right: -5px; 
}

이 http://jsfiddle.net/yBNEr/5/

출처

2012-10-08 05:24:42 Phil

간단히 말하자면 참조하십시오 5px.

여기에 포함 된 div를 사용하여 원하는 효과를 얻는 방법이 있습니다.

jsfiddle

출처

2012-10-08 05:33:45 tomaroo

CSS 폭이 작동하지 않음

답변

관련 문제