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的百分比宽度不工作

回答

相关问题