Question

我尝试创建一个没有滚动条的全屏网站，并且在定义边距方面存在问题。给出一个最小的例子：

html {
    margin: 0;
    padding: 0;
    height: 100%;
    background: yellow;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    max-height: 100%;
    background: green;
}

h1 {
    background: gray;
}

    <body>
        <h1>Heading 1</h1>
    </body>

为什么我会在侧面顶部获得html元素的黄色背景？更令我惊讶的是，如果我在h1元素之前添加文本，黄色部分会消失。

html {
    margin: 0;
    padding: 0;
    height: 100%;
    background: yellow;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    max-height: 100%;
    background: green;
}

h1 {
    background: gray;
}

    <body>
        Add some text and the yellow part disappears.
        <h1>Heading 1</h1>
    </body>

有没有想法避免顶部的黄色部分而不在标题元素之前添加文本？

Answer 1

您的body元素是非浮动块元素，就像包含的h1元素一样。因此，body元素的大小/位置适应其子元素h1，其具有定义为默认值的边距（margin-top）。

您的问题有多种解决方案，一种是使body-element浮动。这样做的好处是（与删除h1上的边距相比），即使插入了带边距的不同元素，我也会以相同的方式工作。

＆＃13;

html {
    margin: 0;
    padding: 0;
    height: 100%;
    background: yellow;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    max-height: 100%;
    background: green;
    float: left;
    width: 100%;
}

h1 {
    background: gray;
}

＆＃13;

<body>
        <h1>Heading 1</h1>
    </body>

＆＃13;

html {
    margin: 0;
    padding: 0;
    height: 100%;
    background: yellow;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    max-height: 100%;
    background: green;
    float: left; 
    width: 100%;
}

h1 {
    background: gray;
}

＆＃13;

<body>
        <h1>Heading 1</h1>
    </body>

＆＃13;

Answer 2

只需将margin-top:0;放在h1上即可。 Example here

我建议使用CSS重置来避免这样的问题。 Eric Meyer's非常有名且很简单。

Answer 3

当开始一个新项目或作为一般规则时，总是尝试重置浏览器＆＃34;添加＆＃34;的许多预定义的css值。有一些＆＃34; css reset＆＃34;已经创建的样式表，你可以通过谷歌搜索找到，但对于一个简单的解决方案，你总是可以从：

* { margin: 0; padding: 0;}

然后，您可以随时添加影响文档中所有元素的其他规则，例如＆＃34; font-family：sans-serif＆＃34;等等这样你就可以确保你有一个坚实的起点，而不会在浏览器中看到太多不同的外观。

稍后，您可以更明确地将规则添加到需要样式化的元素

Answer 4

这就是我如何做一个全屏网站，它非常简单和干净：

<body>

<h1>Main heading</h1>

</body>

CSS代码：

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
  background-color: green;
  height: 100vh;
}

h1 {
  color: #fff;
  font-size: 40px;
}

所以，如果你给你的身体100vh（视口高度）的高度，它将保持100％的窗口，无论它的大小。像这样你不会有滚动条的问题。< / p>

Answer 5

这就是为什么像normalize.css这样的东西经常被添加到项目中以避免使用不同的浏览器等事情。height: 100vh;可行。要获得滚动条，您还可以根据具体情况使用overflow-y: hidden;或overflow-x: hidden;。

Answer 6

试试这个：

.img-responsive { background-size: 100%; }
OR

.img-responsive { background-size: cover; }

使用背景图片代替img标签，以获取全屏图片。

<header>
  <div class="menu_area">...</div>
</header>


html, body, header {
    height: 100%;
}
header {
    background-image: url('images/image1.jpg');
    background-size: cover;
}

没有滚动条的HTML全屏侧

6 个答案: