固定定位 -- 左侧固定，右侧自适应布局

最新推荐文章于 2022-11-05 17:16:19 发布

原创最新推荐文章于 2022-11-05 17:16:19 发布 · 401 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

这篇博客探讨了如何使用CSS实现固定左侧栏和内容区域自适应的页面布局。通过设置.left和.content的样式属性，实现了红色固定宽度的左侧栏以及黄色背景的内容区域，该内容区域根据浏览器窗口大小自动调整宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.left{
width:200px;
height:600px;
background:red;
position:fixed;
top:0;
left:0;
}
.content{
position:fixed;
background:yellow;
left:200px;
right:0;
top:0;
bottom:0;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小李-快乐无比

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

112_右侧工具条fixed布局（不管浏览器的宽度，让工具条紧贴主要区域）

述安的博客

08-25

350

布局前：这里应该都能看懂 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { height: 1000px; } .box1 { width: 800px; height: 300px; background-c

实现左侧固定宽度, 右侧自适应的两栏布局的八种方案

技术无止境，人生仍探索。

07-23

5014

HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> &lt

参与评论您还未登录，请先登录后发表或查看评论

固定定位顶部组件,自适应效果以及解决定位脱离文档流布局

weixin_43294560的博客

11-03

1257

解决定位脱离文档流布局在产生了固定定位的组件中,再添加未脱离文档流的容器,高度为定位内容的高度,则后续元素布局并不会受定位影响代码示例: <template> <view class='n-c'>  <view class='n-n'> <view :style="{height: s

经典布局题-左边固定右边自适应的几种做法和解释

吕大瓜的博客

05-25

6551

实现一个左右布局，左边固定宽度200px，右边实现宽度自适应的两列布局下面分享下我的几种做法以及解释首先我们先通用的布局样式： <div> <div class="fixed">固定200px</div> <div class="auto">自动充满</div> </div> 来个默认样式： .f...

position:fixed 固定并居中

weixin_43833851的博客

08-29

5820

不是前端，做前端的活真是寸步难行，一个居中就搞了好久 <html> <head> <meta charset="utf-8"> <title></title> <style> .pos_fixed { position:fixed; margin:auto; left:0; right:0; bottom:10...

CSS中position中的各个属性

weixin_44139167的博客

09-11

688

static：position中默认元素，没有定位，出现在正常的流中。 relative：相对定位，可以利用left，right，top，bottom来给元素定位，所以变成相对定位。 absolute：绝对定位，是相对于除了static以外的第一个父元素进行定位，使用left right top bottom定位。 fixed：也是绝对定位，但是和absolute的绝对地位不一样，fixed相对于...

HTML实现2列布局(左侧宽度固定，右侧自适应)的方法示例

12-13

本示例探讨了如何使用HTML和CSS实现一个两列布局，其中左侧宽度固定，右侧则自适应剩余空间。以下是对这两种方法的详细解释： **实现一：利用浮动（Float）** 在第一种方法中，我们主要利用CSS的`float`属性来实现...

左侧固定宽度，右侧自适应宽度的CSS布局

10-30

要实现左侧固定宽度，右侧自适应宽度的CSS布局，首先需要了解几个关键的CSS属性和概念。这些包括宽度（width）、绝对定位（position: absolute）、层叠上下文（z-index）、以及外边距（margin）等。 1. 宽度（width...

css实现左侧固定右侧自适应的布局方式

09-22

在前端开发中，实现左侧固定宽度、右侧自适应宽度的布局是一种常见的需求，这样的布局能够适应不同屏幕大小，提高页面布局的灵活性和用户体验。以下将介绍三种使用CSS来实现这种布局的方式。 ### 浮动布局（Float ...

固定定位position:fixed实现高度自适应

热门推荐

爱开车的彬哥的CSDN博客

03-16

1万+

position:fixed实现高度自适应 直接上样式 .mask { /*需要宽度*/ width: 70%; background-color: white; position: fixed; left: 50%; top: 50%; /* 支持现代浏览器 */ -webkit-transform: translate(-50%, -50%); tran...

CSS布局实例[绝对定位:一栏固定,一栏自适应]

09-08

CSS布局实例[绝对定位:一栏固定,一栏自适应]

css中position:fixed的一些影响问题

weixin_44817180的博客

06-10

1005

1.当页面底部有个固定button，且给其固定min-width，当屏幕宽度小于min-width时不会出现横向滚动解决办法：就是给这个固定button外面加个div，其class为buttonBox,并且把原button的class（.fixedBtn）中的position：fixed删除。 2.当页面底部有个固定button，且给其固定min-width，当屏幕宽度小于min-width时不会出现横向滚动，这时如果在position：fixed层加display：flex;有可能会导致，固定的butt

关于fixed定位的问题，解决元素左右偏移问题

m0_62217360的博客

11-05

1509

关于fixed定位的问题，解决元素左右偏移问题

html绝对定位自适应不同分辨率,高度100%的绝对定位自适应布局技巧

weixin_36258720的博客

06-07

868

容器高度100%是经常用到的需求，任何容器都可以实现，而且不需要嵌套关系。把body看作是一个容器，做为内部对象的上层标签，他的高度设置为100%是关键。最基本的例子以下是引用片段：*{margin:0;padding:0;border:0;}html,body{height:100%;}/*同时设置html是为了兼容FF*/#box_2{height:100%;backg...

实现两栏布局(左边固定，右边自适应)的六种方法

qq_43456687的博客

04-12

4384

html内容如下 <div class="wrap"> <div class="left">left</div> <div class="right">right</div> </div> 方法一：利用float .left { float: left; width: 200px; background-color: pink;

纯CSS实现左侧伸缩固定和头部固定布局之 css布局定位再学习

斜杠的博客

03-27

3846

前言：最近写的项目需要，左侧和顶部固定导航，且左边和伸缩，用js很容易实现。但是我就尝试只用css看能不能实现。结果实现了，在此，感谢项目组的队友给我的思路。代码可能直接运行不全，此处只写思路。左侧导航为js写的点击切换class，左侧宽度变小变大。.showSider { width: 150px; } .hideSider { width: 65px; }HTML:<div id="...

使position:fixed样式水平滚动的方法

风轻云淡

02-19

7090

版权所有，转载请注明出处：http://guangboo.org/2013/09/19/horizontal-scrollable-for-position-fixed 使用CSS样式"position:fixed"可以使div块固定在一个固定位置，即使有滚动条也不会改变其位置。position:fixed给很多开发者带来了惊艳的效果，然而当出现水平滚动条时，效果就不那么容易接受了。有时候我们希

为什么HTML左边栏被挤到右边,为什么我的侧边导航栏设置position：fixed后，右边的内容全部跑到左边来了，怎么解决，我目的是让侧边栏背景颜色跟随页面高度...

weixin_35948624的博客

06-17

660

源自：4-1 编程挑战为什么我的侧边导航栏设置position：fixed后，右边的内容全部跑到左边来了，怎么解决，我目的是让侧边栏背景颜色跟随页面高度某管理系统body{margin-top:50px;}.sidebar{background-color:#e5e5e5;position:fixed;top:51px;bottom:0px;}.sidebar ul{margin-top:20px...

position下设置靠右

a1057962851的博客

11-25

3018

justify-content: flex-end;

CSS实现左侧固定右侧自适应布局及等高布局的代码示例

"这篇文章主要介绍了如何使用CSS实现左侧固定宽度，右侧自适应宽度的布局，同时满足等高布局和最小高度的要求，且不依赖JavaScript或CSS行为。文章提供了两种实现方式，分别是浮动布局和Flexbox布局。" 在网页设计...