html最小高度怎么写,html – 在内容容器上设置最小高度

我有一个案例,我没有看到解决方案.这是我的问题:

我有一个页面有三个部分(页眉,部分和页脚)页脚必须始终冲到底部.部分部分应该占据页眉和页脚之间的所有可用位置,但必须具有根据页面不同的最小高度(我将在CSS上手动设置它).

达到最小高度时,应该可以在整个页面上滚动.

这是我用来设置我的标题,部分和页脚占用所有可用位置的代码示例.

CSS

body {

margin: 0

}

header, section, footer {

left:0;

right:0;

overflow: hidden;

position: absolute;

}

header {

height: 70px;

top: 0;

background-color: green;

}

section {

top: 70px;

bottom: 195px;

background-color: gray;

min-height:300px;

}

article {

overflow: hidden;

background-color:lightyellow;

}

.news {

position: absolute;

bottom: -30px;

width: 100%;

background-color: lime;

}

footer {

height: 195px;

bottom: 0;

background-color: pink;

}

HTML

My header

UP

News 1
News 2

My footer

编辑

我如何在我的部分添加一个最小高度,当它到达时,我的窗户上有一个滚动条?

编辑2

我将添加更多关于我的问题的信息.首先,我在section标签内的内容大部分将以绝对值设置.并隐藏一些并出现在动作(主要是javascript)上.出于这个原因,我知道每个部分,如果有人点击链接,我需要看到我的所有内容的最小高度.

对于我的例子,div新闻是隐藏的,当你点击它时,至少需要360px才能看到.但是如果我的窗户比这个小,我的窗户上没有卷轴,我的所有内容都被页脚覆盖了.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值