- 浏览: 1112670 次
文章分类
- 全部博客 (379)
- S2SH (16)
- stuts2 (0)
- java语言 (81)
- JSP (17)
- <html>元素 (11)
- javaweb (4)
- web容器 (3)
- ext (23)
- javaScript (48)
- ant (1)
- liferay (1)
- sql (9)
- css (42)
- 浏览器设置 (3)
- office_world (1)
- eclipse (4)
- 其它 (28)
- 操作系统 (5)
- android (6)
- Struts2 (11)
- RegEx (3)
- mysql (5)
- BigDATA (1)
- Node.js (1)
- Algorithm (10)
- Apache Spark (1)
- 数据库 (5)
- linux (2)
- git (1)
- Adobe (3)
- java语言,WebSocket (1)
- Maven (3)
- SHELL (1)
- XML (2)
- 数学 (2)
- Python (2)
- Java_mysql (1)
- ReactJS (6)
- 养生 (4)
- Docker (1)
- Protocols (3)
- java8 (2)
- 书籍 (1)
- Gradle (2)
- AngularJS (5)
- SpringMVC (2)
- SOAP (1)
- BootstrapCSS (1)
- HTTP协议 (1)
- OAuth2 (1)
最新评论
-
Lixh1986:
Java并发编程:自己动手写一把可重入锁https://blo ...
Java之多线程之Lock与Condition -
Lixh1986:
http://win.51apps.com.cn/https: ...
temp -
ztwsl:
不错,支持很好
HttpServletRequest和ServletRequest的区别 -
guodongkai:
谢谢您能将知识精华汇编总结,让初学者们从原理中学会和提高。
javaScript之function定义 -
kangwen23:
谢谢了,顶顶
struts2中的ValueStack学习
Position: fixed with vertical space
What I have is a rather basic issue with position: fixed.
Here's a sample: http://jsfiddle.net/wxEsY/
What I want is the scrolling to start below the black bar (with a fixed position).
Any help appreciated.
Regards
_______________________________________________________________________
Does this do it?
http://jsfiddle.net/Vqncx/
I just gave the 'content' DIV relative positioning and a y-axis from the top equal to the height of the 'nav' and then gave the 'nav' a z-index to keep it on top of the 'content'.
.nav { width: 100%; height: 50px; background: #000; position: fixed; z-index: 5; } .content { background: #ccc; width: 100%; height: 5000px; position: relative; top:50px; }
_______________________________________________________________________
Add padding to second div equal to height of second div.
.content { padding-top: 50px; background: #ccc; width: 100%; height: 5000px; }
When you say scrolling below the back bar, it sounds like you want the content to begin below the back bar. So add some padding to second div to account for presence of fixed div.
_______________________________________________________________________
-
发表评论
-
Flex之 justify-content 和 flex-direction 的应用
2021-12-23 19:39 402flex 简介: 采用Flex布局的元素,被称为Flex容 ... -
CSS之页面元素飞入效果
2020-04-18 17:50 764效果预览: - https://www.runoob.com ... -
CSS之垂直居中
2020-04-02 10:00 445css里面用text-align:center ... -
Sass之&引用父选择器
2018-08-08 11:29 8284Sass之&引用父选择器 描述: 您可以使用&字符选 ... -
HTML5之canvas之粒子效果
2018-01-26 10:32 1468效果图: JavaScript 代码实现: & ... -
CSS之导航栏设计之 ul 之 li 标签排成一行
2019-06-04 11:11 2416在HTML页面元素设计中, 把具有相同一类功能的列表用 li ... -
HTML5/CSS3鼠标滑过图片滤镜动画效果
2017-12-21 10:54 1323HTML5/CSS3鼠标滑过图片滤镜动画效果 以前我们用CS ... -
CSS之提示框实现
2017-08-02 05:08 1964效果图: 注意以下要点: 1、提示框的箭头效果,且箭头 ... -
Responsive Web Design(自响应式网页设计)
2017-05-28 22:43 1248Responsive Web Design(自响 ... -
css 之 linear-gradient 之 进度条(progress bar)
2017-05-25 18:14 2193CSS 的 linear-gradient() 函数会创建 ... -
在 css 中使用 @font-face
2017-05-24 14:15 558@font-face 允许用户使用自定义的字体。在css中定义 ... -
jQuery之mouseover,mouseover,mouseout,mouseleave
2017-03-14 10:20 655Jquery mouseenter() vs mouseove ... -
css:flex布局
2017-03-13 17:43 931A Complete Guide to Flexbox htt ... -
网站页面配色
2017-01-05 10:12 684导航栏,菜单栏 左侧菜单 导航,底部,选择列表 ... -
BootstrapCSS之Select
2016-10-18 17:00 1095效果图: 代码: <!-- Inclu ... -
CSS样式之带边框的 Anchor(超链接)
2016-10-08 15:19 2913效果图: HTML: <a c ... -
bootstrap css之响应式导航栏
2016-08-29 16:58 16775- 使用 Twitter Bootstrap 3 创建响应式导 ... -
CSS之 white-space : pre
2016-06-15 10:21 1001在 github 的代码浏览页面,可以看到这样的 css 样式 ... -
CSS - li 元素显示在一行____ a 元素没有下横线
2016-05-27 20:44 2219原文链接: http://www.w3schools.com/ ... -
CSS - table 圆角 border radius
2016-04-29 12:08 4562效果: 代码: <!DOCTYPE htm ...
相关推荐
white-space:nowrap;overflow:hidden}.bdsug .bdsug-direct p img{width:16px;height:16px;margin:7px 6px 9px 0;vertical-align:middle}.bdsug .bdsug-direct p span{margin-left:8px}.bdsug .bdsug-direct p i{...
- fixed bug with truncate of font size combo-box in Windows Vista/7 in designer (lost of vertical scroll bar) - fixed bug when lost file name in inherited report - fixed bug in multi-page report with ...
- `white-space: nowrap;` 不换行显示文本。 ### 显示模式(Display) 1. **显示模式** (`display`): - `display: block;` 块级元素。 - `display: inline;` 内联元素。 - `display: list-item;` 列表项。 - ...
- `white-space: nowrap;` 不换行。 #### 四、显示模式(Display Properties) **1. 显示模式 (Display Mode):** - `display: block;` 作为块级元素显示。 - `display: inline;` 作为内联元素显示。 - `display: ...
* white-space: 设置空格方式,包括 pre(保留)、nowrap(不换行) 显示属性 * display: 设置显示方式,包括 block(块)、inline(内嵌)、list-item(列表项)等 * visibility: 设置可见性,包括 inherit、...
- 示例:`white-space: nowrap;` - **单词间距**:`word-spacing`属性定义了单词之间的间距。 - 示例:`word-spacing: 2px;` - **字母间距**:`letter-spacing`属性定义了字母之间的间距。 - 示例:`letter-...
- `white-space: nowrap;` - `overflow: hidden;` - `text-overflow: ellipsis;` #### HTML5 新增的语义化标签 - **`<header>`**:页面或区域的头部。 - **`<nav>`**:包含页面导航链接的部分。 - **`<article>...
- **white-space**: 空白字符处理,如`white-space: nowrap;`保持不换行。 - **line-height**: 行高,如`line-height: 1.5;`。 - **word-spacing**: 单词间距,如`word-spacing: 2px;`。 - **letter-spacing**: 字母...
- **语法**:`white-space: space;` - **描述**:控制元素中的空白字符如何处理。 - **值**: - `pre`: 保留空白字符 - `nowrap`: 不换行 - `normal`: 正常换行 #### 四、显示属性(Display) 显示属性用于控制...
- `space`: 平铺但保持间距一致。 - `round`: 平铺但保持图片完整显示。 - **背景固定** (`background-attachment`): 控制背景图像是随着滚动条滚动还是固定不动。 - `fixed`: 固定背景图。 - `scroll`: 随滚动...
- **示例**:`white-space: nowrap;` **7. `display`**: 元素显示模式。 - **值**:`block`(块级)、`inline`(内联)、`list-item`(列表项)、`run-in`(运行内)、`table`及其子属性等。 - **示例**:`...
white-space: nowrap; ``` #### 四、显示属性 (Display Properties) **1. 显示模式** (`display`) - `block`:块级元素 - `inline`:内联元素 - `list-item`:列表项 - `run-in`:追加局部 - `compact`:...
- `white-space: pre;`:保留源文档中的空白字符。 - 可选值包括`nowrap`(不允许换行)及`normal`(自动换行)。 7. **Display Property** - `display: block;`:将元素作为块级元素显示。 - 可选值包括`...
pre { white-space: pre-wrap; } ``` - **list-style-type**:定义列表项标记的类型。例如: ```css ul { list-style-type: square; } ``` - **list-style-image**:定义列表项标记的图像。例如: ```css ul ...
- **示例:** `white-space: nowrap;` **应用场景:** - 常见于代码展示或者特殊布局需求,例如保持源代码的格式不变。 #### `direction` **定义与功能:** - **定义:** 设置文本的方向,即从左至右(LTR)或从右...
- `vertical-align`:用于控制元素在行内的垂直对齐方式,如`baseline`(基线对齐)、`sub`(下标)、`super`(上标)等。 6. **词间距**: - `word-spacing`:控制单词之间的距离,`normal`为默认值,也可输入...
- **示例**: `pre { white-space: pre; }` **7.3 list-style-type** - **定义与用途**: 设置列表项前面的标记。 - **选项**: - `disc`: 圆点。 - `circle`: 圆圈。 - `square`: 方框。 - `decimal`: 阿拉伯数字...
white-space: pre; } ``` #### 38. 缩写属性(Shorthand Properties) 缩写属性允许同时设置多个相关的属性值。 - `margin`: 设置四个方向的外边距。 - `padding`: 设置四个方向的内边距。 - `border`: 设置边框...
【CSS英文、中文换行】:英文单词换行使用`word-wrap: break-word`,中文强制换行用`white-space: pre-wrap`。 【CSS选择器级别】:根据选择器类型计算权重,权重高的优先应用。 【BFC(块格式化上下文)】:BFC是...
- `white-space: normal;`(默认换行) - `white-space: pre;`(保留空格和换行) - `white-space: nowrap;`(不换行) ### 四、边框样式 #### 1. 边框宽度 (Border Width) - `border-width: 2px;`(设置边框...