Question

我正在尝试制作一个跨越页面宽度减去10px左右的页脚。我试图通过在10px的所有侧面给身体填充来做到这一点。在下面的代码中，标题工作正常，但页脚忽略右侧的主体填充。为什么要这样做，我该如何解决？

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                padding:0;
                margin:0;
            }
            body {
                margin: 0;
                padding: 0 10px;
            }
            #header {
                height: 150px;
                width: 100%;
                margin: 0 auto;
                background: #333;
            }
            #footer {
                position: fixed;
                bottom: 5px;
                width: 100%;
                background: #f63;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="header"></div>
        <div id="footer">I am the footer!</div>
    </body>
</html>

Answer 1

你的页脚没有忽略身体填充，通过控制台查看元素大小，你会看到你的页脚宽度是窗口宽度的100％+左边填充的10px +右边填充的10px。

你可以在css中使用calc函数：https://developer.mozilla.org/en-US/docs/Web/CSS/calc

#footer {
  width: calc(100% - 20px);
}

JSFiddle

Answer 2

页脚宽度和填充分别计算。您可以使用public RestHighLevelClient createESRestClient() { CredentialsProvider credentialsProvider = new BasicCredentialsProvider(); credentialsProvider.setCredentials(AuthScope.ANY, new UsernamePasswordCredentials(esUserName, esPassword)); RestClientBuilder restClientBuilder = RestClient .builder(new HttpHost(esRestclientHost, 9200, "http")); // Use this one if your ElasticSearch server is setup to use username & password authentication if (esAuthentication) { restClientBuilder.setHttpClientConfigCallback(h -> h.setDefaultCredentialsProvider(credentialsProvider)); } return new RestHighLevelClient(restClientBuilder); }来防止这种情况发生

将其用于所有元素以这种方式运行

java

特拉维斯·尼尔森（Travis Neilson）在他的YouTube频道DevTips上有a good video，他在其中解释了框式概念。

Answer 3

#footer {
   position: fixed;
   bottom: 5px;
   left: 10px;
   right: 10px;
   background: #f63;
   text-align: center;
}

演示：http://jsbin.com/benosofo/3/

Answer 4

固定元素相对于主体没有固定，它相对于窗口是固定的。如果它相对于身体是固定的那么它就像绝对定位一样，它会随身体滚动。

您可以为页脚创建一个固定容器，以便在其上使用填充。

HTML：

<div id="footercontainer"><div id="footer">I am the footer!</div></div>

CSS：

#footercontainer {
    position: fixed;
    bottom: 5px;
    width: 100%;
    padding: 0 10px;
}
#footer {
    background: #f63;
    text-align: center;
}

Answer 5

您可以为页脚创建一个包装器，然后将10px填充应用于该页脚。

#footer-wrap {
    position:fixed;
    bottom:0px;
    left:0px;
    padding:10px;
}

然后当您将页脚放入其中时，它将被正确填充。这种方式是最向后兼容的解决方案，因为它不依赖于css3计算。

<强>的jsfiddle

http://jsfiddle.net/pk8uU/

Answer 6

网络上没有任何解决方案对我有用。所以我用另一种方式解决了我试图创建一个添加地址的模式，并在移动模式下对其进行测试。我想要一个rgba(0,0,0,0.75)的固定层来覆盖所有窗口，并在中间为用户显示白色表单。表单标头隐藏在顶部（不可滚动）和底部，粘在窗口的底部，看起来不太好（在某些情况下，某些元素在从窗口中没有足够的空间时将无法工作窗口边框）。因此我通过在表单div的底部放置一个div来解决该问题（粘在窗口底部而不是表单上），并将其设置为transparent。所以成功了！（我不得不提到我正在编写反应代码）

这是我的div：

<div className="modal-padding"/>

这是我为此div设计的风格：

  .modal-padding {
      width: 100%;
      border: 10vh solid transparent;
   }

我在div之前使用了一个，之后使用了一个。小心。我测试了将width: 100vw和height: 10vh赋予div，但是当它没有内容时，它就不起作用，似乎根本就不存在。所以我给了边界我希望这也能解决您的问题，或者给您解决问题的想法。祝你好运。

Answer 7

设置position:fixed时，它会根据最近的父相对元素（在本例中为窗口）将其宽度和高度属性绑定到函数。这就是你获得全宽效果的原因。

以下两种解决方法：

1。您可以使用`calc()`并从100％减去10px：

width: calc(100% - 10px);

JSFiddle

您应该注意，这是一个CSS3解决方案，与不支持CSS3的浏览器不兼容。

2。您可以使用具有相对定位的容器div：

CSS：

div#container
{
    width: 100%;
    height: 100%;
    position:relative;
}

div#footer
{
    width: 100%;
    height: 100px;

    position: fixed;
    bottom: 5px;
    left: 5px;
}

HTML：

<body>
    <div id="container">
        <div id="footer"></div>
    </div>
</body>

固定宽度为100％的位置忽略了主体填充

7 个答案:

1。您可以使用`calc()`并从100％减去10px：

JSFiddle

2。您可以使用具有相对定位的容器div：

JSFiddle

固定宽度为100％的位置忽略了主体填充

7 个答案:

1。您可以使用calc()并从100％减去10px：

JSFiddle

2。您可以使用具有相对定位的容器div：

JSFiddle

1。您可以使用`calc()`并从100％减去10px：