Question

我正在尝试实现两个列布局页面，按体宽100％和一列宽度为30％，其他为70％。但是第二列[宽度：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的{{1}}为5px。

这是一个简单地使用包含div来达到预期效果的解决方案。

jsfiddle

css宽度百分比不起作用

2 个答案: