Question

我有一些布局，如下面的例子：

<div id="maim"  style="background-color: white;">
    <div id="menu" style="background-color: green;">
        <!-- menu 280px in the left side -->
    </div>
    <div id="header" style="background-color: blue;">
        <!-- header 100% -->
    </div>
    <div id="content" style="background-color: grey;">
        <!-- div where the content will be implemented -->
    </div>
</div>

在我的CSS样式中，我需要菜单始终以100％高度显示，与内容div的高度无关。在我的内容大于我的浏览器的可见区域的那一刻，当我scrool我的页面时，菜单在浏览器的第一个视图区域结束。

我可以做些什么来解决这个问题吗？

我的CSS如下：

#main {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

#menu {
  position: absolute;
  width: 280px;
  height: 100%;
  margin: 0 auto;
  background-color: #182C38;
  color: #7f8a94;
  float: left;
  z-index: 2;
}

#header {
  padding-left: 305px;
  padding-top: 25px;
  width: 100%;
  height: 105px;
  background-color: #2888c1;
  color: #7f8a94;
  position: absolute;
  z-index: 1;
}

#content {
  float: right;
  height: 100%;
  position: absolute;
  margin-left: 280px;
  margin-top: 105px;
  padding: 20px 20px 20px 20px;
  width: -moz-calc(100% - 280px);
  width: -webkit-calc(100% - 280px);
  width: -o-calc(100% - 280px);
  width: calc(100% - 280px);
}

感谢您的帮助！

Answer 1

尝试修改菜单位置：

#menu {
  position: fixed;
  width: 280px;
  height: 100%;
  margin: 0 auto;
  background-color: #182C38;
  color: #7f8a94;
  float: left;
  z-index: 2;
}

或者设置100vh而不是100％：

#menu {
  position: absolute;
  width: 280px;
  height: 100vh;
  margin: 0 auto;
  background-color: #182C38;
  color: #7f8a94;
  float: left;
  z-index: 2;
}

Answer 2

首先，你似乎在最顶级div的ID中有一个拼写错误（它表示#maim而不是#main）。假设这不是问题，则在内容div上应用100％的高度。由于那个堆叠在标题下面，它将导致100％的视口+标题的高度。尝试从内容高度减去标题高度（包括填充，除非您使用box-sizing：border-box），例如高度：计算（100％ - 130px）;

或者，您可以选择另一种（更简单的）方法，甚至不使用任何绝对定位：

<div id="main"  style="background-color: white;">
    <div id="menu" style="background-color: green;">
        <!-- menu 280px in the left side -->
    </div>
    <div id="wrapper">
      <div id="header" style="background-color: blue;">
        header
      </div>
      <div id="content" style="background-color: grey;">
        content
      </div>
    </div>
</div>

body, html {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}

#main {
  height: 100%;
  width: 100%;
}

#menu {
  float: left;
  height: 100%;
  width: 280px;
  background-color: green;
}

#wrapper {
  float: left;
  width: calc(100% - 280px);
  height: 100%;
  background-color: yellow;
  display: table;
  table-layout: fixed;
}

#header {
  height: 105px;
  display: table-row;
}

#content {
  display: table-row;
}

如果您不想使用表格布局，请删除这些属性并将height：calc（100％ - 105px）应用于#content。

Answer 3

替换您的CSS代码：

以下是工作演示：https://output.jsbin.com/zopasa

body{
  overflow-x: hidden;
  margin: 0px;
  padding: 0px;
}
#main {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

#menu {
  position: absolute;
  width: 280px;
  height: 100%;
  margin: 0 auto;
  background-color: #182C38;
  color: #7f8a94;
  float: left;
  z-index: 2;
}

#header {
  padding-left: 305px;
  padding-top: 25px;
  width: 100%;
  height: 105px;
  background-color: #2888c1;
  color: #7f8a94;
  position: absolute;
  z-index: 1;
}

#content {
  float: right;
  height: 100%;
  position: absolute;
  margin-left: 280px;
  width: -moz-calc(100% - 280px);
  width: -webkit-calc(100% - 280px);
  width: -o-calc(100% - 280px);
  width: calc(100% - 280px);
}

Answer 4

最简单，最值得信赖的方法是使用视口功能。

 . target {
   width: 100vw; /* makes the target full width of the viewport size. */
   height: 100vh; /* makes full height */
 }

除IE之外，浏览器支持是可靠的。

注意： - 在您的HTML代码中找到拼写错误id =＆＃34; main＆＃34;

100％独立于页面内容

4 个答案: