Calc在使用100vh时出现问题

huangapple go评论141阅读模式
英文:

Calc broken with more 100vh

问题

我正在创建一个带有position: fixed;底部的页面,需要在滚动时展开,但至少要占满整个页面的100%。我希望使主要的包装器占用整个空间而不被底部覆盖。所以我使用了min-heightcalc(100vh - 120px)。以下是代码:

<!-- language: lang-css -->
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html,
#app {
  min-height: 100vh;
  max-width: 100vw;
}

#wrapper {
  min-height: calc(100vh - 120px);
  height: auto;
  max-width: 100vw;
}

footer {
  height: 120px;
  width: 100%;
}
<!-- language: lang-html -->
<footer>
  <section id="lien-express">
    <div class="lien-express-1">
      <p>Lien lien-express</p>
    </div>
    <div class="lien-express-2">
      <p>Lien lien-express</p>
    </div>
  </section>
  <nav>
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/about">About</RouterLink>
    <RouterLink to="/portfolio">About</RouterLink>
    <RouterLink to="/catalogue">About</RouterLink>
  </nav>
</footer>
<main id="wrapper">
  <RouterView />
</main>

我的问题是,当我告诉<div>要占用超过100vh时,calc函数不起作用。<div>占用了所有空间,而不考虑calc的计算:

使用100vh时的屏幕截图:
Calc在使用100vh时出现问题

超过100vh时的屏幕截图:
Calc在使用100vh时出现问题

英文:

I am creating a page with a position: fixed; footer, which will need to expand on scroll, but take at least 100% of the page. I wanted to make my main wrapper take the whole space without ever being behind the footer. So created a min-height with calc(100vh - 120px). Here is the code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

body,
html,
#app {
  min-height: 100vh;
  max-width: 100vw;
}

#wrapper {
  min-height: calc( 100vh - 120px);
  height: auto;
  max-width: 100vw;
}

footer {
  height: 120px;
  width: 100%;
}

<!-- language: lang-html -->

&lt;footer&gt;
  &lt;section id=&quot;lien-express&quot;&gt;
    &lt;div class=&quot;lien-express-1&quot;&gt;
      &lt;p&gt;Lien lien-express&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;lien-express-2&quot;&gt;
      &lt;p&gt;Lien lien-express&lt;/p&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  &lt;nav&gt;
    &lt;RouterLink to=&quot;/&quot;&gt;Home&lt;/RouterLink&gt;
    &lt;RouterLink to=&quot;/about&quot;&gt;About&lt;/RouterLink&gt;
    &lt;RouterLink to=&quot;/portfolio&quot;&gt;About&lt;/RouterLink&gt;
    &lt;RouterLink to=&quot;/catalogue&quot;&gt;About&lt;/RouterLink&gt;
  &lt;/nav&gt;
&lt;/footer&gt;
&lt;main id=&quot;wrapper&quot;&gt;
  &lt;RouterView /&gt;
&lt;/main&gt;

<!-- end snippet -->

My problem is that when I tell the &lt;div&gt; to be more than 100vh the calc function is not working. The &lt;div&gt; is taking all the space without talking the calc into account:

Here is the screenshot of the console to show you the difference

With 100vh:
Calc在使用100vh时出现问题

With more than 100vh:
Calc在使用100vh时出现问题

答案1

得分: 2

如果您真正想要的是一个布局,它始终至少填充视口的100%,主要内容会拉伸以填充可用的空间,而页脚位于内容的底部,那么您应该像这样使用网格:

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

body {
  margin: 0;
}

#app {
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr max-content; 
}

header {
  padding: 1rem 2rem;
  background-color: black;
  color: white;
  margin: -1rem -2rem 2rem;
}

main {
  padding: 1rem 2rem;
  overflow-y: auto;
}

footer {
  padding: 1rem 2rem;
  background-color: black;
  color: white;
}
<div id="app">
  <main>
    <header>header将仅尽可能大,与内容一起滚动。</header>
    <h1>main将拉伸以填充中间的剩余空间。</h1>
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores laudantium quas reprehenderit nulla. Dignissimos autem nam cupiditate repellat, magni, esse culpa aperiam iste incidunt asperiores, assumenda modi porro blanditiis laboriosam! </p>
    <!-- 更多内容... -->
  </main>
  <footer>footer将仅尽可能大,始终保持在底部。</footer>
</div>

希望这能帮助到您。

英文:

If what you really want is a layout that will always fill at least 100% of the viewport and the main content stretches to fill whatever space is available while the footer is at the bottom of the content, then you should use grid like so:

Edited so the footer always sticks at the bottom of the viewport

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

body {
  margin: 0;
}

#app {
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr max-content; 
}

header {
  padding: 1rem 2rem;
  background-color: black;
  color: white;
  margin: -1rem -2rem 2rem;
}

main {
  padding: 1rem 2rem;
  overflow-y: auto;
}

footer {
  padding: 1rem 2rem;
  background-color: black;
  color: white;
}

<!-- language: lang-html -->

