上下固定，中间自适应的方法

最新推荐文章于 2024-02-08 09:27:17 发布
最新推荐文章于 2024-02-08 09:27:17 发布
阅读量694 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xcondor/article/details/25384369
版权

上下固定，中间自适应的方法

<html>

<style>

header, footer {
    position: fixed;
    left: 0;
    right: 0;
    height: 100px;
    background: teal;
}
header {
    top: 0
}
footer {
    bottom: 0
}
.content {
    position: fixed;
    top: 100px;
    bottom: 100px;
    left: 0;
    right: 0;
    overflow-y: scroll;
}
.container {
    padding: 20px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

</style>

    <header></header>
<div id="content_id" class="content">
    <div class="container">Just
        <br>Some
        <br>Text.
        <br>
        <br>Try
        <br>resizing
        <br>the
        <br>height
        <br>of
        <br>the
        <br>window</div>
</div>
<footer></footer>

var $content = $('.content'),
    $container = $('.container'),
    containerHeight = $container.outerHeight();

$(window).resize(function () {
    $container.css({
        position: $content.innerHeight() > containerHeight ? 'absolute' : 'static',
    });
    $content.scrollTop($container.height());
}).resize();

</html>


相关地址： http://jsfiddle.net/4LQnW/6/

xcondor
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页上中下三分布局即上下固定中间自适应
12-13
复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <!– 禁止浏览器从本地缓存中调阅页面。–> <...–网页不保存在缓存中，每次访问都刷新页面。...
CSS之布局系列--上中下布局(上下固定，中间自适应)--方法/实例
IT利刃出鞘的博客
11-28 7873
本文用示例介绍CSS三行布局的方案。 三行布局，即：上、中、下。有两种方案：1.上下固定，中间自适应；2.中间固定，上下自适应。本文介绍第1种方案。 两边固定，中间自适应，一共有如下几种方案： flex布局（推荐） 网格布局（grid) vh+calc() 表格布局（table）（不推荐） 绝对定位布局（不推荐） 上下固定，中间自适应，就意味着中间要占满。所以大部分方案中，其父元素都要设置：height: 100%
上下固定中间自适应布局
最新发布
华子Code1024前端菜鸟的博客
02-08 1321
上下固定中间自适应布局
页面布局之上下固定中间自适应
喝牛奶的鱼
08-30 7359
常用的页面布局除了两边固定中间自适应和一端固定另一端自适应之外，还有上下固定中间自适应的布局，今天在这里做一下总结。 实现这种布局我主要通过两种方法： 使用绝对定位 对这三栏都实现绝对定位，其中中间绝对定位的位置是上下两栏的高度，内容超出则中间部分出现流动条； 代码实现： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; ...
三栏布局，上下固定高度，中间自适应，四种实现方式
weixin_43026567的博客
10-11 1919
第一种：定位布局 <!-- 定位布局 --> <style> body html{ height: 100%; } .position div{ position: absolute; } .top{ top: 0;...
微信小程序布局 头尾固定中间自适应
04-21 1834
最常见的一种布局 <view class="header">HEADER</view> <view class="body">BODY</view> <view class="footer">FOOTER</view> page{ height: 100%; display: flex; flex-di...
html上下固定中间自适应div+css布局
09-03
本文将详细探讨如何使用这些标签以及CSS来实现一个上下固定、中间自适应的布局。 首先，`<header>`标签用于定义页面的头部，通常包含网站的logo、导航链接等元素。例如： ```html 网站标题 <li><a href="#...
CSS+DIV布局(满屏自适应三行布局,兼容FF,div垂直居中)
07-13
CSS+DIV写的，上下固定高度，中间自动适应高度满屏布局的页面~~写了好久的。ie6还有点问题。。。 兼容IE7,IE8,FF,Opera,Safari,谷歌浏览器 ------------------------- 附送一个 DIV垂直居中的页面~~~
CSS:何制作一个向各个方向延展box?
09-27
块级元素（如`<div>`）如果没有指定固定宽度，通常会在垂直方向上延展以容纳其内容。比如一个无序列表`<ul>`，会根据列表项的数量自动调整高度。当用户增大浏览器的字体大小时，这些元素会随之扩大，以保持内容的...
uniapp小程序实现上下固定中间滑动布局(附源码和实现过程讲解)
weixin_45745641的博客
11-06 2490
上下固定，中间可以上下滑动是移动端中非常常见的布局，实现的过程在本篇记录一下。
flex布局实现上下固定中间滑动的布局方式
11-20
本文主要介绍了flex布局实现上下固定中间滑动的布局方式，分享给大家，具体如下: 例如这样的一个页面，希望有个头图，有个底部的底栏，中部内容区域可滑动。 简单介绍一下如何实现 固定头部和尾部，中间部分可滑动，使用flex布局 1.设置html，body高度为100% 2.设置最外层div的布局方式为弹性布局display:flex; 3.设置最外层div的主轴方向为flex-direction: column;主轴为垂直方向，起点在上沿 row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 colum
css实现上中下布局（上下固定，中间自适应）
闲云野鸟的博客
04-21 6305
先上效果图： 实现方法： 方法一： 这个最简单，利用css中vh单位和calc() 函数 使用场景： 页面布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
flex布局实现上下固定，中间自适应
weixin_64105376的博客
08-23 1717
主要是针对上下固定，中间自适应
【HTML+CSS】之CSS布局
qq_37086980的博客
08-06 388
常用布局方式 table 表格布局 float 浮动 + margin inline-block 布局 flexbox布局 1.flexbox 布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp
几种方法实现上下固定中间自适应布局
qq_39852145的博客
02-27 2621
HTML: &lt;div class="top-center-bottom"&gt; &lt;div class="top"&gt;top&lt;/div&gt; &lt;div class="center"&gt; 视口单位(Viewport units)&lt;br&gt;
css布局（上下固定，中间自适应）
u011391655的博客
06-20 8659
要实现页面的上下固定，中间自适应： 1：上下固定高度 .header{ background-color: #f55d54; width: 100%; height: 50px; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; pos
页面布局--上下固定中间自适应出现滚动条布局
qq_26702033的博客
03-07 7091
上下固定中间弹性滚动布局是H5页面最常见的布局方法；现在总结了3中布局方式。 1.position:fixed+overflow:scroll+js动态设置中间高度 html代码： //html结构 &lt;nav&gt;&lt;/nav&gt; &lt;div class="container" id="container"&gt; &lt;div class="inner"&am
上下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{
css首尾固定中间自适应
06-02
可以使用flex布局来实现CSS首尾固定中间自适应的效果。具体实现步骤如下： 1. 父元素设置display:flex;，使其成为一个flex容器。 2. 子元素设置flex-shrink: 0;，使其在父容器空间不足时不缩小。 3. 将首尾元素的宽度固定，如设置width:100px;。 4. 将中间元素设置flex:1;，使其占据剩余空间自适应。 示例代码如下： HTML代码： ```html <div class="container"> <div class="item fixed">首部</div> <div class="item flex">中间</div> <div class="item fixed">尾部</div> </div> ``` CSS代码： ```css .container { display: flex; justify-content: space-between; } .item { height: 50px; display: flex; align-items: center; } .fixed { width: 100px; } .flex { flex: 1; } ``` 通过以上代码，即可实现CSS首尾固定中间自适应的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值