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