首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

bootstrap 3.3.6行左div固定位置代替右div滚动

Bootstrap是一个流行的前端开发框架,它提供了一套用于快速构建响应式网站和Web应用程序的工具和组件。Bootstrap的版本3.3.6是其中的一个旧版本,但仍然被广泛使用。

在Bootstrap 3.3.6中,要实现左侧div固定位置代替右侧div滚动的效果,可以使用以下步骤:

  1. 首先,确保你已经引入了Bootstrap的CSS和JavaScript文件。你可以在Bootstrap官方网站上下载这些文件,并将它们添加到你的项目中。
  2. 在HTML文件中,创建一个包含两个div的容器。一个div将用于左侧固定位置,另一个div将用于右侧滚动内容。例如:
代码语言:txt
复制
<div class="container">
  <div class="row">
    <div class="col-md-3" id="left-div">
      <!-- 左侧固定位置的内容 -->
    </div>
    <div class="col-md-9" id="right-div">
      <!-- 右侧滚动内容的内容 -->
    </div>
  </div>
</div>
  1. 使用CSS样式将左侧div固定在页面上的位置。可以使用position: fixed属性来实现这一效果。例如:
代码语言:txt
复制
#left-div {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 25%; /* 根据需要调整宽度 */
}
  1. 使用CSS样式将右侧div的内容设置为可滚动。可以使用overflow-y: scroll属性来实现这一效果。例如:
代码语言:txt
复制
#right-div {
  overflow-y: scroll;
  height: 100vh; /* 根据需要调整高度 */
  margin-left: 25%; /* 左侧div的宽度 */
}

通过以上步骤,你可以实现一个左侧div固定位置代替右侧div滚动的效果。左侧div将保持固定在页面上的位置,而右侧div的内容将可以在垂直方向上滚动。

关于腾讯云的相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,我无法给出具体的推荐。但腾讯云提供了丰富的云计算服务,你可以访问腾讯云官方网站,了解他们的产品和解决方案。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【前端攻略--HTMLCSS】html 文档流的理解

我得出文档流的定义如下: 从左至右,从上至上的布局。 符合html中标签本身含义的布局,比如某些标签独占一行。有些标签属于行内元素等。...可以这样理解,本来这个标签是属于文档流管理的,那么它应该按照文档流的正常布局方式从左至右从上之下,并且符合标签本身的含义。 脱离文档流是指,这个标签脱离了文档流的管理。...固定定位:即完全离开文档流,相关于视区进行偏移。 文档流是文档中可显示对象在排列时所占用的位置。...当对象定位在浏览器窗口以外,浏览器因此显示滚动条。 fixed:固定定位。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。...当对象定位在浏览器窗口以外,浏览器不会因此显示滚动条,而当滚动条滚动时,对象始终固定在原来位置。 relative:相对定位。

2.4K20
  • 响应式布局

    布局容器 Bootstrap 预定义了两个 container 容器 container 类 响应式布局的容器,固定宽度 大屏(电脑)(>=1200px):宽度固定为 1170px 中屏(桌面显示器)...(>=992px):宽度固定为 970px 小屏(平板)(>=768px):宽度固定为 750px 超小屏(手机)(固定为 100% div,空出中间一块,只需要右边的盒子偏移 12 - 左盒子占的份数 - 右盒子占的份数即可 --> div class="col-md-4">左div>...-- 两个div,空出中间一块,只需要右边的盒子偏移 12 - 左盒子占的份数 - 右盒子占的份数即可 --> div class="col-md-4 ">左div>...-- 想要把左右盒子互换位置,可以pull(拉)右边的盒子过来,拉的份数为左盒子的份数 + 右盒子的偏移份数 push(推)左边的盒子过去,推的份数为右盒子的份数 + 右盒子的偏移份数

    2.9K10

    【前端词典】4 种滚动吸顶实现方式的比较

    粘性定位 sticky 相当于相对定位 relative 和固定定位 fixed 的结合;在页面元素滚动过程中,某个元素距离其父元素的距离达到 sticky 粘性定位的要求时;元素的相对定位 relative...效果变成固定定位 fixed 的效果。...使用: tab 吸顶可以使用 obj.getBoundingClientRect().top 代替 scrollTop-offsetTop,代码如下: // htmldiv class="pride_tab_fixed...上,右和下分别相对浏览器视窗的位置。...描述: 当页面往下滚动时,吸顶元素需要等页面滚动停止之后才会出现吸顶效果 当页面往上滚动时,滚动到吸顶元素恢复文档流位置时吸顶元素不恢复原样,而等页面停止滚动之后才会恢复原样 原因:在 ios 系统上不能实时监听

    2.5K60

    8则未必知道且超级实用的纯CSS布局排版技巧 | 网易4年实践

    以下以左列宽度固定和右列宽度自适应为例,反之同理。...+ margin-left/right 左列声明float:left和固定宽度,由于float使节点脱流,右列需声明margin-left为左列宽度,以保证两列不会重叠。...左列声明固定宽度,右列声明flex:1自适应宽度。...class="right">div> div> 为了让右列宽度自适应计算,就不使用float + margin-left的方式了,若使用margin-left还得结合左中列宽度计算。...视窗滚动到特定位置,布局固定在该位置,后续不随视窗滚动而滚动。该布局产生的效果俗称吸附效果,是一种常见网页效果。譬如吸顶效果和吸底效果都是该范畴,经常在跟随导航、移动广告和悬浮提示等应用场景里出现。

    3.4K20

    深入理解Flex布局 -- flex-grow & flex-shrink & flex-basis

    我希望实现一个左中右三列的布局,其中左右部分固定宽度,中间部分自适应: 实现起来很简单,代码如下: div class="container"> div class="left">left滚动条: 而我期望的效果是滚动条出现在中间部分,整个页面不能滚动。...这时候如果我们对左中右分别设置flex-grow为 2,1,1,各个项目的计算逻辑如下: 首先将多余空间 200 除以 4(2 + 1 + 1),等于 50 left = 100 + 2 x 50 =...这时我们对左中右分别设置flex-shrink为 1,2,3,计算逻辑如下: 溢出空间 = 100 + 200 + 300 - 550 = 50 总权重 = 1 x 100 + 2 x 200 + 3...还是用上面的例子,当左中右的flex-shrink都为 0 的时候,就会冲破宽度限制,container的宽度将会从 550 变为 600。

    2.1K20

    5分钟快速回顾HTML CSS

    即使通过css设置宽度width,也会占一行的位置) div(无语义) 列表 ur/ol/li 段落 p 标题 h1-h6 自定义列表 dl/dt/dd 其它常见问题 块元素的居中问题...上右,下左,下右,四种定位方式 元素自身未脱离文档流,依然占据了原位置 2.绝对定位(相对于父元素定位) 父元素设置 position: relative; 子元素设置 position...(相对于浏览器定位) 元素css设置 position: fix; right: 20px; bottom:20px 说明: 位置会固定住,不随滚动条滚动 脱离文档流 4...,会自动转为"行内块元素"(元素之间也不会有间隙) 浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动元素内的文字会避开浮动的元素,形成文字绕图效果 常见需求: 一组子元素,同时左浮动;同时右浮动...;最后一个右浮动,其它左浮动 (三)引入方式 1.内联式(新手模式) div style="color:red;width:100px;">div> 2.嵌入式(练习模式) <style

    1.3K90

    css属性及定位操作

    补充padding的常用简写方式: 提供一个,用于四边; 提供两个,第一个用于上-下,第二个用于左-右; 如果提供三个,第一个用于上,第二个用于左-右,第三个用于下; 提供四个参数值,将按上-右-下-左的顺序作用于四边...或者给.container加一个固定高度的子div: 固定高度解决方案(不推荐使用) 以上方案可以解决但是会使得页面操作不灵活 不推荐使用 解决方案二 清除浮动(推荐使用) clear语法:...relative(相对定位) 相对定位是相对于该元素在文档流中的原始位置,即以自己原始位置为参照物。有趣的是,即使设定了元素的相对定位以及偏移值,元素还占有着原来的位置,即占据文档流空间。...fixed(固定) fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。...在理论上,被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标,不论窗口是否滚动,它都会固定在这个位置。 <!

    2.5K50

    【Web前端】深入CSS 布局

    固定定位(Fixed) 固定定位的元素相对于浏览器窗口进行定位,即使页面滚动,元素也会保持在固定位置。...div style="position: fixed; bottom: 0; right: 0;"> 这是一个固定定位的元素 div> 一个固定在浏览器窗口右下角的元素,即使页面滚动,它的位置也不会改变...粘性定位(Sticky) 粘性定位结合了相对定位和固定定位的特点,当元素在页面中滚动到一定位置时,会“粘”住并保持在该位置。...div style="position: sticky; top: 0; background-color: yellow;"> 这是一个粘性定位的元素 div> 当页面滚动时,元素会在到达顶部时固定在顶部...题1:创建一个三栏布局 使用Flexbox创建一个响应式三栏布局,其中左栏和右栏固定宽度,中间栏自适应剩余空间。

    10510

    Bootstrap实战 - 单页面网站

    二、知识点 2.1 滚动监听 滚动监听使用了 Bootstrap 的 JavaScript 插件,根据滚动条所处的位置自动更新选中导航栏。...并且给导航栏添加样式 navbar-fixed-top 使其固定在顶部不随滚动条移动而移动,但这样的话会遮住 body 上面的一部分内容,所以同时给 body 添加样式 padding-top: 60px...> div> 触发监听依赖 元素的属性 id="nav-menu",滚动监听的效果是由样式为 scrollspy(这里可以是任意值,只是做个示例)载体在其容器的滚动条变化时,随着载体的内容在视觉中的变化...这时移到最顶部时不能合理定位到第一个导航部分,因为上面给了 body 元素一个 60px 的内边距,这里给 body 元素增加一个属性 data-offset="60",使滚动监听在计算滚动位置是相对于顶部有一个偏移量...三、实战 使用 Bootstrap 滚动监听和定制功能制作一个介绍豆瓣 App 的单页面。

    8.9K104

    WEB入门.七 CSS布局模型

    在显示网页内容时,元素按照从左至右、自上而下的顺序动态分布,如需改变它在网页中的位置,只能通过修改网页结构中元素排列的先后顺序和分布位置来实现。...">右列div> div> 图3.1.16 单行两列 (1) 浮动布局实现 设置固定宽度,左列浮于容器的左侧,右列浮于容器右侧,其CSS布局代码如下。...; } #left { /*左列显示属性>*/ position:absolute; /*绝对定位*/ top:0px;/*左上固定显示>*/ left:0px;/*左上固定显示...,值要与左列宽度一致*/ padding-right:140px; /*留出右补白显示右列内容,值要与右列宽度一致*/ } #right {/*右列显示属性>*/ position:...一天、 两天,左等、右等,白娘子心急如焚。终于打听到原来许仙被金山寺的法海和尚给"留"住了,白娘子赶紧带着小青来到金山寺,苦苦哀求,请法海放回许仙。

    11610

    动手练一练,手写一个价格对比、固定表头滚动的表格

    虽然有不少相关插件提供了类似的功能,比如 ScrollMagic.js,但是今天的实例,我们将用纯原生的方式进行实现,当滚动条滚动至表格位置,固定表头位置,表格内容查看完后,取消固定表头的功能。...今天我们将通过一个界面十分漂亮功能价格对比的表格,展示固定表头的功能,实例操作展示如视频所示,当滚动条滚动至表格位置,添加表头固定样式,当滚动至表格底部,移除固定表头样式。...二、案例相关知识点复习 这篇案例我们是通过JS代码,判断滚动条的位置,动态添加和移除表头的固定样式(fix属性),这里就需要运用几个和位置相关 DOM API 才能顺利完成本案例,相关 API 介绍如下所示...上,右和下分别相对浏览器视窗的位置。...如果滚动条滚动至第三部分内容区域,我们将移除固定表头的样式stickyClass,添加移除固定表头的样式 sticky2-table。

    3.2K31

    【前端词典】4 (+1)种滚动吸顶实现方式的比较

    粘性定位 sticky 相当于相对定位 relative 和固定定位 fixed 的结合;在页面元素滚动过程中,某个元素距离其父元素的距离达到 sticky 粘性定位的要求时;元素的相对定位 relative...效果变成固定定位 fixed 的效果。...使用: tab 吸顶可以使用 obj.getBoundingClientRect().top 代替 scrollTop-offsetTop,代码如下: // htmldiv class="pride_tab_fixed...上,右和下分别相对浏览器视窗的位置。...描述: 当页面往下滚动时,吸顶元素需要等页面滚动停止之后才会出现吸顶效果 当页面往上滚动时,滚动到吸顶元素恢复文档流位置时吸顶元素不恢复原样,而等页面停止滚动之后才会恢复原样 原因:在 ios 系统上不能实时监听

    2.2K30
    领券