英文:
How to force a block to take all height of remaining screen
问题
I see your HTML and CSS code. To address the issue where setting min-height: '100%' doesn't make the container take all the space, you can try using height: 100% instead of min-height. Here's the modified CSS for your .container:
.container {
max-width: 1170px;
padding: 0px 15px;
margin: 0px auto;
height: 100%; /* Use height instead of min-height */
}
This should make the container take up all the available vertical space within its parent element.
请注意，这将使容器采用垂直方向上的所有可用空间。
英文:
Look, i i have a structure like that in my HTML:
<body>
<div class="wrapper">
<header class="header">
<div class="container">
ХЕДЕР
</div>
</header>
<div class="content">
<div class="container">
<section class="первая секция контента">
ПЕРВАЯ СЕКЦИЯ КОНТЕНТА
</section>
</div>
</div>
<footer class="footer">
<div class="container">
ФУТЕР
</div>
</footer>
</div>
</body>
I made my content part to take all the remaining screen between header and footer like that:
.container{
max-width: 1170px;
padding: 0px 15px;
margin: 0px auto;
min-height: 100%;
}
.wrapper{
min-height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.content{
flex: 1 1 auto;
}
As u see, container is in my content block, but when i set min-height: '100%', it does not takes 100% of my content part, why that happens and how to make it using min-height, not using flex?
I mean, i want my container to take all the space by the end of screen, pushing footer down.
答案1
得分: 1
1- min-height: 100vh; 不起作用（至少根据我的经验它不起作用）。所以使用 height: 100vh;，但这并不是最佳方法，因为可能会导致 "content" 溢出。或者也可以使用（就像我在这个示例中使用的那样）height: 100%; 和 margin: 0;。
2- 但我建议使用 flex。你将更频繁地使用它并更好地掌握它。
我建议阅读这篇文章，它解释了如何使用 flex 解决你的确切问题：这篇文章。
以下是我如何使用 flex 解决你的问题的方法：
<!DOCTYPE html>
<html>
<head>
<style>
html, body{
height: 100%;
margin: 0;
}
.wrapper{
display: flex;
flex-flow: column;
height: 100%;
}
.wrapper .header{
flex: 0 1 auto;
background: #7e8aa0;
}
.wrapper .content{
flex: 1 1 auto;
background: #dbdfe7;
}
.wrapper .footer {
flex: 0 1 100px;
background: #7e8aa0;
}
</style>
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="container">
ХЕДЕР
</div>
</header>
<div class="content">
<div class="container">
<section class="первая секция контента">
ПЕРВАЯ СЕКЦИЯ КОНТЕНТА
</section>
</div>
</div>
<footer class="footer">
<div class="container">
ФУТЕР
</div>
</footer>
</div>
</body>
</html>
英文:
1- min-height: 100vh; doesn't work ( at least in my experience it doesn't work)
So use height: 100vh; Yet, it isn't the optimal approach due to a possible overflow of the "content". Or use also ( as I used in this example ) height: 100%; and margin: 0;.
2-But I would recommend using flex. You will use it much more and better learn it.
I would recommend reading this article which explains the solution to your exact problem using flex : The article
Here is how I would solve your problem using flex:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<style>
html, body{
height: 100%;
margin: 0;
}
.wrapper{
display: flex;
flex-flow: column;
height: 100%;
}
.wrapper .header{
flex: 0 1 auto;
background: #7e8aa0;
}
.wrapper .content{
flex: 1 1 auto;
background: #dbdfe7;
}
.wrapper .footer {
flex: 0 1 100px;
background: #7e8aa0;
}
</style>
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="container">
ХЕДЕР
</div>
</header>
<div class="content">
<div class="container">
<section class="первая секция контента">
ПЕРВАЯ СЕКЦИЯ КОНТЕНТА
</section>
</div>
</div>
<footer class="footer">
<div class="container">
ФУТЕР
</div>
</footer>
</div>
</body>
</html>
<!-- end snippet -->
答案2
得分: 0
I found that the issue was that you used "min-height: 100vh" on the wrapper which gives it an undefined height because it can be infinitely above that.
Try using "height: 100vh" instead that worked for me.
But I do not recommend this method as it overflows outside the wrapper because the "content" will have the same height as the wrapper itself, not considering the header and footer that are also in the wrapper, and this will cause the header and footer to overflow because there is no space left for them.
So I think your best option is to stick with the flex box as it was made for this kind of stuff. 🧙🏾♂️: Is there anything else related to this code that you would like me to assist with?
英文:
I found that the issue was that you used "min-height: 100vh" on the wrapper which gives it an undefined height because it can be infinitely above that.
Try using "height: 100vh" instead that worked for me.
But I do not recommend this method as it overflows outside the wrapper because the "content" will have the same height as the wrapper itself, not considering the header and footer that are also in the wrapper, and this will cause the header and footer to overflow because there is no space left for them.
So I think your best option is to stick with the flex box as it was made for this kind of stuff.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论