Div不会延伸到页面底部?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (148)

我试图<div>在页面底部进行拉伸。我希望这<div>可以像我的页面左侧的栏一样。当我打开页面时,它确实沿着左侧伸展,但是当我向下滚动时,它将不再伸展。事情是我有多个<div>s彼此包裹,但我所说的这个只是孩子<html><body>元素。我尝试了很多东西以使其正常工作但是height:auto;height:100%;或者height:inherit;似乎不起作用,但是如果我使用的话它会起作用height:000px;。我还要指出,双方<html><body>height:100%;width:100%;

代码如下所示:

  .leftbar {
    background-color: rgba(0,0,0,0.85);
    width: 10%;
    height: 100%;
    float: left;
    position: relative;
    left: 0;
    margin-top:0;
    bottom:0;
    right:0;
    overflow: hidden;
}

令我更加困惑的是,我的页面底部也有一个页脚,但效果很好。它延伸到我需要的程度。它的代码如下所示:

.footer {
    background-color: rgba(0,0,0,0.85);
    width: 100%;
    height: 50px;
    position: relative;
    bottom: 0;
}

你能告诉我为什么左侧的酒吧不会拉伸?

提问于
用户回答回答于

您可以使用CSS Grid而不是浮动div来创建此布局。这是一个示例:

/* Container */
.container {
  margin: 0;
}

/* Grid container */
.grid {
  display: grid;
  grid-template:
      [row1-start] "sidebar content" 90vh [row1-end]
      [row2-start] "footer footer" auto [row2-end]
      / 15vw auto; /* The width of each column */
}


/* Sidebar */
.sidebar {
  grid-area: sidebar;
}


/* Content */
.content {
  grid-area: content;
}


/* Footer */
.footer {
  grid-area: footer;
}

<body class='container'>
  <div class='grid'>
      <div class='sidebar'>This is the sidebar</div>
      <div class='content'>This is the main content</div>
      <footer class='footer'>This is the footer</footer>
  </div>
</body>

网格系统比使用浮动系统有许多优点,其中包括:

  • 更容易阅读
  • 可以轻松地使用媒体查询进行响应
  • 网格可以在以后轻松扩展
  • 你不要混淆为什么你的布局随浮动随机打破

Grid的另一种方法是Flexbox。

文档:

用户回答回答于

你可以试试

height: 100vh;

记住height: 100%填充其父容器的100%高度。如果父容器未到达底部,则左侧栏不能。

扫码关注云+社区

领取腾讯云代金券