Question

如何摆脱浏览器窗口右侧的多余空间？

在下图中，Firebug突出显示了我的#menuDiv div，右侧的白色部分不是该元素边框的一部分。那么它来自哪里？也许是body？

enter image description here

当我以同样的方式看待身体元素时，Firebug表明它确实在右边有额外的空间。但它也表明body的边距和填充为0！这里发生了什么？我该如何修复它以使页面居中？

enter image description here

（顺便说一句，顶部有一些空白区域因为我已将body的高度设置为html的98％，因为身高尺寸原因。）

演示

http://tuningcode.com/practice/2014-4-24-01.html

代码

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Math Browser</title>
<style>
    html {
        font-family: "Cambria", "Arial", "Helvetica", sans-serif;
    }
    html, body {
        height: 100%;
    }
    body {
        height: 98%;
    }
    * {
        padding: 0;
        margin: 0;
    }
    .info-pane .section p {
        margin-top: 1em;
        margin-bottom: 1em;
    }
    div {
        padding: 5px;
        outline: none;
    }
    #browserDiv, #infoDiv {
        overflow: auto;
        max-height: 600px;
    }
    #browserDiv, #infoDiv {
        float: left;
        margin: 1%;
        height: 85%;
    }
    #browserDiv {
        width: 46%;
        border: 1px solid black;
    }
    #infoDiv {
        width: 46%;
        border: 1px solid #47d;
    }
    #menuDiv {
        width: 95%;
        border: 1px solid goldenrod;
        height: 25px;
        margin: 1%;
        text-align: center;
    }
    #menuDiv h2.innerDiv {
        display: inline-block;
        vertical-align: middle;
    }
</style>
</head>
<body>
<div id="menuDiv"><h2 class="innerDiv">Math Browser</h2></div>
<div id="browserDiv"></div>
<div id="infoDiv"></div>
</body>
</html>

Answer 1

我将您的样本粘贴到JSFiddle。看起来至少部分问题是：

#menuDiv {
    width: 95%;
    border: 1px solid goldenrod;
    height: 25px;
    margin: 1%;
    text-align: center;
}

width: 95%;并非正常运作。简单地删除它似乎可以解决问题。

Answer 2

在css中，width默认情况下不包含填充或边框，因此两个宽度为48％且边距为1％的div将适合其父级的宽度。添加任何填充或边框的那一刻，内部div的组合宽度将大于100％。

你可以做两件事：

1）设置css的box-sizing属性，记住有一些compatibility issues

#browserDiv, #infoDiv {
    box-sixing: border-box;
}

2）设置包装div的宽度/边距，并使用内部div设置填充/边框。

<div class="wrapper"><div id="browserDiv"></div></div>
<div class="wrapper"><div id="infoDiv"></div></div>

.wrapper {
    width: 48%;
    margin: 0 1%;
}
#browserDiv, #infoDiv {
    padding: 5px;
}
#browserDiv {
    border: 1px solid blue;
}
#infoDiv {
    border: 1px solid red;
}

我有点像恐龙，所以我倾向于使用后者。

Answer 3

你的罪魁祸首：

#menuDiv {
    width: 95%;
}

使用display:block魔法（所有<div>的默认设置），您不需要设置宽度以获得全宽

摆脱窗户右侧的多余空间

演示

代码

3 个答案: