上中下三个DIV，高度自适应（上高度固定，下固定，中间自适应）（代码来自X人）...

最新推荐文章于 2021-06-08 12:21:31 发布
最新推荐文章于 2021-06-08 12:21:31 发布
阅读量378 收藏 1
点赞数
文章标签： xhtml c#
原文链接：http://www.cnblogs.com/xiaoliao/p/3321193.html
版权

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DivDemo.aspx.cs" Inherits="EkaduoBackstageLeadingToEnd.DivDemo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

<style type="text/css">
*{
 margin:0;
 padding:0;
}
html{
 padding:0 !important;
 padding:100px 0;
 width:100%;
 height:100%;
 overflow:hidden;
}
body{
 padding:100px 0;
 padding:/**/0;
 height:100%;
 overflow: hidden;
}
#header{
 position:absolute;
 top:0;
 width:100%;
 height:100px;
 background:#ccc;
 line-height:100px;
 text-align:center;
}
#middle{
 position: absolute!important;
 position: relative;
 top:100px!important;
 top:0;
 bottom:100px;
 width:100%;
 height:auto!important;
 height:100%;
 background:#ffc;
 text-align:center;
 overflow: auto;
}
#footer{
 position:absolute;
 bottom:0;
 width:100%;
 height:100px;
 background:#ccc;
 line-height:100px;
 text-align:center;
}
</style>


 
</head>
<body>
    <form id="form1" runat="server">
    <div id="header">页首</div>
<div id="middle">
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
</div>
<div id="footer">页脚</div>


    </form>
</body>
</html>

 

 

 本人创业做的一款androidApp, 下载量已经有2000多万,各种当前热门的网络手机奖励红包全部集成，另外还有热门电影和淘宝高额优惠券！很适合各类型的用户。

  

转载于:https://www.cnblogs.com/xiaoliao/p/3321193.html

