將一個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下面，而不是嵌套

回答

相關問題