Question

我在过去的30分钟内搜索了这个，我尝试了包括VH在内的所有解决方案，将HTML / Body的宽度设置为100％，但由于某种原因，它对我来说并不起作用。

如果您查看图片：http://gyazo.com/a4df21fa35dda0805e344ba9d22b30be

由于某种原因，它不会扩展到整个屏幕。为什么我的屏幕底部甚至还有水平滚动？

<style>
body {
background: url('http://i.imgur.com/jzI8yai.jpg') no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
}
html {
width: 100%;
}
.bar {

background: #003366;
width: 100%;
height: 50px;
position: fixed;
bottom: 0;
margin: 0;
overflow: hidden;

}


</style>

<body>
<div class="pictures">
</div>

<div class="bar">

Hello

</div>



</body>

Answer 1

您需要添加以下样式

html, body {
    margin : 0;
    padding : 0;
}

Answer 2

You need to add margin:0 to the body element:

body{
  margin: 0;
}

In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.

That's one of the reason why people using Normalizr or a reset css to start a new project. Another approach to avoid not desirable results can be something like:

* { 
    margin: 0; 
    padding: 0; 
    border: 0; 
}

将div扩展到整个屏幕

2 个答案: