使CSS位置属性依赖于窗口大小和平台_Css

使CSS位置属性依赖于窗口大小和平台

css

使CSS位置属性依赖于窗口大小和平台,css,Css,我的网页底部有一个页脚。如果用户在桌面上查看页面，页脚需要有位置：fixed显示在屏幕底部。但是，根据我的UX规范，当在手机或其他小屏幕（宽度小于768px）上查看时，页脚需要是如果内容短于屏幕高度，则固定在屏幕底部，或如果内容比屏幕长（高），则绝对位置位于页面底部（即内容），因此在滚动之前不可见。这是为了节省宝贵的屏幕房地产这可以在CSS中完成吗？如果是，怎么做？还是我需要依赖Javascript？让我们假设该页面当前尚未使用任何Javascript。首先，如果用户在768px以上

我的网页底部有一个页脚。如果用户在桌面上查看页面，页脚需要有

位置：fixed显示在屏幕底部。但是，根据我的UX规范，当在手机或其他小屏幕（宽度小于768px）上查看时，页脚需要是

如果内容短于屏幕高度，则固定在屏幕底部，或
如果内容比屏幕长（高），则绝对位置位于页面底部（即内容），因此在滚动之前不可见。这是为了节省宝贵的屏幕房地产

这可以在CSS中完成吗？如果是，怎么做？
还是我需要依赖Javascript？让我们假设该页面当前尚未使用任何Javascript。
首先，如果用户在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来说很简单（如果您只通过宽度检测设备）
首先从粘性页脚模板开始（注意，这里的顶行是可选的）：
这将满足您的要求，页脚始终位于页面底部，如果内容太大，页脚将被推下。我使用了display:table
选项，因为它与ie8兼容，但是有许多其他方法可以获得粘性页脚
现在添加一个媒体查询以修复较大宽度的页脚：
@media screen and (min-width: 768px) {
    .bottom {
        position:fixed; 
        bottom:0; 
        left:0; 
        right:0;
    }
}


<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>

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;}

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