Question

所以我将这个绝对定位的div放在页面的中心。我希望在这个div下面放一个导航菜单，但是我不能将它与另一个div嵌套。反正有吗？

注意：在代码段示例中，位置absolute:bottom;不起作用，但您明白了。

HTML：

<div class="content">Hello world</div>
<div class="menu">home | info | about us | contact</div>

CSS：

body {
    position:relative;
}
.content {
    position: absolute;
    top: 10px;
    bottom: 30px;
    left: 10px;
    right: 10px;background:grey;
    min-height:400px;
}
.menu {
    background:blue; width:100%; text-align:center;
}

Answer 1

我们知道内容块底部的“位置”，因此我们可以使用calc

.menu {
  position: absolute;
  top:calc(100% - 30px);
}

.content {
  position: absolute;
  top: 10px;
  bottom: 30px;
  left: 10px;
  right: 10px;
  background: grey;
  min-height: 50vh;
}
.menu {
  position: absolute;
  background: blue;
  width: 100%;
  text-align: center;
  top: calc(100% - 30px);
}

<div class="content">Hello world</div>
<div class="menu">home | info | about us | contact</div>

也就是说，bbsolute定位是一种非常糟糕的网页布局方法。它极不灵活，有更好，更灵敏的选择。见LearnLayout.com

Answer 2

根据要求，这是一种position:absolute方式。有了这个，我使用了另一个解决方案而不是calc（），因为calc（）有时会产生意想不到的结果。

＆＃13;

html, body {
    margin: 0;
    height: 100%;
    position:relative;
}

.menu,
.content {
    position: absolute;
    top: 10px;
    bottom: 30px;
    left: 10px;
    right: 10px;
    background-color: lightgray;
    min-width: 400px;
}
.menu {
    background-color: lightblue;
    text-align: center;
    top: auto;
    height: 20px;
    bottom: 10px;
}

＆＃13;

<div class="content">Hello world</div>
<div class="menu">home | info | about us | contact</div>

＆＃13;

使用display: table的版本适用于IE8，对于较新的浏览器，我们也有flex作为选项（此处未显示）。

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
}

.container {
  display: table;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 10px;
}
.page-row {
  display: table-row;
}
.page-cell {
  display: table-cell;
  height: 0;
}
.page-cell-expanded {
    height: 100%;
}

.content {
  background-color: #999;
}
.menu {
  text-align: center;
  vertical-align: middle;
  height: 30px;  
  background-color: #99f;
}

＆＃13;

<div class="container">
  
  <div class="page-row">
    <div class="content page-cell page-cell-expanded">
        Hello world
    </div>
  </div>
  
  <div class="page-row">
    <div class="menu page-cell">
        home | info | about us | contact
    </div>
  </div>

</div>

＆＃13;

Answer 3

我希望它可以帮到你。

jsfiddle

HTML

<div class="wrapper">
    <div class="content">Hello world</div>
    <div class="menu">home | info | about us | contact</div>
</div>

CSS

body {
    position:relative;
}
.wrapper {
    position: absolute;
    top: 10px;
    bottom: 30px;
    left: 10px;
    right: 10px;
}
.content {
    background:grey;
    min-height:50vh;
}
.menu {
    background:blue;
    width:100%;
    text-align:center;
}

将div放在绝对定位div下面而不嵌套

3 个答案: