个人中心
gpt4 book ai didi

html - 高度为 :100% is larger than the whole page 的容器

转载 作者：搜寻专家 更新时间：2023-10-31 08:16:06 25 4
gpt4 key购买 nike

我试图将内容容器填充到 100% 的高度，同时具有 30 像素的标题。但目前，内容容器大于 100%，这会导致出现滚动条。

代码

html {
  padding:0;
  margin: 0;
  height:100%;
}
body {
  padding:0;
  margin: 0;
  height:100%;
}
#header {
  height: 30px;
  background: black;
  width: 100%;
  position: absolute;
  z-index: 2;
}
#container {
  position: relative;
  height:100%;
  padding-top:30px;
  background-color: #aaaaaa;
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <div id="header"></div>
    <div id="container"></div>
  </body>
</html>

演示:https://plnkr.co/edit/48SJjl9dB7S7IiC8JLcP?p=preview

完成此任务的正确方法是什么？如果可能的话，我什至更愿意将标题定位为“相对”而不是绝对。但这可能是不可能的？

最佳答案

您可以尝试进行这些更改:

#container{
  height: calc(100% - 30px);
  padding-top: 0;
}

您可以删除两个元素上的 position 属性，因为 static 在这里工作得很好。

Plunk

您正在将 content 元素设置为 height: 100%，这意味着它将占据父元素可用的全部高度(body 在这种情况下)。但是 header 也是 body 的子元素，并且您给它的高度是 30px。 100% + 30px 会超出可用的全高，因此也会超出滚动条。同时添加 padding-top，只会增加这个多余的高度。

完整代码

html{
  padding:0;
  margin: 0;
  height:100%;
}

body{
  padding:0;
  margin: 0;
  height:100%;
}

#header{
  height: 30px;
  background: black;
  width: 100%;
  position: relative;
}

#container{
  position: relative;
  height: calc(100% - 30px);
  background-color: #aaaaaa;
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
   <div id="header"></div>
   <div id="container"></div>
  </body>

</html>

关于html - 高度为 :100% is larger than the whole page 的容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35175390/

25 4 0
文章推荐： java - @Bean 在类中使用@Configuration 和不使用它
文章推荐： ios 订阅不会在沙盒中自动续订
文章推荐： Java 1.3.1，编译器错误
文章推荐： html - 单选按钮样式不适用于 Firefox
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com