css 无滚动条的HTML全屏侧

68de4m5k 于 2023-06-07 发布在其他

关注(0)|答案(6)|浏览(446)

我试图创建一个没有滚动条的全屏网站，并有问题定义的边距。举一个最小的例子：

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>

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

css

来源：https://stackoverflow.com/questions/37988371/html-full-screen-side-without-scrollbars

6条答案

按热度按时间

luaexgnf1#

您的body元素是一个非浮动块元素，就像包含的h1元素一样。因此，body元素的大小/位置会适应其子元素h1，该子元素的margin（margin-top）定义为默认值。
对于你的问题有多种解决方案，其中一种是使body元素浮动。这样做的优点是（与删除h1上的边距相比），即使插入了带有边距的不同元素，它也会以相同的方式工作。

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;
}

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

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;
}

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

赞(0）回复(0）举报 2023-06-07

vsaztqbk2#

只要把margin-top:0;放在你的h1上。Example here
我建议使用CSS重置来避免这样的问题。Eric Meyer's是非常著名和简单的。

赞(0）回复(0）举报 2023-06-07

pcww981p3#

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

* { margin: 0; padding: 0;}

然后，您可以随时添加将影响文档中所有元素的其他规则，如“font-family：无衬线体”等这样，您就可以确保您有一个坚实的起点，而不会在浏览器之间有太多不同的外观。
稍后，您可以更明确地将规则添加到需要样式化的元素中

赞(0）回复(0）举报 2023-06-07

wgeznvg74#

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

<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%的窗口，不管它的大小。像这样你就不会有滚动条的问题。

赞(0）回复(0）举报 2023-06-07

tf7tbtn25#

这就是为什么经常在项目中添加normalize.css之类的东西，以避免在不同的浏览器中发生这些事情。height: 100vh;可以工作。要摆脱滚动条，您也可以根据情况使用overflow-y: hidden;或overflow-x: hidden;。

赞(0）回复(0）举报 2023-06-07

uz75evzq6#

试试这个：

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

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

全屏使用background-image代替img标签。

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

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

赞(0）回复(0）举报 2023-06-07

我来回答

css 无滚动条的HTML全屏侧

6条答案

相关问题

热门标签

最新问答