&lt;div id=&quot;app&quot;&gt;
  &lt;main&gt;
    &lt;header&gt;header will only be as big as its content and scroll away with the content.&lt;/header&gt;
    &lt;h1&gt;main will stretch to fill the remaining space in the middle&lt;/h1&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores laudantium quas reprehenderit nulla. Dignissimos autem nam cupiditate repellat, magni, esse culpa aperiam iste incidunt asperiores, assumenda modi porro blanditiis laboriosam!&lt;/p&gt;
    &lt;p&gt;Similique recusandae ad ex ipsa, deserunt dolor molestias eveniet at? Nostrum aspernatur corporis incidunt adipisci id consequuntur, praesentium eveniet veniam aut illum doloribus quibusdam eos molestiae nesciunt! Soluta, autem qui.&lt;/p&gt;
    &lt;p&gt;Molestiae vitae dignissimos pariatur rerum repudiandae dolores sequi libero voluptas, quidem, provident, adipisci ipsam similique itaque. Alias, suscipit laborum beatae provident accusantium sunt nulla minus cupiditate ratione, commodi adipisci praesentium.&lt;/p&gt;
    &lt;p&gt;Magni, a quos facilis ad quas nobis reprehenderit magnam maiores id, necessitatibus molestiae repellat, error dolores earum ex officiis totam debitis. Omnis doloremque, suscipit aliquid distinctio itaque iusto voluptas obcaecati.&lt;/p&gt;
    &lt;p&gt;Quasi eos ea illum modi eum quidem maxime aperiam accusamus aliquid nam, nobis aut, esse labore voluptates non nihil molestiae earum laborum repudiandae necessitatibus deleniti obcaecati? Asperiores, aliquid laboriosam. Libero.&lt;/p&gt;
    &lt;p&gt;Provident laboriosam enim eaque quo? Aliquam, nesciunt eveniet amet beatae accusantium placeat ullam. Ipsum, nihil culpa inventore libero architecto tempore voluptas, totam pariatur similique quas expedita sint molestias vitae dicta.&lt;/p&gt;
    &lt;p&gt;Eos fugiat quod obcaecati, possimus, excepturi ducimus recusandae quisquam mollitia sit doloremque nihil ipsum adipisci inventore sint quasi aperiam neque quidem quos? Dolorum, doloremque iusto et quod corporis error nihil.&lt;/p&gt;
    &lt;p&gt;Incidunt, provident vel id suscipit quasi ut quae eligendi accusamus, minus iusto vitae excepturi enim, modi possimus? Dolorum molestiae quis maiores, delectus similique hic nulla quasi molestias. Eligendi, eos ipsa.&lt;/p&gt;
    &lt;p&gt;Labore, facere! Eligendi rerum natus alias optio dolorum facilis maiores ad tempora? Ratione doloribus laboriosam dolor repudiandae obcaecati qui cumque ducimus eos, odit debitis nesciunt illum repellendus quisquam iusto voluptatum!&lt;/p&gt;
    &lt;p&gt;Accusantium quidem aliquam, aut veniam corrupti, quas temporibus, consequatur ullam blanditiis provident fugiat quibusdam. Sint aliquam esse vero corporis amet praesentium adipisci sit, quisquam perferendis ducimus repudiandae autem dolores eius.&lt;/p&gt;
  &lt;/main&gt;
  &lt;footer&gt;footer will only be as big as its content and always stay at the bottom.&lt;/footer&gt;
&lt;/div&gt;

<!-- end snippet -->

答案2

得分: -1

以下是已翻译的内容:

所以最终对我有效的解决方案是:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'lato';
}

body, html, #app {
    min-height: 100vh;
    max-width: 100vw;
}

#wrapper {
    min-height: 100vh;
    height: auto;
    max-width: 100vw;
    padding-bottom: 120px;
}

footer {
    height: 120px;
    width: 100%;
    background-color: pink;
    position: fixed;
    bottom: 0;
    display: grid;
    grid-template-rows: 1fr 2fr;

    #lien-express {
        display: flex;

        .lien-express-1 {
            @include flex-lien-express;
            background-color: $DBLUE;
        }
        .lien-express-2 {
            @include flex-lien-express;
            background-color: $MGREY;
        }
    }
}

calc 不会考虑自动高度。因此,当我尝试使用 calc 进行计算时,无法使用未知变量进行计算。但我可以创建一个承载元素的父元素,通过应用填充来执行 calc 的工作。

英文:

So the final solution that worked for me was :

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: &#39;lato&#39;;
}

body,html, #app {
    min-height: 100vh;
    max-width: 100vw;
}

#wrapper {
    min-height: 100vh;
    height: auto;
    max-width: 100vw;
    padding-bottom: 120px;
}
footer {
    height: 120px;
    width: 100%;
    background-color: pink;
    position: fixed;
    bottom: 0;
    display: grid;
    grid-template-rows: 1fr 2fr;

    #lien-express {
        display: flex;

        .lien-express-1 {
            @include flex-lien-express;
            background-color: $DBLUE;
        }
        .lien-express-2 {
            @include flex-lien-express;
            background-color: $MGREY;
        }
    }
}

The calc don't take under account an auto height. So when i was trying to calculate with calc i could not calculate with an unknown variable. But i could create a parent that was doing the job of the calc by applying a padding, at put the element inside it.

huangapple
  • 本文由 发表于 2023年3月3日 19:50:14
  • 转载请务必保留本文链接:https://go.coder-hub.com/75626725.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定