防止浮動DIV從重疊頁腳

我試圖設計一個頁眉，兩列和頁腳。我不想爲頁面顯示滾動條，但是如果數據溢出則允許列滾動。防止浮動DIV從重疊頁腳

目前我最好的嘗試是這樣的：

HTML

<body> 
    <div> 
    <h1>Title goes here</h1> 
    </div> 
    <div class="content"> 
    <div class="side-text"> 
     <p>Menu Items</p> 
     <p>Menu Items</p> 
     <p>Menu Items</p> 
     <p>Menu Items</p> 
    </div> 
    <div class="main-text"> 
     <p>...Snip...</p> 
    </div> 
    </div> 
    <footer> 
    <p>...snip...</p> 
    </footer> 
</body>

CSS

* { 
    box-sizing: border-box; 
    margin: 0; 
} 

html, body, .content { 
    height: 100%; 
    overflow: hidden; 
} 

.content > div { 
    float: left; 
    height: 100%; 
    overflow: auto; 
} 

.side-text { 
    width: 15%; 
} 

.main-text { 
    width: 85%; 
} 

footer { 
    bottom: 0; 
    position: absolute; 
    width: 100%; 
}

，但在右邊的DIV內容在尾流（甚至是過去<body>的結尾）。

的jsfiddle上面的代碼：https://jsfiddle.net/gcd7d238/

來源

2016-03-28 Gareth Webb

頁腳被定位絕對，它總是會在那裏流過你的文字。 – VikingBlooded

確實。有沒有辦法在不使用'position：absolute'的情況下完成同樣的定位？把標題div放在最上面，頁腳放在最下面，讓中間的兩個浮動div用完剩餘空間？我想我可以把所有的東西放在JS中，但我試圖用CSS來做到這一點。 –

爲了防止它去在頁腳，所有你需要做的是改變內容的高度：

.content > div { 
    float: left; 
    height: 90%; 
    overflow: auto; 
}

小提琴：https://jsfiddle.net/gcd7d238/2/

更新：

爲了使其更具響應性，您可以使用display:table：

body{ 
    display: table; 
} 
.content { 
    display: table-row; 
    height: 95%; 
} 
footer { 
    display: table-row; 
    width: 100%; 
}

https://jsfiddle.net/gcd7d238/3/

來源

2016-03-28 14:26:49 Tomer

[**不適用於縮小的視口**]（https://i.gyazo.com/7b4697491a14f4281a92f68327a5e9d9.png） –

防止浮動DIV從重疊頁腳

回答

相關問題