CSS宽度百分比不起作用

Question

我正在尝试通过100％的正文宽度实现两列布局页面，而将30％的另一列宽度实现为70％。 但是第二列[width：70％]不起作用。

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/

谢谢！

Answer 1

这是因为.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/

Answer 2

简而言之，问题源于.offer-map border-left为5px的事实。

这是一个仅使用包含div即可达到所需效果的解决方案。

jsfiddle

CSS宽度百分比不起作用

问题描述

2 个解决方案

解决方案1
5 已采纳 2012-10-08 05:24:42

解决方案2
1 2012-10-08 05:33:45

CSS宽度百分比不起作用

问题描述

2 个解决方案

解决方案1 5 已采纳 2012-10-08 05:24:42

解决方案2 1 2012-10-08 05:33:45

解决方案1
5 已采纳 2012-10-08 05:24:42

解决方案2
1 2012-10-08 05:33:45