weixin_30668887
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
全屏css+DIV页面上中下三行布局,兼容各浏览器中间居中显示
06-12
全屏页面CSS+DIV上中下三行布局,兼容各浏览器中间居中显示
三个div 上下高度固定，中间自适应
weixin_41463944的博客
04-12 294
三个div 上下高度固定，中间自适应
CSS+div布局，上中下三行div，上下固定高度，中间铺满
ZPD_zpd的博客
04-01 3616
方法一：使用定位， 父元素相对定位 position:relative; ， 子元素绝对定位 position:absolute; 上下div固定高度，中间div的 top 和 bottom 偏移量为上下div的高度 <div id="wrap"> <div id="head"></div> <div id="main"></div> <div id="foot"></div> &l.
php div 实现上中下布局,上中下结构DIV CSS布局实例
weixin_30232185的博客
03-24 723
实例布局之上中下结构DIV CSS布局上中下结构为常见布局结构，一般普通(企业网站)网页我们可以大致分为上(头部)、中(内容区)、下(底部版权)组成。而这其实是由最简单上下结构CSS布局演变而成，只不过多了一个DIV层结构而且，本质布局方法技巧不变。一、主要思维 - TOP不管多少个上下结构或单一结构，一般主体内容都是居中的，这个使用就需要使用css margin样式(让布局居中兼容各大...
html三个div相同高度,保持三列div布局的高度相同的方法
weixin_42532938的博客
06-08 718
对自己的三栏css进行修改。发现中右两栏的高度无法与左边的日志栏自动适应。日志栏由于日志的数量会变动。但如果日志栏高度低的话，又无法与中右栏高度一致。上网找了下，有一种利用overflow属性把多个div(这些div都设置了超长的高度或者宽度)进行平整，效果不太好。似乎纯粹css无法做到div高度自适应。这里有个方法：假设有div1,div2,div3(三个子div，不管哪个栏变动)。在加载页面里...
脚本控制三行三列自适应高度DIV布局的代码
10-30
脚本控制三行三列自适应高度DIV布局的代码 在这个资源中，我们可以学习到以下几点知识： 1. DIV 布局的概念：DIV 是 HTML 中的一种基本结构元素，用来定义文档中的一个division или节。在这个例子中，我们使用 ...
CSS三栏布局探讨——中间固定宽度两边自适应宽度
09-25
例如，通过设置左右两个div为固定宽度并浮动，中间的div则自动填充剩余的空间。 然而，今天的主题是中间栏固定宽度，两边栏自适应宽度。这种布局适用于某些场景，比如中间栏需要保持特定宽度以展示固定内容，而两侧...
子元素div高度不确定时父div高度如何自适应
01-19
Div即父容器不根据内容自适应高度，我们看下面的代码： 复制代码代码如下: <div id=”main”> <div id=”content”></div> </div> 当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完好...
脚本控制DIV三行三列布局自适应高度.rar
07-04
本资源"脚本控制DIV三行三列布局自适应高度.rar"提供了一种解决方案，利用JavaScript（JS）来实现一个三行三列的布局，并且每个单元格（DIV）的高度能够自适应内容。这种布局方式尤其适用于响应式网页设计，确保在...
Iframe 高度自适应，js控制Iframe 高度自适应.docx
11-22
"Iframe 高度自适应，js 控制 Iframe 高度自适应" Iframe 高度自适应是指在网页中嵌入的 iframe 元素能够根据其内容自动调整高度，以适应不同的浏览器和屏幕尺寸。js 控制 Iframe 高度自适应是指使用 JavaScript ...
上下Div固定，中间div高度自适应（随浏览器高度变化而变化）
热门推荐
路在路上的博客
10-03 1万+
1.css代码： html,body{ margin:0; padding:0; height:100%; overflow:hidden; } #top{ position:absolute; top:0; left:0; background-color:#05C020; height:50px; width:100%; z-index:100; } #bottom{
三个div 两边固定大小中间自动大小
小Pdiadia的博客
08-01 2979
最近做公司一个项目，涉及到手机呈现页面，当时有个需求就是实现一个列表展示功能，左边是图片，中间标题文字介绍啥的，右边是操作按钮，想想很简单嘛，一分析搞三个div排一下，两边的固定宽度，中间的自动宽度，左边div左浮动，右边div右浮动，中间宽度auto这样可适应各种手机了。 可是实际写起来确实出了些问题，咱们先看代码： body div {
三个div横排，中间的div自适应宽度
Thinking Code
05-11 2103
HTML：   section-a    section-b    section-c  CSS ： .container{position: relative; overflow: hidden;width: 100%; height: 180px;} .section-a, .section-b, .section-c{position: absolute;top: 0;
【css面试题】三个DIV要求水平对齐，左右两个DIV宽度固定为300px，高度已知，中间那个DIV充满剩余的宽度（最全5种方法）
weixin_43452622的博客
03-18 659
1、这道题的主要目的是考察基本功，前面两种方法float和absolute基本功，后面三个flex布局、table布局、grid布局属于拔高。 效果图如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;布局的格式&lt;/title&gt
div中放入一个img元素导致div高度会多出3px问题
zeng092210的博客
01-23 446
我的结构如下图， &lt;div class="main-box"&gt; &lt;div class="container"&gt; &lt;img src="./images/icon-content.jpg" alt=""&gt; &lt;/div&gt; css部分为： .main-box ,.container ,.mai
前端设计之CSS布局：上中下三栏自适应高度CSS布局
西召
08-14 4537
网页代码： CSS布局：上中下三栏自适应高度CSS布局 *{margin:0;padding:0;} body, html { margin: 0; padding:0 !important; padding:90px 0 32px 0; width:100%; height:100%; overflow:hidden; } .header { background
用html和css写一个三栏布局，要求左右宽度固定中间自适应。
最新发布
08-10
首先，在HTML中，我们可以使用```<div>```标签来创建三个元素，分别代表左栏、中栏和右栏。例如： ``` <div class="left-column">左栏内容</div> <div class="middle-column">中栏内容</div> <div class="right-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值