Question

您可能已经注意到，容器的宽度为right的80％。页眉确实继承了80％的宽度，但是页脚却让我头疼。当我把width：inherit on the footer;它看起来并不像父母的宽度。有关如何解决此问题的任何建议。

谢谢

html

<body>
    <section class="container">
        <header>
            <h2 id="title"><a href="main.html">~<br> ~</a></h2>
        </header>
        <section class="product-container">
            <div>
                <img src="Images/Products/~.jpg" alt="Reload page.">
                <a href="#">All Day</h></a>
            </div>
            <footer>
                <i class="far fa-envelope"></i>
            </footer>
        </section>
    </section>
</body>

css

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html, body {
    background-color: white;
    height: 100%;
}

.container {
    width: 80%;
    margin: auto;
    border: 1px blue solid;
    position: relative;
    min-height: 100%;
    /*background-color: aliceblue;*/
}

header {
    /*border: 1px red solid;*/
    position: fixed;
    background-color: rgb(245, 245, 245);
    width: inherit;
    z-index: 1;
}

.product-container {
    position: absolute;
    left: 13.5%;
    width: 80%;
    transform: translate(13.5%, 4%);
    display: grid;
    grid-template-columns: 33% 33% 33%;
    border: 1px red solid;
    text-align: center;

footer {
    height: 100px;
    width: inherit;
    transform: translateX(-25%);
    background-color: #010e16;
    position: absolute;
    bottom: -12vw;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: space-evenly;
}

Answer 1

您的代码格式存在一些问题。我认为<footer>被意外地包装在产品容器中。此外，默认情况下，width会占用父级宽度的100％，因此，如果在子元素上指定“继承”，则在合理的情况下，它将覆盖父级80％宽度的80％。您只需要将父级设置为80％，然后让子级元素自然继承即可。这是一些基本的样板供您插入，我认为可以涵盖您的用例：

.container {
  margin: auto;
  display: flex;
  flex-direction: column;
  width: 80%;
  height: 100vh;
}

.product-container {
  flex-grow: 1;
}


/* just pretty colors */

.container>* {
  background: teal;
  text-align: center;
  color: white;
  padding: 20px;
  border: 2px solid white;
}

<section class="container">
  <header>
    HEADER
  </header>

  <section class="product-container">
    BODY
  </section>

  <footer>
    FOOTER
  </footer>
</section>

Answer 2

看到代码在片段上工作会很有帮助，但是我认为您可能会遇到问题，以及它所使用的度量。

如果将页脚的宽度设置为80％，它将覆盖屏幕（即正文）宽度的80％。这是因为折衷方式将父亲作为100％的宽度来设置子项的宽度，并且相对于父项的宽度是相对的。

因此，假设您的父级是其页脚，该页脚的宽度为80％（相对于主体），然后在页脚内部放置一个div，该页脚具有继承的宽度（80％）。由于页脚内部的div的宽度为80％（因为与父级相同），因此此子div在页脚宽度的100％内将具有80％的宽度，因此此子级的80％宽度将不等于只要页脚宽度的80％。

让我知道这是否可以解决您的问题。

Answer 3

在页脚CSS中尝试width: 100%

为什么我的页脚不继承容器的宽度？

3 个答案: