英文:
Calc broken with more 100vh
问题
我正在创建一个带有position: fixed;
底部的页面,需要在滚动时展开,但至少要占满整个页面的100%。我希望使主要的包装器占用整个空间而不被底部覆盖。所以我使用了min-height
和calc(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
时的屏幕截图:
超过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 -->
<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>
<!-- end snippet -->
My problem is that when I tell the <div>
to be more than 100vh
the calc
function is not working. The <div>
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
:
With more than 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 -->
<div id="app">
<main>
<header>header will only be as big as its content and scroll away with the content.</header>
<h1>main will stretch to fill the remaining space in the middle</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>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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!</p>
<p>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.</p>
</main>
<footer>footer will only be as big as its content and always stay at the bottom.</footer>
</div>
<!-- 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: '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;
}
}
}
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论