左侧侧拉栏html,html – 将侧边栏拉伸到页面的完整高度

基于当前代码的最简单方法是使用

viewport units.

.sidebar {

height: 100vh;

}

body {

margin: 0;

}

.container {

width: 750px;

margin: 0 auto;

}

.sidebar {

width: 200px;

background: lightgrey;

float: left;

height: 100vh;

}

.content {

background: lightblue;

float: left;

width: 550px;

}

如果您需要支持旧浏览器,则可以执行此操作.

html, body, .container{

height: 100%;

}

.sidebar {

min-height: 100%;

}

html, body, .container{

height: 100%;

margin: 0;

}

.container {

width: 750px;

margin: 0 auto;

}

.sidebar {

width: 200px;

background: lightgrey;

float: left;

min-height: 100%;

}

.content {

background: lightblue;

float: left;

width: 550px;

}

当内容高于侧边栏时,为了解决滚动溢出问题.需要进行一些轻微的标记更改,请参阅JsFiddle演示.

html, body, .container {

height: 100%;

margin: 0;

}

.container {

width: 750px;

margin: 0 auto;

display: table;

}

.sidebar {

display: table-cell;

width: 200px;

}

.content {

display: table-cell;

width: 550px;

}

.sidebar .inner {

height: 100%;

background: lightgrey;

}

.content .inner {

background: lightblue;

}

.content .inner div {

height: 100px; /*testing*/

}

左侧侧拉栏html,html – 将侧边栏拉伸到页面的完整高度相关推荐

京东图片列表、左侧导航栏、网易新闻列表、京东页面布局、京东轮播图
文章目录京东图片列表京东左侧导航栏网易新闻列表: 京东页面布局京东轮播图京东图片列表代码如下: <head><meta charset="UTF-8" ...
左侧侧拉栏html,侧边抽屉_纯CSS3抽屉式滑动侧边栏菜单设计
插件描述:该侧边栏在鼠标滑过菜单项时,会以平滑的方式滑出相应的主菜单,就像拉开抽屉的效果,非常的时尚. 侧边栏菜单设计说明这是一款使用纯CSS3制作的抽屉式滑动侧边栏菜单设计效果.该侧边栏在鼠标滑过 ...
【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )
文章目录一.Banner 栏版心盒子测量 1.测量版心元素尺寸 2.课程表测量二.Banner 版心盒子模型左侧导航栏代码示例 1.HTML 标签结构 2.CSS 样式 3.展示效果一.Bann ...
左侧导航栏|左侧选项卡实例
转载于:PyQt:左侧选项卡 - JYRoy - 博客园 PyQt:左侧选项卡 - JYRoy - 博客园 PyQt:左侧选项卡写在前面# 正在用pyqt写我们比赛项目的客户端,针对左侧选项卡,写了 ...
php如何去除侧栏,WordPress移除侧边栏图文教程
无论免费主题还是付费的专业主题,大部分默认布局都会有一个侧边栏.但侧边栏并非适合每一个站点,有时候我们可能需要移除它,该怎么做? 可以使用多种方法从整个网站或仅从特定内容中删除WordPress侧边栏 ...
点击左侧导航栏切换右侧商品（左右联动）
点击左侧导航栏切换右侧商品(左右联动) 菜单栏主要以 A,B,C,D等字母为主,即A,B,C,D等字母为对应该项携带的 id(id不能为汉字或纯数字). 实现该功能的思路:通过点击左侧滑栏的某一项,获 ...
CSS3构建左侧导航栏
废话不说,先上图代码: <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
vue项目中处理左侧导航栏问题的分享
2019独角兽企业重金招聘Python工程师标准>>> 相信左侧导航栏大家都不陌生,几乎每个项目都会存在.以前用jquery做的时候,某些本不是什么问题的地方就突然变成阻碍了.下面就 ...
xcode 左侧导航栏 no finder results 问题的解决方法
第一天使用xcode就遇到个很郁闷的问题,刚建的新工程,不知道怎么操作了,左侧导航栏的文件夹和文件等资源都没有了,只显示个"no finder results",试了各种方法都弄不 ...

左侧侧拉栏html,html – 将侧边栏拉伸到页面的完整高度

左侧侧拉栏html,html – 将侧边栏拉伸到页面的完整高度相关推荐

最新文章

热门文章