根据窗口大小和平台制作CSS位置属性

我有一个页脚在我的网页底部运行。如果用户正在桌面上查看该页面，则页脚需要在屏幕底部有position:fixed;。然而，根据我的UX属，一个电话或其他小屏幕（宽度小于768px）上观察时，页脚需要是要么根据窗口大小和平台制作CSS位置属性

固定在屏幕的底部，如果内容是短比屏幕的高度，或
绝对定位到页（即，内容）的底部，如果该含量超过屏幕（高），并且因此不可见，直到滚动。这是为了节省宝贵的屏幕房地产。

这可以在CSS内完成吗？如果是这样，怎么样？还是我需要依靠Javascript？我们假设这个页面目前还没有使用任何Javascript。

来源

2015-04-28 pgblu

首先，如果用户在宽度超过768px的屏幕上查看网站，则需要始终修复页脚;

这可以使用检测屏幕的宽度并应用固定位置到页脚这样的媒体查询来实现：

@media(min-width: 768px) { 
    footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    } 
}

为了解决您需要申请我们称之为粘页脚中的手机问题 。这可以很容易地使用类似flexbox

考虑下面的标记来完成：

<body class="Site"> 
    <header>…</header> 
    <main class="Site-content">…</main> 
    <footer>…</footer> 
</body>

的CSS将是（你可能需要的前缀属性）

@media(max-width: 768px) { 
    .Site { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column; 
    } 

    .Site-content { 
    flex: 1 auto 0; 
    } 
}

来源

2015-04-28 13:47:08

这是用CSS简单（如果您只是通过宽度检测设备）。

首先开始与粘性页脚模板（注意最上面一行是可选的位置）：

<div id="wrapper"> 
    <div class="table"> 
     <div class="top row"><div class="cell">header</div></div> 
     <div class="middle row"><div class="container cell">body</div></div> 
     <div class="bottom row"><div class="cell">footer</div></div> 
    </div> 
</div>

CSS

html, 
body {min-height:100%; padding:0; margin:0;} 

#wrapper {position:absolute; top:0; bottom:0; left:0; right:0;} 

.table {display:table; width:100%; height:100%;} 
.row {display:table-row;} 
.cell {display:table-cell;}

这将满足您的页脚的需求始终处于底部如果内容太大，可能会被推掉。我已经使用了display:table选择，因为它是兼容的回IE8，但还有许多其他的方式来获得一个棘手的页脚

现在添加媒体查询定为较大的宽度页脚：

@media screen and (min-width: 768px) { 
    .bottom { 
     position:fixed; 
     bottom:0; 
     left:0; 
     right:0; 
    } 
}

Example Fiddle

来源

2015-04-28 13:47:19 Pete

根据窗口大小和平台制作CSS位置属性

回答

相关问题