文档章节

使div填充剩余屏幕空间的高度

 技术盛宴
发布于 2019/12/05 21:34
字数 1127
阅读 18
收藏 0

我正在一个Web应用程序上工作,我希望其中的内容能填满整个屏幕的高度。

该页面具有标题,其中包含徽标和帐户信息。 这可以是任意高度。 我希望内容div将页面的其余部分填充到底部。

我有一个标题div和一个内容div 。 目前,我正在使用表格进行布局,如下所示:

CSS和HTML

#page { height: 100%; width: 100% } #tdcontent { height: 100%; } #content { overflow: auto; /* or overflow: hidden; */ }
<table id="page"> <tr> <td id="tdheader"> <div id="header">...</div> </td> </tr> <tr> <td id="tdcontent"> <div id="content">...</div> </td> </tr> </table>

页面的整个高度已填满,不需要滚动。

对于内容div中的任何内容,请设置top: 0; 将其放在标题的正下方。 有时,内容将是一个实际表,其高度设置为100%。 将header放在content中将使其无法使用。

有没有一种方法可以在不使用table情况下达到相同的效果?

更新:

content div元素的高度也将设置为百分比。 因此, div内100%的内容将填充到底部。 两个元素占50%。

更新2:

例如,如果标题占据了屏幕高度的20%,则在#content内指定为50%的表将占据屏幕空间的40%。 到目前为止,将整个内容包装在表中是唯一有效的方法。


#1楼

我找到了一个非常简单的解决方案,因为对我来说这只是一个设计问题。 我希望页面的其余部分不要在红色页脚下方为白色。 所以我将页面背景色设置为红色。 并将内容backgroundcolor更改为白色。 内容高度设置为例如。 20em或50%几乎是空白的页面不会使整个页面变成红色。


#2楼

尝试这个

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);

#3楼

如果您可以处理不支持旧版本浏览器(即MSIE 9或更旧版本)的情况,则可以使用已经是W3C CR的Flexible Box Layout Module来实现。 该模块还允许其他不错的技巧,例如重新排序内容。

不幸的是,MSIE 9或更低版本不支持此功能,并且您必须为除Firefox之外的所有浏览器的CSS属性使用供应商前缀。 希望其他供应商也尽快删除该前缀。

另一个选择是CSS Grid Layout,但是对稳定版本的浏览器的支持甚至更少。 实际上,只有MSIE 10支持此功能。


#4楼

您可以使用CSS表来代替在标记中使用表。

标记

<body>    
    <div>hello </div>
    <div>there</div>
</body>

(相关)CSS

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

FIDDLE1FIDDLE2

此方法的一些优点是:

1)减少标记

2)标记比表更具语义,因为它不是表格数据。

3)浏览器支持非常好 :IE8 +,所有现代浏览器和移动设备( caniuse


仅出于完整性考虑,以下是 CSS表格模型的 css属性的等效Html元素

table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup { display: table-column-group } td, th { display: table-cell } caption { display: table-caption }

#5楼

实际上,您可以使用display: table将区域分为两个元素(标题和内容),其中标题的高度可以变化,内容填充剩余的空间。 这适用于整个页面,以及当区域只是position设置为relativeabsolutefixed position的另一个元素的内容时。 只要父元素的高度不为零,它将起作用。

看到这个小提琴和下面的代码:

CSS:

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

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

HTML:

<div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>

本文转载自:https://stackoom.com/question/NSU/使div填充剩余屏幕空间的高度

粉丝 0
博文 1083
码字总数 0
作品 0
深圳
高级程序员
私信 提问
加载中

评论(0)

【css】CSS实现div的全屏自适应显示

放置全屏地图时遇到的问题,解决方案如下: 方法一: 重点是要top和bottom一起使用,这是很反常规的用法,可以强制定义盒模型的区域。 还会出现滚动条,所以把溢出都设为hidden。 方法二: ...

混沌鸿蒙一老君
2017/08/30
0
0
android LinearLayout

LinearLayout是线性布局控件,它包含的子控件将以横向或竖向的方式排列,按照相对位置来排列所有的widgets或者其他的containers,超过边界时,某些控件将缺失或消失。因此一个垂直列表的每一行...

amigos_wu
2012/06/07
1.9K
0
Android布局控件之LinearLayout详解

Android布局控件之LinearLayout详解 LinearLayout是线性布局控件,它包含的子控件将以横向或竖向的方式排列,按照相对位置来排列所有的widgets或者其他的containers,超过边界时,某些控件将缺...

sxl01890
2015/09/13
170
0
HTML+CSS实现div的高度自适应填满剩余空间的7种方法

如图上下两部分,上面部分适应内容的高度,下面部分填充剩余部分。 当下面内容不够时,在下面部分出现滚动条 有2种情况 1.上面内容的高度适应内容,只有2种方法(flex、quirks+table) 2.上面...

linsk1998
2019/01/23
89
0
jsp网页图片显示问题

问题: 1. 网页怎样设计已适应不同的屏幕分辨率?(高度设百分比浏览器不兼容,想用内层div自动撑起外层div,但内层div并排显示的float属性,达不到自动填充的效果) 2.有没有什么办法解决打开网友...

鎕_鎕
2012/07/17
1K
2

没有更多内容

加载失败,请刷新页面

加载更多

00-Java 面试准备

面试之前 面试前准备简历需要注意的几个方面: 写简历、改简历,这个一定要干的。简历有两个作用,一个是吸引别人,能让别人邀请你去面试,这是前提;另一个是引导面试的人,让面试的人问你所...

源程序
今天
54
0
OSChina 周二乱弹 —— 大王(@罗马的王)颜值制霸Osc社区

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @巴拉迪维 :Lunik的单曲《Seeing You Soar》 I hope you’re smiling,When seeing me soar. #今日歌曲推荐# 《Seeing You Soar》- Lunik 手...

小小编辑
今天
75
0
wordcount代码

1.写出map类 public class WCMapper extends Mapper<LongWritable,Text,Text,LongWritable>{ @Override protected void map(LongWritable key,Text value,Context context)throws IOExcepti......

七宝1
今天
59
0
Spring Batch 小任务(Tasklet)步骤

Chunk-Oriented Processing不是处理 step 的唯一方法。 考虑下面的一个场景,如果你仅仅需要调用一个存储过程,你可以在 ItemReader 中实现这个调用,然后在存储过程完成调用后返回 null。这...

honeymoose
今天
67
0
Linux日志分析

1. Linux日志文件的类型 2. 系统服务日志 2.1 syslogd的简介 2.2 syslogd的配置和使用 2.3 日志的安全性设置 2.4 远程日志记录服务 3. 日志的轮替 3.1 logrotate简介 3.2 logrotate的配置 3....

JiaMing
昨天
67
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部