【转】CSS实现div的高度填满剩余空间

中国省份地图CSS实现 中国省份地图CSS实现.rar 立即下载

转自:http://www.cnblogs.com/zhujl/archive/2012/03/20/2408976.html

高度自适应问题,我很抵触用js去解决,因为不好维护,也不够自然,但是纯用CSS,难度不小,比如下面我要说的例子。

需求:

1. 这个矩形的高度和浏览器窗口的高度相同,不能出现纵向滚动条

2. 绿色部分高度固定,比如50px

3. 紫色部分填充剩余的高度


HTML结构暂且如下:

<div id="main">
    <div id="nav">nav</div>
    <div id="content">content</div>
</div>

 

先看1.

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}
#main {
    background-color: #999;
    height: 100%;
}

 

需求2 也很容易:

#nav {
    background-color: #85d989;
    height: 50px;
}


需求3 是最让人头痛的,一般我们都会想到height:100%, 但是100%是以父元素的高度为准的,比如父元素的高度是300px,#nav占去了50px,#content理应是250px,但是写成height: 100%,结果就是#content的高度也变成了300%,出现了需求不允许的纵向滚动条。


当然,用js解决这种问题是相当简单的,但是这次我就是不想用js,下面就来试吧:


这个需求真的让我非常崩溃,看似简单,换了n种方式都觉得不靠谱,最后找到一种最接近理想效果的方法,如下

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}
#main {
    background-color: #999;
    height: 100%;
}
#nav {
    background-color: #85d989;
    width: 100%;
    height: 50px;
    float: left;
}
#content {
    background-color: #cc85d9;
    height:100%;
}


这里利用了浮动,最后的结果仅仅是看着没问题,当然了,如果你只是简单的展示文本和图片,这种方法已经够用了,但是如果你想用js做点交互,比如#content内部有个需要拖拽的元素,它的top最小值肯定不能是0,否则就被#nav挡住了,悲剧的是我就有这种需求,于是继续苦逼的试。

 

经过一天的尝试,加上高人指点,终于有解了,泪奔啊

#nav {
    background-color: #85d989;
    width: 100%;
    height: 50px;
}
#content {
    background-color: #cc85d9;
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0px;
    left: 0px;
}

 

重点是要top和bottom一起使用,这是很反常规的用法,可以强制定义盒模型的区域,神奇啊

 

地图窗口常会遇到类似问题

html5 css3世界地图区域划分代码.zip html5 css3世界地图区域划分代码是一款鼠标移动地图上高亮显示区域划分块特效。 立即下载

相关推荐

Windows环境下Elasticsearch与JDK版本兼容性实战指南

本文详细解析了Windows环境下Elasticsearch与JDK版本的兼容性问题,提供了从版本匹配检查到安装部署的完整实战指南。重点介绍了Elasticsearch 8.x需JDK 17+等关键版本对应关系,并分享多版本JDK共存方案及性能优化技巧,帮助开发者高效避坑。

weixin_29250403的博客 421

BFC神奇背后的原理

一、BFC定义   BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。    二、BFC布局规则 1.内部的Box会在垂直方向,一个接一个地放置。 2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相...

qq_43288110的博客 418

保姆级教程:在Ubuntu 22.04上从零安装SUMO并运行第一个交通仿真

本教程详细介绍了在Ubuntu 22.04系统上从零安装SUMO交通仿真软件并运行第一个仿真的完整流程。涵盖环境准备、PPA源安装、核心组件验证、首次仿真案例运行以及进阶配置技巧,特别针对netedit路网编辑器和地图格式转换等实用工具进行重点讲解,帮助用户快速掌握SUMO在交通仿真领域的应用。

weixin_30546189的博客 425

css宽高自适应

css宽高自适应

YY的博客 1万+

RK3588 部署 YOLO26-Pose 人体姿态检测:Windows Docker 环境全流程

YOLO26-Pose 在 RK3588 上的部署流程是 PC 端 ONNX 导出 → RKNN 转换(INT8 量化)→ 板端推理。INT8 量化后 YOLO26s-Pose 约 35ms,YOLO26n-Pose 约 15ms,可以覆盖实时姿态检测的需求。后处理是 Python 实现的常见瓶颈——如果帧率不达标,先用 npy 保存模型输出在 PC 上验证解析逻辑的正确性,确认无误后再迁移到 C++ 实现。

m0_64661770的博客 545

《网络安全自学教程》- MySQL脱库原理和步骤

MySQL脱库,脱库的原理,怎么脱库,脱库的步骤,一库三表六字段

wangyuxiang946的博客 1万+

CSS让子元素div的高度填满父容器的剩余空间的方法

原帖:https://pythonjishu.com/unbayyjtzdjeewe/以下是详细讲解 CSS 让子元素 div 的高度填满父容器的剩余空间的方法的完整攻略。

1万+

lammps教程:聚合物压缩,避免“bond atoms missing”

如果使用ms建模,聚合物的链会伸出到盒子外面,在导出data文件后,盒子外面的原子被周期性算法折叠进盒子对面,这就造成了边界附近的bond原子可能被分布到了盒子的两侧。并且,这个data文件不能使用npt系综进行压缩,npt系综必须使用周期性边界,在压缩时,bond原子同样会移动到对面的边界。所以,最好的解决办法是使用一个反射墙墙进行压缩,设置一个反射墙墙既可以实现压缩效果,也可以组织原子跨越box边界移动到对面。解决这个问题的原则只有一个:导出data时确保所有的bond原子没有跨越边界。

