将一个div放在一个绝对定位的div下面，而不是嵌套

所以我把这个绝对定位的div放在页面的中心。我希望在这个div下面放置一个导航菜单，但是我无法将其与其他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; 
}

来源

2015-10-14 Remco van den Berg

“我希望把这个div下方的导航菜单，但我不能与其他分区窝吧。”为什么你必须嵌套它？ div是一个块元素，所以当你在div后面放一个div时，它会出现在它的下面。 – desbest

'.content'是不变的高度吗？ – Justinas

内容不是一个不变的高度。这使得很难 –

我希望它可以帮助你。

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; 
}

来源

2015-10-14 11:51:38 Alex

我们知道内容分块底部的 '位置'，因此我们可以使用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

来源

2015-10-14 11:54:10

我知道绝对定位不是要走的路，但这不是一个网站，而是一个幻灯片应用程序。它使用特定的框架，所以我不能/不想改变现有的html/css –

谢谢。菜单应该坚持内容div。我改变了最小高度为400px。当视口小于400px时，菜单应该保留在内容区域下方 –

按照要求，这里是一个position:absolute的方式。有了这个，我使用了另一个解决方案，而不是calc（），因为calc（）有时可能会有意想不到的结果。

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; 
 
}

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

使用display: table一个版本，可与IE8，并为新的浏览器我们也有弯曲作为一个选项（这里未显示）。

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; 
 
}

<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>

来源

2015-10-14 11:55:49 LGSon

我知道绝对定位不是要走的路，但这不适用于网站，而适用于幻灯片放映应用。它使用了一个特定的框架，所以我不能/不想改变现有的html/css –

@RemcovandenBerg更新了我的答案并添加了一个“position：absolute”方法 – LGSon

我的示例不正确。我已经更新了我的代码示例，使其在400px中具有最小宽度。菜单div仍应该坚持内容div的底部，即使屏幕小于400px。 –

将一个div放在一个绝对定位的div下面，而不是嵌套

回答

相关问题