设置HTML，身高与最小高度：100％，但也允许它扩大

所以我想知道是否有可能使HTML /身体在使用CSS（不知何故）至少100％的高度，并让它扩大如所须？现在我有一个柔性盒，身体占据剩余空间（如预期的那样）。设置HTML，身高与最小高度：100％，但也允许它扩大

在一个实况网站上，身体可能不占用整个页面，所以我希望flexbox填充它并让页脚卡在底部，但是当显示在较小的屏幕上时（例如移动）很可能会填满可见屏幕。此时（或者如果身体最终填满了屏幕），我希望页脚继续下去。

没有在flexbox容器上绘制边框，它似乎按预期工作。但出于推测的原因，容器的边界/大小可能很重要，是否可以正确绘制（忽略溢出只是显示的事实看起来像一个冒险的工作）。

我也会接受现在的javascript的答案，但CSS将是最理想的

html, body { 
 
    height: 100%; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: 1px solid black; 
 
    height: 100%; 
 
} 
 

 
.body { 
 
    flex: 1; 
 
    min-height: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <header style="background-color: lightblue"> 
 
    header 
 
    </header> 
 
    <div class="body" style="background-color: orange; opacity: 0.3"> 
 
    body 
 
    </div> 
 
    <footer style="background-color: yellow"> 
 
    footer 
 
    </footer> 
 
</div>

来源

2017-03-06 A. Lau

你看着这个CSS媒体查询？ – Toxide82

@ Toxide82我试着'身高：自动！重要'，但它似乎忽略它：\ –

如果页脚始终显示在较大屏幕的底部，为什么不设置'position：absolute;'并查看是否可以在较小的屏幕上将其设置为“相对”。看看这是否有所作为。 – Toxide82

在您的包装只是用min-height代替height：

html, 
 
body { 
 
    height: 100%; 
 
    padding:0; 
 
    margin:0; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: 1px solid black; 
 
    min-height: 100%; 
 
    box-sizing: border-box; 
 
} 
 

 
.body { 
 
    flex: 1; 
 
    min-height: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <header style="background-color: lightblue"> 
 
    header 
 
    </header> 
 
    <div class="body" style="background-color: orange; opacity: 0.3"> 
 
    body 
 
    </div> 
 
    <footer style="background-color: yellow"> 
 
    footer 
 
    </footer> 
 
</div>

来源

2017-03-06 10:23:04 Pete

好得比想象的简单 –

您可以使其与标准percentage heights一起使用。但这有点棘手，坦率地说，没有必要。只需使用viewport percentage units。

这是你的代码的简化版本：

.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    min-height: 100vh; 
 
    border: 1px solid black; 
 
} 
 

 
.body { 
 
    flex: 1 0 300px; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
}

<div class="wrapper"> 
 
    <header style="background-color: lightblue">header</header> 
 
    <div class="body" style="background-color: orange; opacity: 0.3;">body</div> 
 
    <footer style="background-color: yellow">footer</footer> 
 
</div>

来源

2017-03-06 12:53:37

设置HTML，身高与最小高度：100％，但也允许它扩大

回答

相关问题