lammps_jiayou的博客 3821

CSS布局:【转】CSS实现div的高度填满剩余空间

高度自适应问题,我很抵触用js去解决,因为不好维护,也不够自然,但是纯用CSS,难度不小,比如下面我要说的例子。 需求: 1. 这个矩形的高度和浏览器窗口的高度相同,不能出现纵向滚动条 2. 绿色部分高度固定,比如50px 3. 紫色部分填充剩余的高度 HTML结构暂且如下: <divid="main"> <divid="nav"&g...

jshyzx1999的博客 567

【模型】OpenClaw 接入阿里云永久免费模型方案

Qwen2.5-7B-Instruct 模型为例。

海兰 4475

【数据集】全球大气空气柱平均甲烷(XCH₄)和一氧化碳(XCO)浓度数据集 TROPOMI/WFMD

全球大气空气柱平均甲烷(XCH₄)和一氧化碳(XCO)浓度数据集 TROPOMI/WFMD

WW、forever的博客 389

如何将div高度填满剩余高度

下列代码中navbar高度为30px,content高度需要填满浏览器的剩余高度 <div id="body"> <div id="navbar"></div> <div id="content"></div> </div> css如下: html, body { padding: 0px; margin: 0px; ...

weixin_33759269的博客 1414

基于STM32L4XX、HAL库的Ra-01SC-P LoRa模块驱动程序设计

0x22) { // SX1276/SX1278版本号。// 发射功率(2-20)// 工作频率(Hz)// 编码率(5-8)

zhusl6688的博客 427

CSS实现div的高度填满剩余空间

转自:http://www.cnblogs.com/zhujl/archive/2012/03/20/2408976.html 高度自适应问题,我很抵触用js去解决,因为不好维护,也不够自然,但是纯用CSS,难度不小,比如下面我要说的例子。 需求: 1. 这个矩形的高度和浏览器窗口的高度相同,不能出现纵向滚动条 2. 绿色部分高度固定,比如50px 3. 紫色

WindField 1万+

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

CSS让子元素div的高度填满父容器的剩余空间

1.使用浮动的方式 效果图: 代码如下:(注意,此时.content的高度是500px,即父元素的高度,但是浮动元素在 .content 上方,盖住了 .content,将 .nav背景样式改为 background-color: rgba(0,0,0,0.1);可观察到效果) <!DOCTYPE html> <html> <head> &lt...

朽木自雕的博客 2万+

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

div填满页面剩余空间的方法

想让div填满页面剩余空间,最简易的方式还是靠提前的布局。 这里提供两种方法: (1)利用 height 样式的%比例设置布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content...

weixin_30412013的博客 3096

css实现div的高度填满剩余空间_css深入浅出

文档流:文档内元素的流动方向内联元素从左往右块级元素从上往下block,inline,inline-block 元素的区别:block 元素独占一行,宽度占满父元素宽度。可以设置 width, height, padding, margin 属性。如 div p ul 等。 block 元素可以包含其他 block 元素和 inline 元素,比较特别的是 <p> 只能包含 inlin...

weixin_30345873的博客 2817

CSS、HTMl使用position: fixed;实现div的高度填满剩余空间

CSS、HTMl实现div的高度填满剩余空间 html> html lang="en"> head> meta charset="UTF-8"> title>Documenttitle> style> *{ margin: 0; padding:0; } .conten

iceking66的博客 1万+

HTML+CSS实现div的高度自适应填满剩余空间的7种方法

2019独角兽企业重金招聘Python工程师标准>>> ...

weixin_33739646的博客 9978

flex实现:上下两个div,一个固定高度,另一个填满剩余高度

1.flex <div class="parentDiv"> <div class="childDiv1"></div> <div class="childDiv2"></div> </div> .parentDiv{ border:1px solid black; width:100%; height:800px; display:flex; .

u010565037的博客 7002

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

我正在开发一个 Web 应用程序,我希望内容填满整个屏幕的高度。该页面有一个标题,其中包含一个徽标和帐户信息。这可以是任意高度。我希望内容 div 将页面的其余部分填充到底部。我有一个标题 div 和一个内容 div。目前我正在使用一个表格进行布局,如下所示:CSS 和 HTML#page { 高度:100%;宽度:100% } #tdcontent { 高度:100%; } #content { 溢出:自动; /* 或溢出:隐藏; */ } ... ...页面的整个高度被填满,不需要滚动。对于

HuntsBot的博客 3534

移动端div自动填满剩余高度

移动端div自动填满剩余高度 1、移动端,高度不确定。 2、前面内容高度也不确定。 3、剩下的div需要填满余下的高度做一些事情 4、网上查找了一些,自己试了试,觉得用flex挺方便的。 下面展示一些 内联代码片。 // div box下包含三块,最后一块是需要高度自动填满的 <div class="box"> <div class="c1"></div> <div class="c2"></div> <div class="c3"&g

qq_43186310的博客 1735
上一篇: 条件注释判断浏览器<!--[if !IE]><!--[if IE]><!--[if lt IE 6]><!--[if gte IE 6]>
下一篇: put和post
VagueCoder
博客等级 码龄13年 4粉丝 8原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值