防止浮动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从重叠页脚

回答

相关问题