css的百分比寬度不工作

我試圖實現兩個列布局頁面的身體寬度100％和一列寬度爲30％和其他70％。但第二列[width：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。

一種解決方案是盒子大小更改爲border-box，如

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

雖然瀏覽器支持不同。見http://jsfiddle.net/yBNEr/3/

另一種選擇是，以抵消左邊框與負右緣，如

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

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

來源

2012-10-08 05:24:42 Phil

簡單地說，這個問題的事實，.offer-map有border-left莖爲5px。

下面是一個簡單地使用包含div來達到預期效果的解決方案。

jsfiddle

來源

2012-10-08 05:33:45 tomaroo

css的百分比寬度不工作

回答

相關問題