Question

我有一个包含2行3个链接的页脚 - 当浏览器窗口调整大小并且变得太小时，链接会被切断。是否有任何方法可以在窗口的其余部分调整大小时保持页脚的大小？

.footer { position: fixed; top: 90%; left: 0; right: 0; bottom: 0;
      background: #ffffff; border: solid black; border-width: 2px 0 0 0; }

Answer 1

为div设置“min-width”

.footer { 
    position: fixed; 
    top: 90%; 
    left: 0; 
    right: 0; 
    bottom: 0;
    background: #fff; 
    border-top: 2px solid #000;

    min-width: 200px;
}

Answer 2

在页脚中添加min-height，如this fiddle：

所示

.footer { 
    position: fixed; 
    height: 10%;
    min-height: 40px;
    left: 0; 
    right: 0; 
    bottom: 0;
    background: #fff; 
    border-top: 2px solid black; 
}

Answer 3

将页脚固定到页面底部的选项？只需删除top: 90%;，即使窗口是一半大小，页脚也会保持高度

.footer { 
    position: fixed; 
    left: 0; 
    right: 0; 
    bottom: 0;
    background: #fff; 
    border-top: 2px solid #000;
}

PS我分道扬琴：http://jsfiddle.net/6s5eN/

自动页脚调整CSS

3 个答案: