Question

我想在容器内安排几个图标，其中包含网站的整个高度（不是视口）。

目前我只使用以下代码获取视口的高度：

.full-container {
    position: absolute;
    height: 100%;
    display: block;
    top: 0;
    bottom: 0;
    
    /* for example */
    width: 100%;
    background: red; 
}

<div class="full-container"></div>

有没有办法获得整个网站的高度？

以下是我的想法的一个例子：

白色区域是浏览器中的可见屏幕。灰色区域是侧面的其余部分。我想要一个页面全高的DIV（黄色区域）。

Answer 1

创建div 100％的问题是它只覆盖div所在元素所留下的区域。通常位置绝对不应该这样，但你试过这个：

/* CSS */
* {
    margin: 0;
    padding: 0;
}

如果你正在使用盒子大小，我还有一件事要问你。这可能是问题的原因。

我仍然想知道你想要实现的目标：

body {background-color: red;}
main {
  width: calc(100% + 100px);
  background-color: blue;
  position: absolute;
  left: -100px;
  top: 0;
}

<body>
  <main><p>test</p></main>
</body>

Edite：看起来你正在尝试Todo。 100％似乎并不支持它，只返回页面宽度的值。

在全高容器

1 个答案: