网页左侧固定宽度，右侧内容宽度自适应

废话不多，先上代码：

css代码

<style type="text/css">*{margin: 0;padding: 0;}.outer{width: 100%;}.a{width: 200px;position: absolute;box-sizing: border-box;background-color: red;height: 300px;}.b{margin-left: 200px;background-color: #000000;height: 300px;}
</style>

HTNL代码：

<div class="outer"><div class="a"></div><div class="b"></div>
</div>

外面的大盒子默认宽度为100%，所以我们设置盒子b（内容）左外边距为固定宽度，设置盒子a绝对定位到盒子b左边。

盒子b的宽度会随浏览器窗口大小的改变而改变，而内容左边始终为我们设定的宽度。至此，我们就实现了所需的功能。

网页左侧固定宽度，右侧内容宽度自适应相关推荐

html 右侧滚动,HTMLCSS实现左侧固定宽度右侧内容可滚动
在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo. 处理这个问题的核心关键点是 ...
html css放在右边,HTMLCSS实现左侧固定宽度右侧内容可滚动
在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo. 处理这个问题的核心关键点是 ...
php怎么写左侧菜单右侧内容,ifram 实现左侧菜单，右侧显示内容
一般都是左侧的导航栏中的a标签中写一个target(a标签有target属性), 右侧的div标签中写一个iframe,在iframe中有name的属性,在左侧a标签中的target写上iframe中 ...
实现左侧固定宽度, 右侧自适应的两栏布局常见方法
两栏布局方案实现左侧固定, 右侧自适应的布局方案, 常见的几种, 写了一个各个方案实现效果的Demo, 可以通过这里查看: 预览首先统一html结构 <div class="con ...
页面布局-左侧菜单右侧内容
左侧200px,右侧根据窗口自适应,右侧宽度小于800px的时候会出现滚动条要实现的效果 html <div class="container"><div cl ...
管理后台布局-左菜单-右侧内容宽度控制（使用ant design vue)
项目结构如下: 布局实现的代码段 <template><a-layout><a-layout-siderv-model="collapsed":tri ...
css实现整体网页16 9,CSS实现宽度自适应宽高16:9的矩形的示例
前面我们讲了怎么做一个自适应宽高1:1的正方形 https://www.ddpool.cn/css/753385.html 现在我们来讲讲做自适应16:9的矩形要怎么做第一步先计算高度,假设宽100 ...
【转】 Android WebView内容宽度自适应
我们平常在项目中有可能会遇到网页的内容是通过json数据传递到app上面用WebView来显示的,这时候我们通常都要调整内容的总宽度不超过父容器的宽度,这样子用户可以不用左右滑动就可以看到全部的内容. ...
html5+css3网页制作:三栏布局宽度自适应,css三栏布局的五种写法，中间自适应，左右宽度固定...
假设高度已知,请写出三栏布局,其中左右各位300px,中间自适应 1.左右浮动 .left { float: left; width: 300px; background: red; } .right ...

网页左侧固定宽度，右侧内容宽度自适应

网页左侧固定宽度，右侧内容宽度自适应

网页左侧固定宽度，右侧内容宽度自适应相关推荐

最新文章

热门文章